최신 CSS 속성

1. color-mix() 색상 혼합 기능
   background-color: color-mix(red30%, blue70%);

2. accent-color HTML 요소의 색상 변경
   :hover, :active 등등 라디오버튼, 셀렉트버튼 등의 기본 속성 컬러를 바꿀 수 있음

3. color-contrast() 배경색에 대비되는 색 지정
   color: color-contrast(red) / color-contrast(blue vs red, pink, yellow)
   (배경색 vs 원하는 색1, 원하는 색2, 원하는색 3) 배경색과 가장 대비되는 색으로 지정해줌

4. insert 페이지 섹션 안으니 클릭, 포커스와 같은 유저 상호작용을 중단시킴
   유저가 이미 한 번 클릭한 뒤 버튼을 얼리거나, 양식을 전송하고 유저가 다른곳을 클릭하지 못하게 할 때 사용할 수 있음

5. :has 부모요소에 특정 자식이 있는지 체크해서 스타일 적용
   form:has(button) {color:red;}
   form:has(:not li) {color: blue;}

6. lvh, svh, dvh
   lvh: 가장 큰 viewport 높이
   svh: 가장 작은 viewport 높이
   dvh: 동적 viewport 높이

7. @nest 중첩 셀렉팅을 도와주고 코드 반복을 줄여주는 문법
   &이 부모태그를 지칭

.header {
  background-color: blue;
  & p {
    font-size: 16px;
    & span {
      &:hover {
        color: green
      }
    }
  }
}

8. @scope: 스타일 범위 지정, 테마별로 스타일 분기처리할 때 좋음

9. @container: 반응형 디자인에서 페이지 넓이뿐 아니라 부모요소의 넓이를 기준으로 잡을 수 있음

10. Custom-media 쿼리 : 미디어 쿼리를 변수화해서 재사용 가능