전체 CSS 기법

CSS Gap Decorations란? 그리드 간격에 선을 긋는 새 기능

row-rule · column-rule 쓰는 법 — Chrome 139+ 는 플래그로

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

CSS Subgrid란? 카드 안쪽을 부모 그리드 줄에 맞추기

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

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

CSS 컨테이너 쿼리란? 부모 너비에 맞춰 바뀌는 컴포넌트

미디어 쿼리(뷰포트 기준)와의 차이

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

CSS :has()란? JS 없이 부모 요소를 스타일링하는 셀렉터

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

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

CSS 중첩 쓰는 법 — Sass 없이 셀렉터를 겹쳐 쓰기

& 로 부모 셀렉터를 가리키는 법

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

CSS Cascade Layers란? @layer로 우선순위 정하기

큰 프로젝트의 스타일 충돌을 푸는 법

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

스크롤 기반 애니메이션이란? JS 없이 스크롤에 맞춰 움직이기

scroll() 와 view() 타임라인 쓰는 법

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

View Transitions API란? 페이지 전환을 부드럽게 잇는 법

SPA 에서도 MPA 에서도 쓸 수 있다

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

color-mix() 쓰는 법 — 두 색을 비율로 섞어 색 만들기

디자인 시스템에서 컬러 팔레트를 동적으로 만들기

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

text-wrap: balance란? 마지막 줄에 한 단어만 남지 않게

짧은 텍스트에만 — 긴 본문에는 성능 비용이 있다

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

CSS 앵커 포지셔닝이란? 툴팁을 CSS만으로 요소에 붙이기

드롭다운 위치 지정도 JavaScript 없이

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