CSS Clamp() 계산기
최소/최대 크기와 두 개의 뷰포트 너비로 실제 유동적인 CSS clamp() 값을 계산합니다. 기울기와 교차점을 단계별로 보여주며, 실시간 크기 미리보기를 제공합니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
CSS clamp(MIN, PREFERRED, MAX)는 하나의 선언으로 미디어 쿼리 여러 개를 대체합니다. 값은 가장 작은 뷰포트 아래에서는 MIN으로 머물고 가장 큰 뷰포트 위에서는 MAX로 머물며 그 사이에서는 부드럽게 변합니다. 어려운 부분은 PREFERRED 항목, 즉 0.833rem + 0.833vw 같은 뷰포트 비례 표현인데, 아무도 수작업으로 도출하고 싶어하지 않습니다. 이 계산기는 최소 크기, 최대 크기, 그리고 각각이 적용되는 뷰포트 너비라는 네 개의 숫자에서 이를 실제로 계산해줍니다.
최종 결과뿐 아니라 모든 중간 계산 결과가 표시됩니다. 기울기(뷰포트 픽셀당 크기가 증가하는 값), 그 기울기를 vw 계수로 환산한 값, 그리고 y축 교차점(vw 항에 더해져 직선이 사용자가 지정한 두 점을 정확히 통과하게 하는 상수)을 확인할 수 있습니다. 튜토리얼에서 clamp() 값을 막연히 복사해 붙여넣는 사람이라면 이제 실제 계산 과정을 직접 확인하고 검증할 수 있습니다.
뷰포트 너비 슬라이더가 실시간 미리보기 박스를 조절하므로 유동적인 크기 변화를 계산된 값으로만 보는 것이 아니라 실제로 볼 수 있습니다. 최소 분기점과 최대 분기점 사이를 드래그하면 실제 브라우저 창 크기를 변경할 때와 똑같이 샘플 텍스트 크기가 조절됩니다. 결과 값과 계산 분석은 키 입력마다 업데이트됩니다. 기본 글꼴 크기 자체도 변환이 필요할 때 px to rem 변환기와 자연스럽게 연동됩니다.
타이포그래피 스케일 모드로 전환하면 한 번에 완전한 유동 타이포그래피 시스템을 구성할 수 있습니다. 기준 크기와 모듈러 비율(1.125 ~ 1.5 사이)을 입력하면 small, base, h4, h3, h2, h1 여섯 개의 크기를 각각 완만한 모바일 진행과 전체 데스크톱 비율 사이에서 자체 clamp() 값으로 계산해주며, CSS 사용자 지정 속성 블록으로 복사할 수 있게 줍니다.