@conainer- 미디어 쿼리의 컨테이너는 viewport인데, 뷰포트 대신 특정 요소를 컨테이너로 적용
- 해당 요소에
container-type: inline-size속성이 있어야 함
@layer- 우선순위 지정 가능
- @layer 변수1 {} ..를 만들고, @layer 변수1 변수2 ..변수n까지 선언하면 우선순위를 지정 가능
- 마지막이 우선순위가 가장 높다
- 명시도를 무시함, but !important는 무시못함
overscroll-behavior- [기본값] 자식 요소의 스크롤이 끝났을 때 더 스크롤하면 부모 요소가 스크롤 됨
- 값이 contain : 끝나도 부모 요소가 스크롤 x
accent-color- 강조 색상을 지정하기 위해 사용
<input>요소의 일부 타입(radio,checkbox,range)과<progress>요소를 상대로만 적용됨
- filter의 drop-shadow와 box-shadow 속성은 비슷..
- but) 전환효과가 있을 땐 filter의 drop-shadow를 쓰는 것이 좋음
- aspect-ratio
- 값으로
가로비율 / 세로비율을 줌 - 이전에는 padding-top에 퍼센테이지 값을 줘서 가로에 따른 세로비율을 정의했음
- scroll-padding-top
- href에 요소를 주면(아이디나 클래스 등), 클릭했을 때 해당 요소로 이동할 수 있는데, 해당 위치의 패딩을 줌
- 헤더 등으로 컨테이너가 가려질 때 사용할 수 있음
- scrollIntoView({behavior: ‘smooth’})
- :has(선택자)
- 선택된 요소 중 특정 선택자를 가지고 있는 요소를 뜻함
- JS의 includes를 대신할 수 있음 ⇒ css는 css에서만 하는 것이 제일 좋음
- 상위 요소의 상태로 하위 요소가 제어되는 것이 좋은 css 구조임
- Nesting
- SCSS의 중첩 문법을 CSS에서 사용할 수 있음!!
- 스타일 내에 &로 선언하여 중첩된 요소 스타일을 지정할 수 있다
.container { ... & .item { /* === .container .item */ ... &:hover { /* === .container .item:hover */ ... } } }
- Multifline Ellipsis
- overflow: hidden; display: -webkit box;일 때
- overflow가 일어났을 때 -webkit-linke-clamp 속성으로 몇라인까지 보일건지(이하는 …으로 후략됨)
- https://codepen.io/heropark/pen/ExOEOmz
- 요소의 높이를 0에서 auto로 부드럽게 전환하는 방법