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