CSS clamp 생성기

사용 방법

1. 1

   예제를 고르거나 두 크기를 입력

   본문, 제목, 섹션 여백, 그리드 간격 예제에서 시작하거나 최솟값과 최댓값을 px로 직접 입력하세요. 숫자 라벨을 좌우로 끌면 값이 바뀝니다.

2. 2

   뷰포트 범위 정하기

   작은 뷰포트는 값이 아직 최솟값인 가장 넓은 화면, 큰 뷰포트는 값이 최댓값에 닿는 화면 너비입니다. 휴대폰과 노트북 기준으로는 320과 1280을 많이 씁니다.

3. 3

   속성·단위·루트 크기 선택

   CSS 속성을 고르고 rem 또는 px 출력을 선택합니다. rem은 루트 글꼴 크기(기본 16px)로 환산하므로 프로젝트에서 루트 크기를 바꿨다면 값을 맞춰 주세요.

4. 4

   그래프로 확인

   선은 최솟값에서 평평하게 시작해 범위 안에서 올라가고 최댓값에서 다시 평평해집니다. 마커를 끌거나 방향키로 움직이면 원하는 뷰포트에서의 정확한 크기를 볼 수 있습니다.

5. 5

   필요한 형식으로 복사

   CSS 선언, CSS 변수, Tailwind 클래스 탭을 바꿔 가며 복사하세요. Ctrl 또는 Command와 Enter를 함께 누르면 현재 탭을 마우스 없이 복사합니다.

작동 원리

기울기 = (최대 - 최소) / (큰 뷰포트 - 작은 뷰포트)
절편   = 최소 - 기울기 * 작은 뷰포트
선호값 = 절편(rem) + 기울기 * 100vw
결과   = clamp(최소, 선호값, 최대)

실제 예시

최소 16px, 최대 48px, 뷰포트 320px~1280px, font-size, rem

font-size: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);

최소 16px, 최대 18px, 뷰포트 320px~1280px, font-size, rem

font-size: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);

최소 24px, 최대 96px, 뷰포트 320px~1280px, padding, rem

padding: clamp(1.5rem, 7.5vw, 6rem);

최소 16px, 최대 64px, 뷰포트 400px~1200px, font-size, rem

font-size: clamp(1rem, -0.5rem + 6vw, 4rem);

최소 16px, 최대 48px, 뷰포트 320px~1280px, font-size, px

font-size: clamp(16px, 5.3333px + 3.3333vw, 48px);

자주 하는 실수

• 루트 글꼴 크기를 16px로 가정

  rem 출력은 루트 크기로 나눕니다. CSS에 html { font-size: 62.5% }가 있다면 루트 크기에 10을 넣어야 렌더링 크기가 맞습니다.

• 최댓값이 최솟값보다 크지 않음

  clamp()가 보간하려면 범위가 있어야 합니다. 최댓값이 최솟값 이하이거나 큰 뷰포트가 작은 뷰포트보다 넓지 않으면 값을 만들지 않고 문제를 알려 줍니다.

• 너무 큰 font-size 비율

  16px에서 64px로 가는 제목은 인상적이지만 브라우저 확대 시 200%에 못 미칠 수 있습니다. 글자는 비율을 2.5배 안팎 이하로 유지하세요.

• 글자에 vw만 사용

  font-size: 4vw는 하한·상한이 없고 사용자 확대를 완전히 무시합니다. rem 항과 clamp 경계가 있어야 쓸 만해집니다.

• 뷰포트 바깥 구간을 잊음

  작은 뷰포트 아래에서는 최솟값, 큰 뷰포트 위에서는 최댓값으로 고정됩니다. 디자인이 실제로 바뀌는 너비에 맞춰 뷰포트를 정하세요.

자주 묻는 질문

더 깊이 읽기

• 9분 읽기CSS clamp() 유동 타이포그래피: 공식을 처음부터 유도하기유동 타입은 여러 개의 브레이크포인트를 CSS 한 줄로 대신합니다. 그래프 위의 두 점에서 그 한 줄을 직접 유도해 보면, 생성기가 만든 값도 스스로 검산할 수 있습니다.