CSS clamp() 계산기

사용 방법

1. 유동형으로 만들 CSS 속성을 선택합니다.
2. 최소 및 최대 뷰포트 너비를 픽셀로 입력합니다.
3. 각 뷰포트 끝점에서 사용할 속성 값을 입력합니다.
4. rem 또는 px 출력을 선택합니다. rem을 사용한다면 변환 기준이 되는 루트 글꼴 크기도 설정하세요.
5. 곡선과 샘플 값을 확인하고 미리보기 슬라이더를 움직인 다음, 전체 선언이나 clamp() 값만 복사합니다.

기본값인 320px1440px, 16px32px에서는 다음 결과가 생성됩니다.

font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);

생성된 표현식의 의미

clamp(최솟값, 선호 값, 최댓값)은 선호 값을 사용하되 두 경계를 벗어나지 않게 합니다. 이 도구는 두 개의 “뷰포트 너비—속성 값” 점을 지나는 직선을 계산합니다.

기울기 = (끝 값 - 시작 값) / (최대 뷰포트 - 최소 뷰포트)
절편 = 시작 값 - 기울기 × 최소 뷰포트
선호 값 = 절편 + (기울기 × 100)vw

시작 뷰포트보다 좁으면 한쪽 끝점 값을 유지하고, 두 끝점 사이에서는 선형으로 변하며, 종료 뷰포트보다 넓으면 반대쪽 끝점 값을 유지합니다.

유동형 타이포그래피와 간격

브레이크포인트에서 값이 갑자기 바뀌는 것을 피하고 싶을 때 유용합니다. 제목 글꼴 크기, 섹션 패딩, 그리드 간격, 콘텐츠 너비가 대표적입니다. 1px 테두리처럼 엄격한 고정 치수가 필요한 값에는 대개 필요하지 않습니다.

글꼴 크기의 경계를 rem으로 설정하면 루트 글꼴 크기와의 관계를 유지할 수 있습니다. 그래도 완성된 레이아웃은 브라우저 200% 확대, 좁은 화면, 긴 번역 문구에서 테스트하세요. 수식이 정확해도 실제 컴포넌트에서 넘칠 수 있습니다.

역방향 범위와 고정 값

끝 값을 시작 값보다 작게 입력할 수도 있습니다. 이 경우 선호 표현식에 음의 vw 항이 들어가 뷰포트가 넓어질수록 값이 줄어듭니다. 도구는 clamp() 경계만 올바른 순서로 정렬하고 직선의 방향은 유지합니다.

두 끝점 값이 같으면 유동 계산이 필요하지 않으므로 1rem 같은 고정 길이를 출력합니다. 음수는 의미가 있을 수 있는 margin과 사용자 정의 속성에서만 허용합니다.

개인정보 보호

모든 처리는 클라이언트에서 실행됩니다. ZeroTool은 뷰포트 너비, 속성 값, 생성된 CSS를 업로드하지 않습니다. 폼 상태는 브라우저 로컬 저장소에만 보관되며 초기화로 삭제할 수 있습니다.