유동형 타이포그래피용 CSS clamp() 생성기
최소·최대 크기와 뷰포트 값으로 유동형 글꼴 크기와 여백에 쓸 반응형 CSS clamp()를 생성하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.
유동형 CSS clamp() 생성기
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
🔒 브라우저에서 생성되며 업로드되지 않습니다.
이 CSS clamp() 생성기의 기능
최소·최대 크기(px), 각 크기가 적용될 뷰포트 너비, 루트 글꼴 크기를 입력하면 유동형 타이포그래피나 여백에 바로 붙여넣을 수 있는 clamp() 값을 만들어 줍니다. 두 브레이크포인트 사이의 기울기를 계산하고, 루트 글꼴 크기를 기준으로 픽셀을 rem으로 변환한 뒤 clamp(minRem, yRem + slopeVw, maxRem) 형태로 출력합니다. 결과값은 뷰포트에 따라 부드럽게 확장되고 지정한 경계에서 고정되며, 미디어 쿼리가 필요 없습니다.
계산 원리
기울기는 (maxPx - minPx) / (maxVw - minVw)이며 뷰포트 너비에 따라 값이 커지도록 vw 단위로 표현됩니다. 절편 항 -minVw * slope + minPx는 이 직선이 최소 뷰포트에서 최소 크기를, 최대 뷰포트에서 최대 크기를 지나도록 고정하는 rem 오프셋입니다. 값은 소수점 넷째 자리까지 반올림하여 정확성을 유지하면서도 CSS가 불필요하게 길어지지 않게 합니다. 최소 뷰포트보다 좁으면 최소 크기로, 최대 뷰포트보다 넓으면 최대 크기로 고정됩니다.
자주 묻는 질문
왜 픽셀을 rem으로 변환하나요?
경계값에 rem을 사용하면 유동형 크기가 사용자의 루트 글꼴 크기에 연동되어 브라우저와 접근성 확대 설정을 존중합니다. 픽셀 입력은 디자인을 손쉽게 기술하기 위한 것일 뿐, 출력은 rem과 vw로 표현됩니다.
그래도 미디어 쿼리가 필요한가요?
아니요. 하나의 clamp() 값이 최소·최대 뷰포트 사이에서 크기를 연속적으로 확장하고 그 범위 밖에서는 경계값으로 고정되므로, 해당 속성에는 보통 브레이크포인트 미디어 쿼리가 필요 없습니다.
입력한 내용이 서버로 업로드되나요?
아니요. 모든 계산은 브라우저에서 JavaScript로 로컬 처리됩니다. 입력한 크기, 뷰포트 너비, 생성된 clamp() 값은 어디에도 전송·저장·업로드되지 않습니다.