CSS clamp 생성기

언제 사용하나요?

모바일과 데스크탑 사이에서 폰트 크기나 여백이 자연스럽게 변하는 유동 타이포그래피를 구현할 때 사용합니다. clamp() 공식을 직접 계산하지 않고 값만 입력하면 자동으로 생성됩니다.

사용 방법

• 최솟값(모바일 크기)과 최댓값(데스크탑 크기)을 입력합니다.
• 최솟값이 적용될 뷰포트 너비와 최댓값이 적용될 뷰포트 너비를 입력합니다.
• 생성된 clamp() 표현식을 복사합니다.

입력값 안내

모바일 환경에서 적용할 최소 폰트 크기, 데스크탑에서 적용할 최대 폰트 크기, 그리고 이 크기들이 반응할 뷰포트 너비 구간(최소~최대)을 입력합니다.

계산·변환 기준

clamp(최솟값, 선호값, 최댓값) 형태로 생성됩니다. 선호값은 두 뷰포트 크기 사이에서 선형 보간된 vw + rem 조합으로 계산됩니다.

사용 예시

• 유동 폰트 크기 생성 - 모바일과 데스크탑 폰트 크기를 입력하면 자동으로 clamp() 값을 생성합니다.
• 반응형 여백 설정 - 화면 크기에 따라 자연스럽게 변하는 padding/margin clamp 값을 만듭니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.

예시

• 모바일 16px(375px), 데스크탑 24px(1440px) → clamp(1rem, 0.7rem + 1.6vw, 1.5rem)
• 카드 여백을 clamp로 지정 → 작은 화면에서도 너무 좁지 않게 자동 조절

주의사항

• 생성된 clamp() 값은 참고용입니다. 최솟값·최댓값·유동 구간을 실제 화면에서 직접 검증하세요.
• CSS clamp()는 IE 및 구형 모바일 브라우저에서 지원하지 않습니다. caniuse.com에서 대상 브라우저 지원 현황을 확인하세요.

계산·사용 가이드

CSS clamp() 함수

clamp(최솟값, 선호값, 최댓값) 형태로 값의 범위를 제한합니다. 주로 폰트 크기나 여백을 최솟값과 최댓값 사이에서 뷰포트에 따라 자동으로 스케일링할 때 씁니다.

유동 타이포그래피 활용

예를 들어 clamp(1rem, 2.5vw, 2rem)은 뷰포트가 좁으면 1rem, 넓으면 2rem, 중간에서는 2.5vw로 동작합니다. 미디어 쿼리 없이 반응형 크기를 구현할 수 있습니다.

자주 묻는 질문

CSS clamp()란 무엇인가요?

clamp(최솟값, 선호값, 최댓값) 형태로 값을 최소~최대 범위로 제한하는 CSS 함수입니다.

생성된 clamp 값을 바로 복사할 수 있나요?

네, 복사 버튼으로 clamp() 표현식을 클립보드에 복사합니다.

선호값의 vw 계수는 어떻게 정해지나요?

최소·최대 크기와 두 뷰포트 폭을 잇는 1차식으로 계산되어, 화면 폭에 따라 값이 선형으로 변합니다.

clamp()는 어디에 주로 쓰나요?

화면 크기에 따라 글자 크기나 여백이 부드럽게 변하면서도 너무 작거나 커지지 않게 할 때 미디어 쿼리 없이 쓰기 좋습니다.

관련 도구

• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.
• 비밀번호 생성기 - 길이, 문자셋, 개수를 선택해 브라우저에서 안전한 랜덤 비밀번호를 생성합니다.
• JWT 디코더 - JWT의 header와 payload를 디코딩해 JSON과 주요 클레임을 확인합니다.
• 정규식 테스터 - 정규식 패턴을 입력해 텍스트에서 매칭 결과를 실시간으로 확인합니다.
• QR 코드 생성기 - 텍스트나 URL을 QR 코드로 변환하고 이미지로 다운로드합니다.