전체 CSS 기법

📏

CSS Gap Decorations

row-rule/column-rule로 간격에 선 그리기

CSS Gap Decorations는 그리드나 플렉스 간격 영역에 장식 선을 그리는 기능입니다. Chrome 139+ 플래그 활성화로 사용할 수 있습니다.

🧩

CSS Subgrid

부모 그리드 트랙을 자식에게 상속

Subgrid는 부모 그리드의 행/열 트랙을 자식 그리드에 그대로 상속하는 기능입니다. 복잡한 카드 레이아웃에서 정렬 일관성을 유지할 수 있습니다.

📦

CSS Container Queries

부모 컨테이너 크기에 반응하는 컴포넌트

Container Queries는 뷰포트가 아닌 부모 컨테이너 크기에 따라 스타일을 변경하는 기능입니다. 진정한 컴포넌트 기반 반응형 디자인을 가능하게 합니다.

🔍

:has() 셀렉터

자식 조건으로 부모/형제를 선택

:has() 셀렉터는 자식이나 후속 요소의 상태를 조건으로 부모나 형제 요소를 선택할 수 있는 관계형 의사 클래스입니다.

📥

CSS Nesting

Sass 없이 네이티브 중첩 규칙 작성

CSS Nesting은 프리프로세서 없이 브라우저 네이티브로 중첩 규칙을 작성할 수 있는 기능입니다. & 셀렉터로 부모를 참조합니다.

📚

CSS Cascade Layers

@layer로 스타일 우선순위 명시적 제어

Cascade Layers는 @layer 규칙으로 CSS 우선순위를 명시적으로 계층화하는 기능입니다. 대규모 프로젝트에서 스타일 충돌 문제를 해결합니다.

🖱️

Scroll-driven Animation

JS 없이 스크롤 기반 인터랙션 구현

Scroll-driven Animation은 scroll()과 view() 타임라인으로 스크롤 위치에 연동된 CSS 애니메이션을 구현하는 기능입니다.

🎬

View Transitions API

페이지 전환 시 부드러운 애니메이션

View Transitions API는 페이지 간 또는 DOM 상태 변경 시 부드러운 전환 애니메이션을 제공합니다. SPA와 MPA 모두에서 사용 가능합니다.

🎨

color-mix()

두 색상을 비율로 혼합하여 동적 색상 생성

color-mix() 함수는 두 색상을 지정된 비율로 혼합하여 새로운 색상을 만들어냅니다. 디자인 시스템에서 동적 색상 팔레트를 생성하는 데 유용합니다.

⚖️

text-wrap: balance

제목 텍스트의 균등 줄바꿈

text-wrap: balance는 텍스트의 줄바꿈을 균등하게 분배하여 마지막 줄에 단어 하나만 남는 문제를 해결합니다.

⚓

CSS Anchor Positioning

JS 없이 요소를 다른 요소에 앵커 고정

CSS Anchor Positioning은 요소를 다른 요소에 상대적으로 위치시키는 기능입니다. 툴팁이나 드롭다운의 위치 지정을 JavaScript 없이 CSS만으로 구현합니다.

💬

Popover API

HTML 네이티브 팝오버/모달 구현

Popover API는 HTML popover 속성으로 모달과 팝오버를 네이티브 구현하는 기능입니다. 접근성이 자동 지원되고 JavaScript가 최소화됩니다.