Grid
명시적: grid-template-rows, grid-template-columns
암시적: grid-auto-rows, grid-auto-columns
Grid container
- repeat: 반복하기 위한 함수
- minmax: 현재 최소값과 최대값을 설정할 수 있다.
- fit-content: 너비를 제한 할 수 있다.
Grid에서 사용할 수 있는 단위
- fr: 사용가능한 공간 너비 비율
- min-content: grid item의 최소 너비 값 / 만약 한글을 사용한다면 word-break: keep-all을 사용하면 한글자가 아닌 한단어로 끊어준다.
- max-content: grid item의 최대 너비 값
- auto-fill / auto-fit: repeat이랑 같이 사용하는데 개수부분에 추가함
Transform
요소는 정가운데를 기준으로 변화한다. 그 중 기준을 바꾸기 위한 속성은 transform-origin
3차원 변환 시 perspective를 활용해서 입체감을 표한한다.
Multi-Columns(다단)
- column-count : auto 단의 개수
- column-width: 최적 너비
- column-rule: 구분선
- column-gap: 단과 단 사이에 너비를 지정
심화
- 변수 선언 시 —를 두번 붙여야된다. 그리고 사용할 때 var()안에 넣고 사용
- @supports: 크로스브라우징
- @media: 반응형레이아웃 not을 사용할 때는 타입을 명시해줘야된다. 쉼표로 구분해서 새로운 media쿼리를 적용할 수 있다.
Sass
css와 호환성이 좋고 기능이 풍부하고 성숙도가 높다! 들여쓰기가 중요하다..!
SCSS
Sass와 비슷하지만 CSS랑 거의 비슷하며 중첩(Nesting)기능이 있어서 SCSS추천..!
변수 데이터 종류
- Numbers: 1 , .82 , 20px , 2fr 단위 숫자 가능
- Strings: bold, absolute, “assets/images/”
- Color: blue, rgba(255, 0, 0, .5), #ffff00
- Booleans: true, false
- Null: null
- Lists: (0, 1, 2, 3, 4) / 10px, 20px, 30px / 10px 20px 30px 쉼표, 띄어쓰기, 문자 가능
- Maps: ( key : value ), ( a : apple, b: banana, c : cherry )
연산자
- 산술 연산자: +, -, *, % 는 문제 없지만 /는 단축속성 때문에 따로 선언해야된다. 그래서 피연산자를 ( ) 로 묶어주거나 특정 변수 값과 함께 사용하거나 다른 산술 연산자를 함께 사용하면 된다. 소괄호로 묶어서 사용하는게 가장 적합해보임 또한 연산을 하려면 피연산자 단위도 맞춰 줘야된다!
- 비교 연산자: ==, ≠, <, >, ≤, ≥ 자바스크립트랑 헷갈림 주의!!
- 논리 연산자: and, or, not