1. 유연한 크기 조절 및 레이아웃 제어
-
수학 함수:
min(),max(),clamp()를 통해 반응형 타이포그래피와 가변적인 요소 크기를 한 줄의 코드로 구현할 수 있습니다. -
Container Queries: 뷰포트가 아닌 부모 요소의 크기에 따라 스타일을 변경할 수 있어 컴포넌트 기반 개발에 최적화되었습니다.
-
Logical Properties:
margin-block,padding-inline등은 텍스트 방향과 관계없이 일관된 간격 제어를 가능하게 합니다.
2. 향상된 선택자와 문법
-
:has() 선택자: 특정 자식 요소를 포함한 부모를 선택할 수 있는 ‘부모 선택자’ 기능이 추가되어 복잡한 조건부 스타일링이 쉬워졌습니다.
-
Native Nesting: Sass와 같은 전처리기 없이도 CSS 내에서 중첩 구조를 작성할 수 있어 코드의 가독성이 높아졌습니다.
-
Media Query Range: 기존의 복잡한
min-width구문 대신 비교 연산자(width >= 768px)를 사용하여 직관적인 작성이 가능합니다.
3. 색상 및 애니메이션 최적화
-
Relative Color Syntax: 기존 색상에서 채도나 밝기만 변경하여 새로운 색상을 생성하는 유연한 색상 관리가 가능합니다.
-
@starting-style:
display: none상태에서 나타나는 요소에 애니메이션을 적용할 수 있는 표준 방식을 제공합니다. -
light-dark(): 미디어 쿼리 없이도 다크 모드와 라이트 모드 색상을 동시에 정의할 수 있습니다.
4. 구조적 관리와 단위
-
@layer: 스타일의 우선순위를 명시적으로 지정하여 CSS 특유의 명시도(Specificity) 충돌 문제를 근본적으로 해결합니다.
-
Modern Units: 모바일 브라우저의 UI 변화에 대응하는
dvh,svh등 새로운 뷰포트 단위와 폰트 기반의ch,lh단위를 지원합니다.