디자인 아틀라스{}최신 CSS·웹 기능
:has(), 앵커 포지셔닝, Popover API, @starting-style — 최근 브라우저가 기본으로 주는 기능들. — 20개 항목
:has() 관계형 선택자:has() Relational Selector
자식이나 형제의 상태를 보고 부모(또는 자기 자신)를 선택하는 CSS 선택자. "부모 선택자"라 불리기도 합니다.
앵커 포지셔닝Anchor Positioning
JS로 좌표를 재지 않고, CSS만으로 한 요소를 다른 요소에 붙여 배치하는 기능. 툴팁·팝오버 위치 계산 라이브러리를 대체합니다.
팝오버 APIPopover API
HTML `popover` 속성 하나로 top layer 렌더링, 라이트 디스미스, Esc 닫기를 공짜로 주는 네이티브 오버레이 API.
@starting-style
요소가 `display:none`에서 나타나는 첫 프레임의 스타일을 정의해서, 등장 애니메이션을 트랜지션만으로 만드는 규칙.
서브그리드Subgrid
중첩된 그리드 아이템이 자기 트랙을 새로 만들지 않고, 부모 그리드의 열/행 트랙을 그대로 물려받게 하는 기능.
color-mix()
두 색을 CSS 안에서 직접 섞는 함수. Sass의 `mix()`나 JS 색상 라이브러리 없이 톤 변형을 만듭니다.
CSS 네이팅Native CSS Nesting
Sass 없이 선택자를 부모 규칙 안에 그대로 중첩해서 쓰는 네이티브 CSS 문법. `&`로 부모를 참조합니다.
light-dark()
라이트/다크 모드용 색을 한 선언 안에 같이 적는 함수. `color-scheme`만 맞으면 브라우저가 알아서 고릅니다.
field-sizing
`<textarea>`·`<input>`이 내용 길이에 맞춰 CSS만으로 자동으로 커지고 줄어들게 하는 속성.
text-box-trim
텍스트 위아래에 폰트가 남기는 여백(leading)을 잘라내서, 박스가 글자 모양에 딱 맞게 하는 속성.
스크롤 상태 쿼리Scroll-State Container Queries
요소가 sticky로 "붙었는지", 스냅으로 "고정됐는지" 같은 스크롤 상태를 CSS 컨테이너 쿼리로 직접 물어보는 기능.
<dialog> 엘리먼트<dialog> Element
포커스 트랩·Esc 닫기·top layer 렌더링·`::backdrop`을 전부 브라우저가 대신해주는 네이티브 모달 엘리먼트.
<details name> 배타적 아코디언Exclusive Accordion with <details name>
여러 `<details>`에 같은 `name`을 주면, 라디오 버튼처럼 하나를 열 때 나머지가 자동으로 닫히는 네이티브 동작.
CSS 삼각함수CSS Trigonometric Functions
`sin()` `cos()` `atan2()` 같은 삼각함수를 CSS 계산식 안에서 바로 쓰는 기능. 원형 배치·시계 바늘을 JS 없이 만듭니다.
interpolate-size
`height: auto`처럼 값이 정해지지 않은 크기 속성도 트랜지션 대상에 넣을 수 있게 하는 속성.
캐스케이드 레이어Cascade Layers
`@layer`로 스타일을 이름 붙인 층으로 나눠서, 선택자 특이도와 무관하게 층 순서로 우선순위를 정하는 기능.
@scope
선택자가 적용되는 범위를 DOM 경계로 묶어서, 하위 컴포넌트 CSS가 서로 새어 들어가지 않게 하는 규칙.
상대 색상 문법Relative Color Syntax
원래 색의 포맷을 몰라도 `color(from ...)`로 그 색을 읽어 채널 일부만 바꾼 새 색을 만드는 문법.
뷰 트랜지션 타입View Transition Types
뷰 트랜지션을 "왜 일어났는지"에 따라 다르게 연출하는 기능. 다음 페이지는 슬라이드-왼쪽, 이전 페이지는 슬라이드-오른쪽처럼.
inert 속성inert Attribute
요소와 그 자손 전체를 포커스·클릭·스크린리더에서 한 번에 제외시키는 HTML 속성. 모달 뒤 배경을 잠글 때 씁니다.