도구 가이드
화면 크기에 따라 글자 크기를 바꾸려면 예전에는 미디어쿼리로 구간마다 값을 지정해야 했습니다. 그러면 구간 경계에서 글자 크기가 툭 하고 계단처럼 바뀌고, 관리할 코드도 늘어납니다.
CSS의 clamp() 함수는 최솟값·선호값·최댓값 세 가지를 받아 화면 폭에 따라 값이 부드럽게 변하도록 합니다. 작은 화면에서는 최솟값 아래로 내려가지 않고 큰 화면에서는 최댓값 위로 올라가지 않으므로 한 줄로 안전한 반응형이 완성됩니다.
이 도구는 원하는 최소·최대 크기와 뷰포트 범위를 입력하면 그에 맞는 clamp() 코드를 계산해 줍니다.
사용 방법
- 최소 글자 크기와 그때의 화면 폭을 입력합니다.
- 최대 글자 크기와 그때의 화면 폭을 입력합니다.
- 생성된 clamp() 코드를 확인합니다.
- 복사해 CSS의 font-size 등에 사용합니다.
이럴 때 유용해요
- 제목 글자 크기를 화면 폭에 따라 부드럽게 조절할 때
- 미디어쿼리를 줄여 스타일시트를 단순하게 만들 때
- 여백이나 컨테이너 너비를 반응형으로 만들 때
- 디자인 시스템의 타이포그래피 규칙을 정의할 때
사용 팁
- 최솟값이 너무 작으면 모바일에서 읽기 어렵습니다. 본문은 16px 아래로 내려가지 않게 하세요.
- clamp()는 글자 크기 외에 padding, margin, width에도 그대로 쓸 수 있습니다.
- 사용자가 브라우저 확대를 했을 때도 값이 커지도록 뷰포트 단위와 rem을 함께 쓰는 형태가 접근성에 유리합니다.