📐
clamp 계산기
반응형 폰트 크기를 위한 CSS clamp() 함수를 자동 생성하세요
⚙️ 설정
뷰포트 크기
폰트 크기
기준값
px
rem 단위 계산 기준 (기본: 16px)
빠른 프리셋
📊 결과
생성된 clamp() 코드
font-size: clamp(16px, 4vw, 48px);
실시간 미리보기
반응형 폰트 크기 미리보기
현재 뷰포트:
900px
계산된 크기:
48px
계산 공식
clamp() 함수는 세 가지 값을 사용합니다:
- 최소값: 뷰포트가 최소 너비 이하일 때 적용되는 폰트 크기
- 선호값: 뷰포트 크기에 따라 선형적으로 계산되는 값
- 최대값: 뷰포트가 최대 너비 이상일 때 적용되는 폰트 크기
💡 clamp() 함수란?
📐
반응형 타이포그래피
미디어 쿼리 없이 뷰포트 크기에 따라 자동으로 폰트 크기가 조절됩니다.
⚡
성능 최적화
여러 개의 미디어 쿼리 대신 하나의 clamp() 함수로 처리하여 코드가 간결해집니다.
🎯
정확한 제어
최소값과 최대값을 명확히 설정하여 모든 화면 크기에서 가독성을 보장합니다.
🔄
부드러운 전환
뷰포트 크기 변화에 따라 폰트 크기가 선형적으로 부드럽게 조절됩니다.