: @if, @else if, @else 사용 (JS와 유사)

1. 조건문 작성

@mixin breakpoint-view($breakpoint) {
    @if $breakpoint == pc {
        @media (width >= 1280px) {
            @content;
        }
    } @else if $breakpoint == tablet {
        @media (width <= 920px) {
            @content;
        }
    } @else {
        @media (width <= 480px) {
            @content;
        }
    }
}

-> 매개변수 만들어서 조건문 사용 @content : 콘텐츠 그대로 가져옴

2. @include 하고 content 작성

   .con {
        @include breakpoint-view(tablet) {
            padding-inline: 1rem;
        }
    }

-> width값이 tablet 조건문이 되면 .con의 padding 좌우값이 1rem이 된다

SCSS 조건문 - @for문

: @for 사용

• @for $i from 1 through 7 { } ( 1부터 7까지 포함 )

1. @for문 작성 &-#{$i} { ~ }

   .section-1 {
    .box {
        @for $i from 1 through 7 {
            &-#{$i} {
                background-color: nth((red, orange, yellow, green, blue, navy, purple), $i);
            }
        }
    }
   }

2. 리스트(배열) 사용 - 더 깔끔함

   .section-1 {
    // 리스트
    $colors: (red, orange, yellow, green, blue, navy, purple);
    .box {
        @for $i from 1 through 7 {
            &-#{$i} {
                background-color: nth(($colors), $i);
            }
        }
    }
   }

-> $colors를 만들어서 nth(()) 안에 넣어주기

• @for $i from 1 to 7 { } ( 1부터 7까지 / 1~6만 나옴. 7은 제외)

.box {
        @for $i from 1 through 7 {
            &-#{$i} {
                background-image: url(https://picsum.photos/id/#{$i}/200/300)
            }
        }
    }

lorem picsum에서 id 있는 링크 불러오기 id 옆 번호에 #{$i}로 해서 다양한 이미지 불러오기 가능

: 반복되는 CSS 코드를 하나의 묶음으로 만들어 필요할 때마다 불러서 사용하는 기능

-> 컴포넌트 정의와 같음

@mixin box-base() {
    width: 200px;
    height: 200px;
    background-color: #34cfeb;
    border-radius: 1.2rem;
    margin: 10px;
    transition: all .3s ease;

    &:hover {
        background-color: #6d2fc4;
    }
}

@include

: mixin 호출

.box-1 {
    @include box-base();
}

-> mixin에서 변경하고 싶다면 바로 밑에 작성하면 됨

@mixin에서의 매개변수, 인자 사용

1. @mixin에 매개변수 입력

@mixin box-base($btn-bg-color, $font-size) {
    width: 200px;
    height: 200px;
    background-color: $btn-bg-color;
    font-size: $font-size;
}

2. @include에 인자값 입력하여 전달

   .box-1 {
    @include box-base(#d63eb8, 2rem);
   }

@mixin 초기화 (기본값 지정)

1. @mixin 함수값 () 안에 매개변수 기본값 지정

   @mixin box-base(
    $btn-bg-color: #31eb69, 
    $font-size: 1.3rem,
    $width: 150px,
    $height: 150px
    ) {
    width: $width;
    height: $height;
    background-color: $btn-bg-color;
    font-size: $font-size;
   }

2. @include에 변경할 인자값 작성 (기본값이 있으면 전달 생략 가능)

   .box-1 {
    @include box-base(#34cfeb, 2rem, 300px, 250px);
   }

• ※들여쓰기※
• 세미콜론, 중괄호 X
• 주석처리 // 가능

SCSS

• 세미콜론, 중괄호 사용 (CSS와 동일)
• 주석처리 // 가능
• & 활용 가능 ex) .top-bar 안에 .top-bar_menu-1을 작성할 때 &_menu-1 로 작성 가능함

변수 : $~~

: 선택기를 계속 이어서 작성 가능. 그룹으로 묶을 수 있는 장점이 있다.

.top-bar {
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);

    .con {
        height: 100%;
        display: flex;
    }
}

@media 쿼리 중첩 : max-width, min-width 없이 직관적으로 작성 가능

.top-bar {
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);

    .con {
        height: 100%;
        display: flex;

        @media (width <= 920px) {
        padding-inline: 1rem;
        }
    }
}

※ 클래스명 붙일 때 주의사항

크게 감싸는 것들은 클래스명 뒤에 wrap, box 붙이기 ( 메뉴 nav, div 등 )

B : Block - 독립적인 컴포넌트(header, card, button, modal, form)

E : Element - 구성요소( _ _ _ ) title, description, card_ _ _ , header, card__title

M : Modifier - 변형된 상태 (--) buttion--primary, card__title--large

<장점> 명확한 구조와 계층 관계 표현 재사용성이 높은 모듈화된 CSS 유지보수가 용이 협업 시 코드 이해도 향상

CSS Logical Properties : CSS 새로운 문법

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values

margin-block: margin 상하 margin-inline: margin 좌우

margin-block-start : margin-top margin-block-end : margin-bottom margin-inline-start : margin-left margin-inline-end : margin-right

2. 폴더 만들고 vscode 열기

3. ctrl + J로 터미널창 열고 Git Bash 창 열기

4. .git 폴더 생성 => git init

5. master에서 main으로 변경 : git branch -M main

git config --global init.defaultBranch main

6. 사용자 설정

• 현재 폴더만 사용자 바꾸기 git config user.name "" git config user.email ""
• 전체 폴더 사용자 바꾸기 git config --global user.name "" git config --global user.email "" 사용자 확인 방법
• git config user.name git config user.email

7. 리포지터리

• 리포지터리 설정 git remote add origin 리포지터리 주소
• 리포지터리 삭제 git remote remove origin
• 리포지터리 확인 git remote -v

8. 상태 확인 및 장바구니 담기

git 상태확인 : git status git 장바구니 담기 : git add '파일 이름' git 장바구니 모두 담기 : git add . git 장바구니 취소 : git reset

9. commit 메시지

• 커밋 메세지 git commit -m "커밋 내용" 이왕이면 영어 한국어도 상관 없음
• 커밋 내용 확인 git log
• 커밋 수정 git commit --amend
• 수정모드 : a, i
• 저장 : esc => :wq!

10. git에 올리기

git push origin main

11. 리포지터리에서 가져오기 - clone

• 소스코드가 아예 없는 처음 상태에서 가져오는 법 git clone 리포지터리 주소
• 폴더 옮기는 방법 cd + Tab

12. 리포지터리에서 가져오기 - pull

• 이미 소스코드가 있는 상태에서 최신 소스코드만 가져오는 법 git pull origin main 항상 작업하기 전에 먼저 pull을 해야함

13. 코드 소스 수정 후 다시 올리기

• 작업을 새로 할 때 git init git remote add origin [깃 주소]

• 작업 후에 다시 명령어 반복 git add . git commit -m "작업 내용" git push origin main

: 브라우저 전용 CSS

[브라우저 UI] 주소창, 탭, 메뉴 -> webkit(HTML, CSS해석, 화면 렌더링) -> 운영체제(macOS,iOS,Windows)

1. HTML 파싱

2. CSS 적용

3. 레이아웃 계산

-글자 크기, 박스 크기, 위치 정하기

4. 화면에 그림(렌더링)

: 겹쳐진 두 요소의 색을 어떤 방식으로 계산해서 보여줄지 정하는 것 기본값 : normal difference, multifly, hard-light 등 다양함

pointer events : none;

ㄴ 이벤트를 모두 차단함 (클릭, 드래그, 호버 등)

텍스트 svg 만드는 사이트 https://danmarshall.github.io/google-font-to-svg-path/

tilt.js

: 호버했을 때 애니메이션 : js 복붙 후 적용할 class명 맞추기

marquee

: 무한으로 이어지는 애니메이션 : GPT 활용

• css 변수 만드는법

:root {
    --background-color:#fff;
    --text-color: #222;
}

• 적용하는법

  :root {
    color: var(--text-color);
    background-color: var(--background-color);
  }

arrow function : 간략하게 함수 작성

• 일반 함수

$('.btn-toggle-theme').click(function() {
    $(':root').toggleClass('dark');
});

-arrow function

$('.btn-toggle-theme').click(() => $(':root').toggleClass('dark'));

만약 this를 써야한다면 arrow 사용 X

each = for 반복문

: 스크롤 내리면 다음 섹션이 풀 페이지로 나오게 하는 것

main {
    overflow-y: scroll;
    height: 100vh;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

-> scroll-snap-type = 스크롤이 멈추면 어디에 맞출건지 설정 y mandatory = 세로 스크롤을 강제로 스냅포인트에 맞추는 설정

.section_group > .section {
    min-height: 100vh;
    border: 10px solid red;
    box-sizing: border-box;
    scroll-snap-align: start;
}

-> scroll snap을 시작점으로 맞춤

반응형 swiper

breakpoints: {
        0: {
            slidesPerView: 1
        },
        768: {
            slidesPerView: 2
        },
        1024: {
            slidesPerView: 3
        },
        1280: {
            slidesPerView: 4
        },
        1536: {
            slidesPerView: 5
        }

-> js에 설정할 수 있음

user-select: none; -> 사용자가 드래그 못하게 막음

width()

• content 영역만 (padding, border, margin 제외)

innterWidth()

• content + padding

outerWidth()

• content + padding + border

outerWidth(true)

• content + padding + border + margin

background-image

: 배경 이미지

background-repeat : 배경이미지 반복여부 background-size : 배경이미지 크기 background-position : 배경이미지 위치 background-attachment : 배경이미지 고정여부 (fixed -> 스크롤 내려도 고정됨)

애니메이션 코드

~ + codepen demo 검색 (모르겠으면 GPT한테 물어보기) GPT 설명 보기 - 무엇인지는 알고 갖고오기

AOS.init();

• 딜레마

1. 이미지 로딩 전에 애니메이션 실행됨

-> setTimeout으로 해결 2. 이미지가 더 빨리 로드되었을 때 애니메이션이 위에 있으면 실행이 안됨 -> imagesLoded 사용 3. 인터넷이 느릴 때 흰 화면밖에 안 보임 -> Loading 화면 만들어서 해결

animate (라이브러리) 사용법

1. CDN 검색 후 라이브러리 복붙

2. 밑에 있는 코드 복붙

   <h1 class="animate__animated animate__bounce">An animated element</h1>

3. animate__bounce 부분 원하는 효과로 변경

모작 과제

1. header / main / footer
2. main section 나누기 (9개)
3. head에 라이브러리 태그 마지막에 넣기 (주석 필수) / css, js(defter) 연동
4. header / main > section*9 / footer
5. 젠코딩 - ctrl + space bar
6. head 안 title 이름 변경
7. main에 margin-top : header height값 넣기
8. 폰트 불러오기 : 눈누에서 웹폰트 복붙 ( 맨 위에 ), 400/500/700 보통 3개 사용함
9. 폰트적용 : html, html > body, html > body input { font-family : ~ } 사용된 폰트 - Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, Dotum, '돋움', sans-serif;
10. work/images 파일 만들어서 이미지 저장. img ctrl+space bar 경로찾기

파일명은 모두 영어로

swiper, slick (JS 라이브러리)

: 슬라이드 라이브러리 https://swiperjs.com/demos

swiper 여러개 넣고 싶을 때

1. 필요한 부분만 복붙
2. class를 구분하고 html, css 수정
3. 주석 꼭 사용해서 구분하기
4. 바꾸고 싶은건 f12로 이름 확인, css 추가

$('.form-1__checkbox-all').change(function() {
    console.log(this.checked)
})

console에 checkbox 선택됐을 때 true, 해제됐을 때 false값이 나옴

focus : 마우스 클릭했을 때

현재 사용자의 입력을 받고 있는 대상이 누구인지

f12로 focuse 되었는지 확인가능

attr (attribute) : 정보

: HTML에 적힌 초기값

$('input').attr('checked');

-> "checked" 글자 그대로

• id, class, href, src 같은 정보를 얻고 싶을 때

#('a').attr('href','google.com');

prop (property) : 상태

: 현재 DOM에 실제 상태

$('input').prop('checked');

-> "true" or "false" 체크했다면 true, 아니라면 false

• checked, disabled, selected 확인

  $('input').prop('disabled',true);

masonry (라이브러리)

: 배치를 자동으로 해줌 (카드 ui에 용이 ex-핀터레스트) CSS에 반응형은 맞춰두고, 레이아웃값을 masonry에게 맡김

smooth scrollbar

: 스크롤바를 자연스럽게 만들어줌

!! 라이브러리를 여러개 사용할 때, 서로 호환이 되는지 확인해야함

body {
    color: blue;
}

nav {
    width: 100px;
    height: 100px;
    border: 10px solid currentcolor;
}

-> border 색상값은 부모(body)의 값으로 지정된다. 만약 nav의 color를 지정했다면 그 값으로 지정된다.

체크박스

<div class="input_type">
    <label>
        <span>문자입력 : </span>
        <input type="text">
    </label>
</div>

label : form 요소 이름 input : 사용자가 값을 입력하는 form 요소

input type

• text
• number
• email
• checkbox (종류 많음)

form = 입력값을 전송하는 버튼 생성

< form과 button의 차이 >

button의 type은 3개 (button, submit, reset) type을 submit으로 지정해주면 form과 같다.

checkbox 노말라이즈

.custom_checkbox_1 > input[type="checkbox"] {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    display: block;
    box-sizing: border-box;
    border-radius: 0;
    opacity: 0;
}

toggleClass (JS)

addClass, removeClass 반복

: CSS 애니메이션 과정의 중간 절차를 제어 : from/to, %별로 지정 가능

div {
  animation-name: around; /* 이름 정의 */
  animation-duration: 1s; /* 몇초동안 애니메이션을 할건지 정의 */
  animation-iteration-count: infinite; /* 무한으로 실행 */
  animation-delay: 3s; /* 딜레이 추가 */
}

animation-play-state: running; -> 멈추고 싶을 때 paused

animation-timing-function 종류

• ease (가장 많이 쓰이는 기본 자연스러운 움직임) : 시작-느림, 중간-빠름, 끝-느림 (ex. 버튼 hover, 카드 등장)
• ease-in (점점 가속) : 시작-매우 느림, 끝-빠름 (ex. 물체가 출발하는 느낌, 아래에서 위로 튀어오르는 요소)
• ease-out (멈추는 느낌 강조) : 시작-빠름, 끝-느림 (ex. 모달, 팝업 닫힐 때, 요소가 제자리 안에 안착하는 모션)
• ease-in-out (가장 부드러운 곡선) : 시작-느림, 중간-빠름, 끝-느림 (ex.고급스러운 UI 모션, 페이지 전환 효과)
• linear (기계적인 느낌) : 처음부터 끝까지 같은 속도 (ex.로딩 스피너, 무한 회전 애니메이션)
• cubic-bezier (고급) : 사용자 임의로 정할 수 있음 (ex. 디자인 시스템, 포폴에서 자주 사용) https://cubic-bezier.com/

:root

: CSS의 전역 설정 장소 root == html

< hr > = 줄 (html)

mx-auto - margin x값 모두 auto (가운데 정렬)

img 크기비율 - aspect-[ / ] object-cover w-full

그리드 - grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 평소에는 1개씩, md사이즈일 때 2개씩, xl일 때 3개씩 정렬함

inset-0 : 4방향 모두 0;

애니메이션 : before:transition before:duration-300

a태그는 inline-block이라 overflow가 안 먹을 수 있기 때문에 display를 block으로 바꿔준다

띄어쓰기 X _로 표기

Grid - 여러 요소를 규칙적으로 놓을 때 필요

• 행(row): 가료방향 줄
• 열(column): 세로방향 줄
• Grid Container : display:grid를 준 부모 박스
• Grid item : 컨테이너 안에 있는 자식 박스들

display: grid;

• 블록 요소처럼 한 줄을 차지하는 그리드 컨테이너

display: inline-grid;

• 내용 크기만큼만 차지하는 인라인 그리드

grid-template-columns: 100px 100px 100px; grid-template-columns: 1fr 1fr 1fr;

Flex vs Grid

• grid: 2차원 (가로x세로)
• flex: 1차원 (한 방향 위주)

css 까먹은 거

overflow: hidden; ㄴ 넘치는 컨텐츠 가리기

JS - 제이쿼리 CSS - 부트스트랩, 테일윈드, 데이지 UI

테일윈드

유틸리티 퍼스트 : class를 조립해서 디자인한다. 단점 - html이 복잡하고 가독성이 떨어짐

JIT 모드 : 원하는 라이브러리가 없을 때 oo-[ ] 직접 정의

<ul class="flex bg-[#afafaf] p-[0_20px] rounded-[10px]">

컬러피커 지정, 패딩 = px(패딩 x값), py(패딩 y값) 적용된 코드를 모르겠다면 거꾸로 검색 group 설정

img

aspect-ratio 이미지 비율

이미지를 원본과 같이 맞추려면 object-fit: cover; (기본값 : fill;) object-cover

@media (min-width: 768px) {
  .visible-on-md-up {
    display: block;
  }
}

-> 최소 768px 이상일 때 display: block;

min-width, max-width 활용하기

css는 깨지는 부분만 다시 수정하면 된다. @media ( max-width: 1440px ) {} @media ( max-width: 768px ) {} @media ( max-width: 375px ) {}

사이즈 참고

모바일 퍼스트 (min-width)

• 기본 스타일을 모바일 기준으로 작성
• 화면이 커지면 min-width 미디어쿼리로 점진적 레이아웃 확장
• 작은화면 -> 큰 화면 순서로 스타일 적용
• 현대 트렌드, 유지보수 용이

데스크탑 퍼스트 (max-width)

• 기본 스타일을 데스크탑 기준으로 작성
• 화면이 작아지면 max-width 미디어쿼리로 조정
• 큰 화면 -> 작은화면 순서로 스타일 적용
• 레거시 코드, 데스크탑 우선 디자인

.js -> 자바스크립트 라이브러리 -> script src="" css -> css 라이브러리 -> link href=""

테일윈드 - 모두 노말라이즈 (버튼 디자인, h1 텍스트까지 )

max-width, min-width

최대, 최소로 늘어날 수 있는 너비 사이즈 조정 (반응형)

float

왼쪽 오른쪽 정렬

.faq-box__question::after {
  content: "[+]";
  float: right;
}

부모요소의 높이값이 깨질 수 있음 -> flex, grid로 해결

JS 메서드

show, hide : 보여주고 사라짐 fadeIn, fadeOut : 서서히 보여지고 서서히 사라짐 (시간값) sideDown,slideDown : 서서히 내려가고 서서히 올라감 (시간값)

Index, eq

• index : 배열 번호 (0,1,2 ...)

  let thisIndex = $this.index();
  

-> this의 index를 찾는 변수 만들기

- eq: = 같다

$box1Main.find(' > ul > li').eq(thisIndex).addClass('active');

$box1Main에서 find하고, 그 배열과 같은 요소를 찾아 addClass한다