CSS clamp() 계산기
작은 화면에서 큰 화면까지 글자 크기가 부드럽게 커지는 clamp() 값을 만듭니다.
clamp()가 하는 일
clamp(최소, 가변값, 최대)는 가변값을 쓰되 최소·최대 밖으로는 못 나가게 합니다. 가변값을 rem + vw로 두면 화면 폭에 따라 글자가 선형으로 커지고, 양 끝에서 멈춥니다. 미디어쿼리 여러 개 대신 한 줄로 끝납니다.
공식
두 점 (최소뷰포트, 최소크기)와 (최대뷰포트, 최대크기)를 잇는 직선입니다. 기울기 = (최대크기 − 최소크기) ÷ (최대뷰포트 − 최소뷰포트). 그 기울기에 100을 곱한 값이 vw 계수, y절편이 앞의 고정값입니다.
px 대신 rem을 쓰는 이유
rem은 사용자가 브라우저 기본 글자 크기를 키우면 함께 커집니다. px로 고정하면 그 설정을 무시하게 되어 접근성에서 감점입니다. 특별한 이유가 없으면 rem을 쓰세요.
상황별 요령
반응형 폰트 크기 코드 생성
최소·최대 글꼴 크기(px)와 뷰포트 너비를 입력하면 rem과 vw를 결합한 clamp() 코드가 즉시 생성됩니다. 복사 버튼을 눌러 완성된 CSS 한 줄을 스타일시트에 바로 붙여넣을 수 있습니다.
반응형 여백에 clamp() 적용하기
최소 여백과 최대 여백 값을 입력하면 화면 폭에 따라 끊김 없이 변하는 패딩·마진용 clamp() 코드를 얻을 수 있습니다. 중첩된 미디어 쿼리 분기점을 하나의 선언으로 대체하여 CSS 유지보수가 간결해집니다.
제목 계층 일괄 clamp() 생성
H1부터 본문까지 각 단계의 모바일·데스크톱 폰트 크기를 넣으면 일관된 비율로 축소·확대되는 코드를 얻을 수 있습니다. 산출된 clamp 값을 CSS 커스텀 속성으로 등록해두면 사이트 전체 타이포그래피를 통일감 있게 관리됩니다.
견본 값으로 직접 해 본 결과
견본 값을 이 도구에 실제로 넣어 확인한 화면과 숫자입니다(2026-10-06, 맥의 크롬 계열 브라우저). 넣는 값과 기기에 따라 결과는 달라질 수 있습니다.
기본값(최소 1 rem, 최대 2.5 rem, 뷰포트 360~1,280 px)으로 계산하면 font-size: clamp(1rem, 0.413rem + 2.6087vw, 2.5rem)이 나옵니다. 뷰포트 360 px 이하에서 최소값, 1,280 px 이상에서 최대값에 고정됩니다.
768 px 태블릿에서는 26.6 px, 1,280 px 노트북에서는 40 px로 표시됩니다. 복사 버튼으로 CSS에 바로 붙여 넣을 수 있고, rem 단위이므로 브라우저 글자 크기를 키워도 함께 커집니다.
자주 묻는 질문
vw만 쓰면 안 되나요
vw만 쓰면 아주 좁은 화면에서 글자가 너무 작아지고 넓은 화면에서 너무 커집니다. 그래서 최소·최대를 잠그는 clamp가 필요합니다.
여백(padding)에도 쓸 수 있나요
네. 같은 계산이 padding, gap, margin에도 그대로 됩니다.
브라우저 지원은
2020년 이후 모든 주요 브라우저가 지원합니다. IE는 안 되지만 이제 대상이 아닙니다.
반응형 폰트 크기를 만들기 위해 어떤 값들을 입력해야 하나요?
최소·최대 글자 크기와 이를 적용할 최소·최대 뷰포트 너비를 입력하면 선형 보간 clamp() 수식이 계산됩니다.
생성된 CSS 코드를 바로 복사해서 스타일에 붙여넣을 수 있나요?
네, 계산된 clamp(rem + vw) 속성값 바로 옆의 복사 버튼을 눌러 클립보드에 쉽게 복사할 수 있습니다.
계산된 clamp() 함수에는 어떤 단위들이 조합되어 출력되나요?
최소·최대 한계값과 함께 뷰포트에 유동적으로 반응하는 rem과 vw 단위의 조합 코드로 출력됩니다.
모바일 브라우저에서도 clamp() 계산 코드를 생성하고 복사할 수 있나요?
네, 모바일 기기에서도 화면 크기와 폰트 값을 자유롭게 입력하고 생성된 코드를 복사할 수 있습니다.