🔠 CSS clamp() 계산기

사용법

1. 최소 크기·최대 크기에 글자(또는 여백) 크기를 px로 넣어요. 예를 들어 본문이 작은 화면에서 16px, 큰 화면에서 24px이면 16과 24예요.
2. 최소·최대 화면 폭에 크기가 변하기 시작하는 폭과 멈추는 폭을 넣어요. 보통 휴대폰 폭 320~375px부터 데스크톱 폭 1280~1440px을 많이 써요.
3. 단위는 rem을 권장해요. 사용자가 브라우저 글꼴 크기를 키웠을 때 같이 커져서 접근성에 유리해요. rem 기준 글자 크기는 보통 16px이에요.
4. 위 큰 칸의 clamp(…) 코드를 copy 해서 font-size, padding, margin, gap 등에 붙여 넣어요. 아래 표에서 폭별 실제 크기를 확인하세요.

clamp()는 무엇인가요

clamp(최소값, 선호값, 최대값)은 선호값을 계산하되 그 결과가 최소값보다 작으면 최소값으로, 최대값보다 크면 최대값으로 고정하는 CSS 함수예요. 미디어 쿼리 없이도 글자가 화면 폭에 맞춰 부드럽게 커지는 유동 타이포그래피(fluid typography)를 한 줄로 만들 수 있어요. 선호값에 vw(화면 폭의 1%)를 쓰면 폭에 따라 값이 변하고, 최소·최대가 범위를 잡아 줘요.

선호값 계산 공식

화면 폭 x(px)에서 크기가 직선으로 변한다고 보면 크기 = 기울기 × x + 절편이에요.

검산해 보면 화면 폭이 320px일 때 13.3333 + 0.008333 × 320 = 16px, 1280px일 때 13.3333 + 0.008333 × 1280 = 24px, 중간인 800px일 때는 20px이에요. 320px보다 좁거나 1280px보다 넓으면 clamp가 16px와 24px로 고정해요. 이 도구의 표가 이 값들을 그대로 보여 줘요.

왜 vw만 쓰지 않고 rem을 같이 더하나요

font-size: 2vw처럼 vw만 쓰면 사용자가 브라우저에서 글꼴 크기를 키우거나 화면을 확대해도 글자가 커지지 않을 수 있어서 접근성에 불리해요. 선호값을 rem + vw 조합으로 만들면 rem 부분이 사용자 설정에 반응해요. 그래서 이 도구는 절편을 rem으로, 기울기를 vw로 내보내요. 다만 vw 부분은 여전히 화면 폭에만 반응하므로, 최소·최대 차이를 너무 크게 잡지 말고 브라우저 확대(200%)에서 글자가 충분히 커지는지 직접 확인하세요.

자주 쓰는 설정 예시

표의 코드는 이 도구와 같은 식으로 계산한 값이에요. 본문처럼 변화 폭이 작은 요소는 clamp 없이 고정값으로 두어도 충분하고, 제목처럼 화면에 따라 인상이 크게 달라지는 요소에 쓰면 효과가 커요.

clamp() 쓸 때 주의할 점

• 줄 길이 점검 — 글자가 커져도 한 줄에 들어가는 글자 수가 너무 많아지지 않게 본문 영역의 max-width를 함께 정해요.
• 줄바꿈 — 제목이 커지면 줄이 바뀌어 레이아웃이 달라질 수 있으니 가장 좁은 폭과 가장 넓은 폭에서 모두 확인해요.
• 값 순서 — 최소값이 최대값보다 크면 의도와 다르게 동작해요. 이 도구는 두 값 중 작은 쪽을 자동으로 최소로 써서 코드 순서를 맞춰요.
• 한 줄 쓰기 — clamp() 안에서는 연산자 주변 공백이 필요해요. +, -는 앞뒤 공백을 두고 써야 올바른 식이에요(이 도구의 출력이 그 형식이에요).
• 지원 범위 — clamp()는 현재 주요 브라우저에서 널리 지원돼요. 오래된 브라우저를 고려한다면 바로 앞 줄에 고정값 font-size: 1rem;을 먼저 쓰세요. 지원하는 곳에서는 뒤 선언이 덮어써요.

단위 변환이 필요하면 px·rem 변환기, 글자색과 배경색의 대비는 색상 대비 검사기에서 확인할 수 있어요. clamp() 문법은 MDN의 CSS clamp() 문서에 정리돼 있어요.

자주 묻는 질문

이 도구와 함께 보면 좋은 글

관련 도구