반응형 CSS clamp 생성기
두 화면 너비에서의 글꼴 크기를 기준으로 유동 크기 CSS를 생성합니다.
입력
예시값이 입력되어 있습니다. 바로 확인하거나 값을 바꿔 보세요.
입력은 브라우저에서 처리합니다. 새로고침하면 예시값으로 돌아갑니다.
결과
입력된 예시값으로 바로 결과를 확인하거나 값을 바꿔 보세요.
px 기준 선형 보간입니다. 사용자의 확대·글꼴 설정을 고려해 실제 페이지에서 검수하세요.
결과 공유
도구 링크와 결과 텍스트를 함께 공유합니다. 결과는 URL에 넣지 않습니다. 아래 내용을 확인하고 공유하세요.
계산·변환 기준
화면 너비에 따라 변하는 글꼴 크기 CSS 만들기.
선형 기울기와 절편을 구해 clamp(min, intercept + slope×vw, max)
입력 예시
360px에서 16px, 1280px에서 24px
너비 360~1200px에서 글꼴 16~24px를 원하면 두 점 사이를 선형 보간합니다. 범위 아래에서는 16px, 위에서는 24px로 제한됩니다.
사용 방법
- 입력된 예시값을 사용하거나 최소 화면 너비 px, 최대 화면 너비 px, 최소 글꼴 크기 px, 최대 글꼴 크기 px 항목을 바꾸세요.
- 결과 확인하기를 누르고 아래 결과를 확인하세요.
- 필요하면 결과 복사로 가져갈 수 있습니다.
자주 묻는 질문
clamp를 쓰면 확대 접근성이 자동으로 보장되나요?
아닙니다. 출력은 px와 vw를 결합하므로 사용자 글꼴 설정과 확대 동작을 실제 페이지에서 확인해야 합니다. 최소·최대 글꼴이 같으면 고정 크기처럼 동작합니다.
계산 기준과 참고 자료
- W3C — CSS Values and Units
rem·px·vw 단위와 clamp() 함수