CSS clamp() 계산기 (유체 타이포그래피)

사용법

1. 프리셋(Body·H1 등)을 고르거나 직접 최소/최대 값과 뷰포트 범위 입력.
2. rem 또는 px 선택(접근성 위해 rem 권장).
3. 한 줄 clamp 식을 CSS에 복사.

자주 묻는 질문

왜 미디어 쿼리 대신 clamp()?

두 브레이크포인트 사이를 선형으로 스케일 — 점프 없음, 각 브레이크포인트마다 값 관리 불필요. 같은 효과를 CSS 줄 수 더 적게.

왜 px 대신 rem?

사용자가 브라우저에서 기본 폰트 사이즈를 바꿀 수 있는데(예: 접근성), rem은 이를 존중하고 px는 무시.

중간의 slope는 뭐죠?

뷰포트 `1vw` 증가당 값이 얼마나 커지는지. intercept와 합쳐 (minVw, minVal)·(maxVw, maxVal)을 지나는 1차 함수.

브라우저 지원?

`clamp()`는 2020년 이후 모든 브라우저 — Safari 13.1·Chrome 79·Firefox 75. 2026년 어디서나 안전.

관련 도구