CSS Clamp 계산기

CSS Clamp 계산기 사용 방법

최소·최대 크기, 두 화면폭과 루트 폰트 크기를 입력합니다.

결과에서 확인할 내용

두 지점을 선형 보간하는 clamp() 식을 rem과 vw로 생성합니다.

이 도구가 필요한 상황

화면 폭에 따라 부드럽게 변하는 글꼴 크기나 간격을 CSS clamp() 식으로 계산합니다.

실제 사용 예시

작은 화면 360px에서 16px, 큰 화면 1200px에서 24px을 목표로 하면 그 사이에서는 선형으로 증가하고 양 끝 바깥에서는 최솟값과 최댓값으로 제한됩니다.

결과를 정확히 읽는 방법

• 최소·최대 화면 폭이 같으면 기울기를 계산할 수 없습니다.
• 루트 글꼴 크기를 바꾸면 rem 기반 결과가 달라집니다.
• 선형 보간이 모든 디자인에 적합한 것은 아니므로 중간 화면도 확인해야 합니다.

완료 전 확인

최솟값·중간값·최댓값 화면을 실제 브라우저에서 비교하고 제목 줄바꿈을 확인하세요.

사용 전 꼭 확인하세요

최대값과 화면폭은 각각 최소값보다 커야 하며 브라우저에서 경계 폭을 확인하세요.

도구 설명 최종 수정: 2026년 10월 9일