CSS는 이제 단순히 색상과 폰트만 조정하는 언어가 아니라, 레이아웃·모션·접근성까지 다루는 프론트엔드 핵심 툴킷이 되었습니다.
2025년 CSS 생태계 조사(State of CSS 2025)에서는 특히 몇 가지 문법이 “게임 체인저”로 꼽혔습니다. 이번 글에서는 그 문법들을 쉽게 이해할 수 있는 예시와 함께 정리해보겠습니다.
1. :has() — 부모 선택자를 가능하게 한 최초의 의사 클래스
기존 문제
CSS는 “부모 요소를 조건으로 자식 스타일을 바꾸는 것”이 불가능했습니다.
/* 예: div 안에 img가 있으면 div에 테두리 주고 싶다 → 불가능 */
div:has(img) {
border: 2px solid red;
}해결
:has()는 “자식·자손 상태에 따라 부모를 선택”할 수 있게 합니다.
/* input이 invalid일 경우 form 전체에 빨간 테두리 */
form:has(input:invalid) {
border: 2px solid red;
}👉 유효성 검사, 조건부 레이아웃, UI 반응형 디자인에서 혁명적인 전환점이 된 기능입니다.
2. aspect-ratio — 고정 비율 레이아웃
기존 문제
이미지·비디오 등은 가로세로 비율을 유지하려면 padding trick이나 자바스크립트를 써야 했습니다.
해결
이제 CSS 속성 하나로 끝납니다.
.card {
aspect-ratio: 16 / 9; /* 가로 16, 세로 9 비율 유지 */
}👉 반응형 썸네일, 영상 박스, 카드 UI에서 가장 많이 쓰이는 속성 중 하나입니다.
3. subgrid — 중첩된 그리드를 부모와 정렬
기존 문제
CSS Grid 안의 또 다른 Grid(중첩 Grid)는 부모 그리드의 행/열 크기와 맞추기 어려웠습니다.
해결
subgrid를 쓰면 부모 Grid의 라인을 그대로 상속받습니다.
.parent {
display: grid;
grid-template-columns: 1fr 2fr;
}
.child {
display: grid;
grid-template-columns: subgrid; /* 부모와 정렬 동일 */
}👉 카드 목록, 리스트+서브리스트 정렬 같은 복잡한 레이아웃에서 큰 힘을 발휘합니다.
4. text-wrap: pretty — 보기 좋은 줄바꿈
기존 문제
브라우저 기본 줄바꿈은 단순히 공간이 부족하면 단어를 끊습니다. 가끔 보기 흉한 결과가 나옵니다.
해결
text-wrap: pretty는 가독성 중심의 줄바꿈을 제공합니다.
p {
text-wrap: pretty;
}👉 블로그, 기사, 문서처럼 텍스트 중심 UI에서 유용합니다.
5. light-dark() — 자동 다크/라이트 색상 지정
기존 문제
다크 모드/라이트 모드에 따라 다른 색을 쓰려면 @media (prefers-color-scheme)로 조건문을 써야 했습니다.
해결
light-dark() 함수로 한 줄에 모드별 색상을 선언할 수 있습니다.
body {
background-color: light-dark(white, black);
color: light-dark(black, white);
}👉 테마 대응 코드가 훨씬 짧아지고 직관적입니다.
6. CSS Nesting — 중첩 문법
기존 문제
Sass 같은 프리프로세서에서만 가능했던 중첩 선택자를 표준 CSS가 지원하지 않았습니다.
해결
이제 CSS 자체에서 중첩 가능합니다.
.card {
padding: 1rem;
& h2 {
font-size: 1.2rem;
}
& button {
color: white;
background: blue;
}
}👉 구조화된 컴포넌트 스타일 작성이 더 읽기 쉽고 관리하기 쉬워짐.
7. 기타 문법들
sibling-count(),sibling-index()→ 같은 부모 내 형제 요소 개수/순서를 기반으로 스타일링 가능. (아직 실험적)- 삼각함수(
sin(),cos()) → 그래픽적 효과, 애니메이션 계산에 사용 가능. 다만 “과연 CSS에서 수학까지 써야 하나?”라는 부정적 반응도 있음.
마무리 ✨
State of CSS 2025에서 주목받은 문법들은 대부분 “오래 기다린 기능” 들입니다.
특히 :has(), subgrid, aspect-ratio는 이제 실무 기본값으로 자리잡고 있고, light-dark(), text-wrap: pretty, Nesting 같은 기능도 점차 보급될 것입니다.
👉 결론: 앞으로 CSS는 더 적은 코드로 더 직관적이고 강력한 레이아웃/스타일링을 가능하게 하는 방향으로 진화 중입니다.
