다음은 2024년의 5가지 최신 CSS 기능과 각 기능의 예시 코드입니다.

1. :has() 선택기:
   • 이를 통해 하위 요소를 기준으로 상위 요소의 스타일을 지정할 수 있습니다.

.active 하위 항목이 포함된 경우 상위 div 스타일 지정

div:has(.active) {
       background-color: lightgreen;
   }

1. 컨테이너 쿼리:
   • 컨테이너 크기에 따라 반응형 디자인이 가능합니다.

컨테이너 크기에 따라 카드 레이아웃 변경

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. 중첩 선택기:
   • CSS는 이제 더 깔끔한 코드를 위해 중첩 규칙을 지원합니다.

카드 내 버튼의 중첩 스타일

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

1. text-wrap 속성: 이 속성은 텍스트를 줄 전체에 균등하게 분배하는 데 도움이 됩니다.

텍스트 줄 바꿈을 사용하여 단락 내 텍스트 균형 유지

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1. :포커스 표시 의사 클래스:
   • 이는 키보드 탐색을 통해 요소에 초점을 맞춰 스타일을 지정하여 접근성을 향상시킵니다.

키보드를 통해 초점을 맞추면 입력 필드 강조 표시

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

이 예는 CSS에서 각 기능을 구현하여 웹 디자인의 응답성과 접근성을 향상시키는 방법을 보여줍니다.