2024 StateOfCSS 정리: 가장 주목받은 3가지 기능

State of CSS 2024 결과가 나왔습니다. CSS도 빠른 속도로 발전하고 있는데요. 조사 결과중에서 개발자들에게 사랑받는 새로운 기능을 한번 정리해보았습니다. 1. CSS Filter Effects (가장 많이 사용, 75.4%) * blur() : 픽셀(px) 단위로 요소에 흐림 효과 적용 * contrast() : 요소의 명암비를 조절하여 이미지나 텍스트의 가독성 향상 .blur-effect { filter: blur(5px); } .contrast-effect { filter: contrast(150%); } 2. :has() 선택자 (72.8% 사용률) 이전에는 JavaScript 로만 가능했던 조건부 스타일링이 이제 CSS로도 가능합니다. * 특정 요소를 포함하는 부모 요소를 선택할 수 있는 "부모 선택자" /* 이미지를 포함한 div 선택 */ div:has(img) { padding: 1rem; } 3. Subgrid (가장 높은 호감도 51.5%) 그리드 구현은 난이도가 있고 복잡한 기능중 하나 인데요. Subgrid 로 다소 복잡한 중첩 그리드를 보다 간단히 구현할 수 있게 되었습니다. * CSS Grid의 확장 기능으로, 자식 그리드가 부모 그리드의 크기를 자동으로 상속 /* 자식 그리드 - subgrid 사용 */ .child { display: grid; grid-template-columns: subgrid; /* 자동으로 부모와 동일한 크기 적용 */ } CSS 기능이 빠르게 발전중이며 JavaScript 의존도가 점차 감소하는 추세 인것 같습니다. 복잡한 레이아웃과 인터랙션도 이제 순수 CSS로 점점 가능해지고 있습니다. 좀 더 자세한 결과가 궁금하신 분은 사이트에 방문하셔서 확인해보세요. https://2024.stateofcss.com/ko-KR