CSS clamp() 생성기

사용 방법

1. 최소·최대 크기를 픽셀 단위로 설정합니다.
2. 스케일을 적용할 뷰포트 너비 범위를 설정합니다.
3. 생성된 clamp() 값을 복사하고 다양한 너비에서 미리보기를 확인합니다.

작동 원리

도구는 두 점, 즉 가장 작은 뷰포트에서의 최솟값과 가장 큰 뷰포트에서의 최댓값 사이에 직선을 그립니다. 그 직선이 rem 오프셋과 vw 기울기로 표현되는 선호 값이 됩니다. clamp()는 값이 최솟값 아래로 내려가거나 최댓값을 초과하지 않도록 고정하여 두 중단점 사이에서 부드럽게 스케일됩니다.

기능

활용 사례

참고 사항

• 최대 뷰포트는 최소 뷰포트보다 커야 합니다.
• 값은 루트 폰트 크기(기본 16px)를 기준으로 rem을 사용합니다.
• 기울기가 너무 가파르면 중간 크기에서 가독성이 떨어질 수 있습니다.
• 모든 기능은 기기에서 실행되며 아무것도 업로드되지 않습니다.

자주 묻는 질문

clamp()는 무엇을 하나요?

clamp(min, 선호, max)는 선호 값이 그 사이에서 스케일되도록 허용하면서 값을 최솟값과 최댓값 사이에 유지합니다. 반응형 크기 지정에 완벽합니다.

vw만 사용하는 것보다 왜 더 좋은가요?

순수 vw는 제한 없이 계속 줄어들거나 커집니다. clamp()는 상한과 하한을 설정하여 매우 작거나 큰 화면에서도 텍스트가 읽기 쉬운 크기를 유지합니다.

px 대신 rem을 사용하는 이유는?

rem은 사용자의 브라우저 폰트 크기 설정을 존중하기 때문에 고정 px보다 접근성이 높습니다.

유동적 타이포그래피는 접근성이 있나요?

합리적인 최솟값을 유지하고 극단적인 기울기를 피하면 접근성을 확보할 수 있습니다. rem을 사용하면 사용자가 텍스트를 확대할 수도 있습니다. 항상 확대 및 큰 텍스트 설정으로 테스트하세요.

데이터가 서버로 전송되나요?

아니요. clamp() 값은 브라우저에서 완전히 생성됩니다.