2024-2025년 CSS 최신 기능 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, CSS 기술 습득자

난이도: 중급 이상 (CSS 기능 이해 필요)

핵심 요약

• :has(): 자식 요소 기반으로 부모 스타일링 가능 (예: article:has(h2))
• @scope: 모듈화된 컴포넌트 스타일링 지원 (예: @scope (.card))
• color-mix(): 색상 혼합 기능 도입 (예: color: color-mix(in srgb, red 50%, white))
• @container: 컨테이너 기반 반응형 레이아웃 지원 (예: @container (min-width: 500px))

섹션별 세부 요약

1. `:has()` 선택자

• 부모 요소에 특정 자식 요소가 포함된 경우에만 스타일 적용 가능
• 예: 이미지 포함 카드 강조, 유효성 검사 실패 폼 하이라이트
• 모든 주요 브라우저에서 지원

2. `@scope`

• 특정 DOM 영역에 스타일 제한 가능 (BEM명명법 대체)
• 모듈화된 컴포넌트 개발 시 스타일 누수 방지
• Chrome, Safari, Firefox, Edge에서 지원

3. `color-mix()`

• 색상 직접 혼합 기능 (예: color-mix(in srgb, red 50%, white))
• 색상 파라미터 기반 파생 색상 정의 (예: --light: relative-color(--primary lightness + 30%))
• 모든 브라우저에서 부분 지원

4. `@container` 쿼리

• 컨테이너 내부 요소 크기에 기반한 반응형 레이아웃 가능
• 예: 적응형 카드, 반응형 사이드바, 내부 컨테이너 기반 그리드
• Chromium 브라우저에서 완전 지원, Safari/Firefox 부분 지원

5. `::view-transition`

• JavaScript startViewTransition()과 연동된 네이티브 페이지 전환 애니메이션
• 예: ::view-transition-old(root), ::view-transition-new(root) { animation: fade 0.4s; }
• 일부 브라우저에서 플래그 설정 필요

6. `anchor` 기반 위치 지정

• DOM 앵커 기반의 동적 위치 지정 (예: position: anchor; anchor-name: --target;)
• JS 해킹 없이 툴팁, 드롭다운 위치 조정 가능
• 모든 브라우저에서 완전 지원

7. `accent-color`

• 체크박스, 라디오 버튼, 슬라이더 등 폼 요소의 색상 커스터마이징
• 예: input[type="checkbox"] { accent-color: #3b82f6; }
• 대부분의 현대 브라우저에서 지원

8. `nth-child of S`

• 특정 조건의 형제 요소 필터링 (예: li:nth-child(2n of .highlight))
• 클래스 추가 없이 선택적 스타일링 가능

9. 논리적 속성 (Logical Properties)

• padding-inline, padding-block 등 RTL 레이아웃 및 접근성 지원
• padding-left/padding-right 대체

결론

• :has(), @container, color-mix() 등은 JavaScript 의존도를 줄이고 UI 개선에 기여
• 새로운 기능 실험을 통해 반응형 디자인, 모듈화 컴포넌트 개발에 적용 권장
• @scope 및 anchor 기반 위치 지정은 개발 효율성 향상에 유리한 핵심 기술