디자인 / 반응형
유동적 타이포그래피와 간격을 위한 CSS clamp() 생성기
최소·최대 크기와 각 크기를 적용할 뷰포트 너비를 입력하면, 두 값 사이를 부드럽게 조정하는 rem 단위 clamp() 표현식과 일반적인 화면 너비별 크기 표를 제공합니다.
유동적 타이포그래피와 간격을 위한 CSS clamp() 생성기: 이 도구는 두 지점을 지나는 직선을 그립니다. 320 px 뷰포트에서 16 px이고 1280 px 뷰포트에서 24 px인 경우, 너비가 100 px 커질 때마다 크기가 0.8333 px씩 커집니다. 이 직선은 고정된 rem 부분과 vw 부분인 0.8333rem + 0.8333vw로 작성되며, clamp()는 해당 범위를 벗어날 때도 1rem과 1.5rem 사이로 값을 제한합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| 뷰포트 너비 | 크기 |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
clamp()의 중간값은 입력한 두 점을 잇는 직선입니다. 뷰포트 너비의 일정 비율에 고정된 rem 값을 더하므로 두 너비 사이에서 크기가 매끄럽게 조정되고, 그 범위를 벗어나면 한계값에서 멈춥니다. 고정 부분에 rem을 사용하면 독자의 글꼴 크기 설정에 맞춰 크기가 반응합니다. 글꼴 크기, 패딩, 간격, 여백 등 모든 길이에 사용할 수 있습니다.
계산 예시
375 px 휴대전화에서 32 px이고 1440 px 데스크톱에서 48 px인 제목의 경우, 기울기는 16 ÷ 1065 = 1.5023 px per 100 px이며 식은 clamp(2rem, 1.6479rem + 1.5023vw, 3rem)입니다. 800 px 태블릿에서 제목은 38.38 px입니다.
접근성
WCAG는 텍스트를 200%까지 확대할 수 있어야 한다고 요구합니다. 유동적인 크기의 일부는 뷰포트에 따라 달라지므로, 기울기가 지나치게 가파르면 확대해도 텍스트가 훨씬 커지지 않을 수 있습니다. 가장 큰 크기를 가장 작은 크기의 약 2.5배 이하로 유지하고, 일관된 단계를 선택하려면 글자 크기 스케일 생성기를 사용하십시오.
사용 방법
- 최소 크기와 최대 크기를 px 단위로 입력합니다.
- 각 크기를 적용할 뷰포트 너비를 입력합니다.
- clamp() 값을 복사하고 표에서 크기를 확인합니다.
개인정보 보호 및 제한사항
브라우저에서 계산됩니다. 본 도구는 데이터를 업로드하지 않습니다.
관련 도구
자주 묻는 질문
vw만 사용하면 안 되나요?
vw만 사용하면 독자의 글꼴 크기 설정을 반영하지 못하며, 휴대전화에서는 너무 작아지거나 넓은 화면에서는 너무 커질 수 있습니다. rem 부분과 clamp()의 제한값이 두 문제를 해결합니다.
clamp()는 모든 환경에서 작동하나요?
예. 현재 사용되는 모든 브라우저는 2020년부터 clamp()를 지원합니다.
더 넓은 화면에서 크기가 작아질 수도 있나요?
예. 최소 너비의 크기를 더 크게 입력하면 표현식이 대신 vw 부분을 뺍니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요