CSS clamp()로 반응형 폰트 구현하기
CSS clamp() 함수는 미디어 쿼리 없이도 화면 크기에 따라 유동적으로 변하는 폰트 크기를 구현할 수 있는 방법입니다. clamp(최솟값, 기본값, 최댓값) 구조로, 기본값은 vw 단위를 활용해 화면 폭에 비례하여 선형으로 변합니다.
계산 원리
뷰포트가 최솟값 미만일 때는 최소 폰트, 최댓값 초과일 때는 최대 폰트로 고정됩니다. 그 사이에서는 두 극단을 잇는 선형 공식으로 부드럽게 변합니다. 기울기 = (최대 폰트 - 최소 폰트) / (최대 뷰포트 - 최소 뷰포트), y절편 = 최소 폰트 - 기울기 × 최소 뷰포트입니다.
실무 적용 예시
H1 제목에 모바일 24px, 데스크탑 40px을 clamp()로 구현하면 중간 화면에서 자연스럽게 전환됩니다. font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem) 같은 형태로 CSS에 직접 적용할 수 있으며, 반응형 웹 디자인 시스템의 핵심 기법 중 하나입니다.
자주 묻는 질문
브라우저 지원 범위는 어떻게 되나요?
Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+ 등 모든 모던 브라우저에서 지원됩니다. IE는 미지원이므로 IE 지원이 필요하면 미디어 쿼리 폴백을 함께 사용하세요.
폰트 외에 다른 CSS 속성에도 쓸 수 있나요?
네, padding, margin, width, height, gap 등 수치를 받는 모든 CSS 속성에 clamp()를 적용할 수 있습니다. 반응형 간격 시스템을 만들 때도 매우 유용합니다.