KOENJP

반응형 clamp() 계산기

FLUID · CLAMP()

최소·최대 화면 폭과 글자 크기를 넣으면 CSS clamp() 값을 만들어요. 타입 스케일을 변수로 한 번에 뽑고, 폭을 끌어 크기 변화를 바로 확인해요.

RESULT

미리보기

오른쪽 손잡이를 끌거나 폭을 입력해 보세요.
px

화면 폭에 따라 부드럽게 커지는 글자

HOW TO

사용 방법

  1. 최소·최대 뷰포트 폭과 그 폭에서 원하는 글자 크기를 px나 rem으로 넣어요.
  2. 결과 단위(rem·px)와 가변 단위(vw·cqi)를 고르면 clamp() 값이 바로 바뀌어요.
  3. 타입 스케일 탭에서는 본문 크기와 비율로 h1~small 단계를 CSS 변수로 한 번에 만들어요.
  4. 미리보기 손잡이를 끌거나 폭을 입력해 크기 변화를 확인하고 복사 버튼으로 코드를 가져가요.
PAIRS WELL WITH

같이 쓰기 좋은 도구

FAQ

자주 묻는 질문

clamp() 가운데 값은 어떻게 계산돼요?

두 지점(최소 폭·최소 크기, 최대 폭·최대 크기)을 잇는 직선을 구해요. 기울기 × 100이 vw 값이 되고, 최소 크기 − 기울기 × 최소 폭이 rem(또는 px) 값이 돼요. 앞뒤 값은 그 범위를 벗어나지 않게 막아 줘요.

루트 폰트 크기를 10px(62.5%)로 쓰면 어떻게 해요?

출력 설정의 루트 폰트 크기를 10으로 바꾸면 rem 값이 그 기준으로 다시 계산돼요. 브라우저 기본값을 바꾸지 않았다면 16 그대로 두면 돼요.

vw 대신 cqi는 언제 써요?

카드·사이드바처럼 화면 폭이 아니라 감싸는 요소의 폭에 맞춰 글자를 키우고 싶을 때 써요. 부모 요소에 container-type: inline-size를 지정해야 하고, 컨테이너 쿼리를 지원하는 최신 브라우저에서 동작해요.

글자를 너무 크게 키우면 문제가 있나요?

최대 크기가 최소 크기의 2.5배를 넘으면 브라우저를 200% 확대해도 글자가 충분히 커지지 않아 접근성 기준(WCAG 1.4.4)을 못 맞출 수 있어요. 이럴 때 화면에 안내가 나와요.