H1 대형 제목부터 본문까지 모바일과 데스크톱 화면에서 일관된 비율로 축소·확대되는 스타일을 구축하세요.
제목 크기 스펙 입력
디자인 가이드의 모바일 및 데스크톱 폰트 크기(px)를 기입합니다.
브레이크포인트 입력
디자인 시스템 기준 최소/최대 화면 폭을 지정합니다.
변수 코드 복사
산출된 clamp 코드를 복사하여 CSS 커스텀 속성(Variables)으로 등록합니다.
모바일에서 과도하게 커지는 제목을 자연스럽게 축소시켜 레이아웃 깨짐을 사전에 방지합니다.
CSS 변수에 clamp 수식을 정의해두면 전체 사이트의 반응형 글자 크기를 통일감 있게 관리할 수 있습니다.
표준 16px 루트 기준의 비례식으로 연산되므로 범용적인 CSS 스타일에 바로 호환됩니다.
두 뷰포트 지점 사이의 기울기와 절편을 rem과 vw 단위로 결합하여 선형 보간합니다.