한 줄 요약 - 브레이크포인트 없이 글자를 매끈하게 키우는 clamp()와, 클래스 대신 '값'으로 테마를 바꾸는 컨테이너 스타일 쿼리. 미디어쿼리/클래스 더미를 줄이는 두 가지입니다.
clamp() 유체 타이포
제목 하나를 모바일부터 와이드까지 맞추려고 @media 단계를 여러 개 쌓으면, 코드가 길어지고 단계 사이에서 크기가 계단처럼 툭 점프합니다. clamp(최소, 가운데값, 최대)는 가운데에 vw(화면 폭 비례 단위)를 섞어, 폭이 변하는 순간순간 글자가 바닥과 천장 사이에서 연속으로 따라옵니다. 한 줄로 끝나요.
컨테이너 스타일 쿼리
알림 카드를 info/success/warning으로 바꿀 때, 카드와 안쪽 배지/버튼마다 클래스를 일일이 붙이는 대신, 부모에 값 하나(--tone)만 심고 자식이 @container style(--tone: success)로 그 값을 보고 스스로 색을 정하게 합니다. 폭에 반응하는 사이즈 컨테이너 쿼리와 달리 이건 '값'에 반응하는 변종이에요. 비교적 최신(2026 Baseline)이라 미지원 브라우저용 클래스 폴백을 함께 두는 게 안전합니다.
한 줄 정리
둘 다 '단계/클래스 더미를 데이터 한 줄로' 줄이는 방향입니다. 아래 관련 데모에서 직접 만져보세요.