도구 소개
CSS Clamp 생성기는 최솟값, 뷰포트에 따라 바뀌는 선호 값, 최댓값을 CSS clamp()로 결합하여 적절한 범위 안에서 크기가 변하도록 합니다. 실시간 텍스트 미리보기와 명확한 CSS 출력을 제공합니다.
사용 방법
- 생성 모드를 선택하고 해당 크기와 단위를 입력하세요.
- 최솟값이 최댓값보다 크지 않은지 확인하세요.
- 출력과 텍스트 미리보기를 확인하세요. 유동형 모드에서는 증가하는 뷰포트 범위도 필요합니다.
- CSS를 복사하고 프로젝트에서 다양한 뷰포트 너비로 결과를 확인하세요.
사용 예제
- clamp(16px, 2vw, 32px)는 글꼴 크기를 16~32px로 제한합니다.
- 글꼴 16→32px, 뷰포트 320→1200px이면 유동형 공식은 양 끝에서 각각 16px와 32px를 반환합니다.
- 지정한 뷰포트 범위를 벗어나면 크기는 최솟값 또는 최댓값에 머뭅니다.
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);작동 원리 및 CSS 설명
clamp(min, preferred, max)는 최솟값과 최댓값 사이에서 선호 값을 사용합니다. 유동형 계산은 slope = (maxSize − minSize) / (maxViewport − minViewport), intercept = minSize − slope × minViewport를 사용하며 선호 값은 calc(intercept px + slope × 100vw)입니다.
주요 용도
- 상한과 하한이 있는 반응형 제목을 설정합니다.
- 선형 보간으로 두 글꼴 크기를 연결합니다.
- 글꼴 크기 조절만을 위한 미디어 쿼리를 줄입니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
CSS clamp()란 무엇인가요?
clamp()는 하한과 상한으로 가운데 선호 값을 제한하는 CSS 수학 함수입니다.
세 값은 각각 무엇인가요?
순서대로 최솟값, 선호 값, 최댓값입니다. 이 도구는 크기와 단위를 검증하고 상한과 하한이 뒤바뀐 입력을 거부합니다.
반응형 글꼴에 적합한 이유는 무엇인가요?
선호 값에 vw를 사용하면 뷰포트에 따라 크기가 바뀌며 양쪽 경계가 글자를 지나치게 작거나 커지지 않게 제한합니다.
유동형 모드에 서로 다른 뷰포트 두 개가 필요한 이유는 무엇인가요?
두 뷰포트가 선형 보간 구간을 정합니다. 0으로 나누거나 구간이 뒤집히지 않도록 최대 뷰포트는 최소 뷰포트보다 커야 합니다.
clamp()의 브라우저 지원은 어떤가요?
주요 최신 브라우저에서 널리 지원합니다. 오래된 브라우저도 지원해야 한다면 clamp() 선언 앞에 고정 크기를 대체 값으로 지정할 수 있습니다.