분류: 개발 도구
CSS clamp 생성기
미디어 쿼리 없는 유동 글꼴 크기
최소와 최대 크기, 그리고 그에 해당하는 뷰포트 너비를 입력하면 그 사이를 매끄럽게 오가는 clamp() 선언과 흔한 너비에서의 렌더링 크기 표를 얻습니다.
출력
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| 뷰포트 너비 | 렌더링 크기 |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
미리보기
유동적인 글자 크기는 휴대폰에서도 읽히고 데스크톱에서도 비율을 지킵니다.
선언은 페이지에서 만들어집니다. 업로드되는 것은 없습니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
clamp()는 제목을 네 단계로 바꾸던 미디어 쿼리 더미를 대체했습니다. 까다로운 부분은 가운데 항으로, 지정한 두 점을 지나는 직선, 즉 기울기 곱하기 뷰포트에 절편을 더한 값을 vw 값과 rem 값의 합으로 적어야 합니다. 그 계산을 대신 해 줍니다. 두 경계는 rem으로 유지되므로 기본 글자 크기를 키운 사용자에게는 여전히 큰 글자가 전달되고, 표에는 360, 768, 1024, 1280, 1600 픽셀에서 브라우저가 실제로 그리는 크기가 나옵니다. 같은 값은 안쪽 여백이나 간격에도 그대로 쓸 수 있습니다.
사용 방법
- 가장 작은 크기와 그것이 적용될 뷰포트 너비를 입력합니다.
- 가장 큰 크기와 더 이상 커지지 않을 너비를 입력합니다.
- clamp() 선언을 복사하고 미리보기 표를 확인합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 경계를 왜 px가 아니라 rem으로 쓰나요?
- 뷰포트 단위만으로 표현한 크기는 브라우저의 글자 크기 설정을 무시해 접근성 결함이 됩니다. rem 경계는 사용자 각자의 기본값을 따릅니다.
- 여백에도 쓸 수 있나요?
- 네. 값은 그저 길이이므로 padding, margin, gap, width 등 길이를 받는 모든 속성에서 작동합니다.
- 서버로 전송되는 것이 있나요?
- 없습니다. 선언은 입력한 숫자로 페이지에서 계산하며, 그래서 즉시 갱신됩니다.