한 줄 요약 - font-size를 clamp(최소, 가운데값, 최대) 한 줄로 적으면, 화면이 넓어지고 좁아질 때 글자가 두 값 사이에서 매끈하게(끊김 없이) 따라 커집니다.
이럴 때 필요해요
제목 하나를 모바일/태블릿/데스크톱에서 다 어울리게 만들려면, 보통 @media 브레이크포인트를 여러 개 만들어 단계마다 글자 크기를 바꿔 줍니다. 단계가 많을수록 코드가 길어지고, 단계와 단계 사이에선 크기가 안 변하다가 특정 폭에서 갑자기 점프(계단처럼 툭 커짐)하죠. clamp()는 이 단계 더미를 한 줄로 줄여 줍니다.
어떻게 동작하나
clamp(min, preferred, max)에 세 값을 줍니다. min은 바닥, max는 천장입니다.
가운데 preferred에는 보통 vw 단위(viewport 너비의 1퍼센트)를 섞습니다. 화면 폭에 비례하므로 폭이 변하면 값도 연속으로 같이 변합니다.
브라우저가 preferred를 계산해 보고, min보다 작으면 min으로, max보다 크면 max로 잘라 줍니다. 그래서 좁아도 너무 작아지지 않고, 넓어도 끝없이 커지지 않습니다.
핵심은 이거예요
clamp() 한 줄이 바닥과 연속 변화와 천장을 한꺼번에 표현합니다. 미디어쿼리 계단을 쌓지 않고도, 폭이 바뀌는 그 순간순간 글자가 부드럽게 따라옵니다.
놓치기 쉬운 것
preferred가 vw만 있으면 아주 좁은 화면에서 글자가 확 작아질 수 있어요. base가 되는 작은 px을 섞어(예: 0.5rem + 2vw) 바닥을 받쳐 주면 안전합니다.
min과 max를 너무 가깝게 잡으면 변화가 거의 안 보이고, 너무 벌리면 중간 폭에서 과하게 커질 수 있어요. 실제 화면에서 양 끝 폭을 직접 확인하세요.
vw 기반이라 사용자가 글자 확대(브라우저 zoom/폰트 키우기)를 해도 잘 안 커질 수 있어요. 접근성이 중요하면 vw 대신 rem을 섞은 식을 권장합니다.
이런 곳에 써요
랜딩 페이지 히어로 제목 - 모바일부터 와이드 모니터까지 한 줄로 대응.
카드/섹션 안쪽 padding이나 gap 같은 여백 - 글자뿐 아니라 간격도 폭 따라 유연하게.