& 부모를 그대로 가져온다. (네스팅된 부모 선택) 변수 $ + "작명" : "저장할 내용"; 내장되어 있는 색관련 함수 darken: 어둡게 lighten: 밝게 saturate: 높은 채도(선명하게) desaturate: 낮은 채도(흐리게) adjust-hue: 명도 변경 rgba: alpha값 변경 @extend css 스타일 확장 % 임시 클래스 @mixin @extend와 비슷하지만 매개 변수를 활용할 수 있는 점에서 다르다. @function 재사용성을 위해 함수를 사용하면 좋다. 연산자 Sass에서는 calc함수를 이용하지 않아도 +, -, *, / 연산자를 사용할 수 있다. / 나누기는 연산이 필요한 수식인지 알아야 사용 가능하므로 () 괄호 안에 나누기를 넣거나 다른 연산자와 함께 사용할..
Layout
명시적 속성 열(column)의 배치 : grid-template-columns : 1fr 1fr 1fr; 행(row)의 배치 : grid-template-rows : repeat(3, 1fr); - fr은 fraction(분수, 비율)의 약자로 숫자의 비율대로 트랙의 크기가 나눠진다. 1:1:1 비율인 3개의 column을 만든다. - repeat 함수 repeat(반복횟수, 반복값)을 의미한다. repeat(3, 1fr 4fr 2fr); 이런 식의 패턴도 가능하다. - minmax 함수 minmax(100px, 1fr); 의 의미는 최소한 100px, 최대는 1fr까지 늘어난다. - auto-fill, auto-fit repeat(auto-fill, minmax(20%, auto)); auto-fil..
Container - display - flex-direction - flex-wrap [shorthand] flex-flow : column wrap; - justify-content - align-item (한 줄에 대한 정렬) - align-content (여러 줄에 대한 정렬) - align-self (align-item 사용 시 한가지 아이템에만 따로 적용) Item - align-self (align-item 사용 시 한가지 아이템에만 따로 적용) - flex-grow flex-grow : 1 → n개가 동일한 크기로 꽉채워짐 Container에 flex-wrap → wrap 시 개행된 두번째 줄 꽉채워짐 0이 기본 .item:nth-child(2) 는 2, .item:nth-child(3) ..
