이렇게 사용하세요
뷰포트에 따라 유동적으로 변하는 CSS 크기를 계산합니다.
입력부터 결과까지
- CSS Clamp 계산기 작업 화면을 열고 예시를 불러옵니다.
- 설명을 읽고 형식과 옵션을 선택한 뒤, 자신의 입력으로 바꿉니다. 민감한 정보 대신 테스트 데이터로 먼저 확인하세요.
- 실행 후 결과와 상태 메시지를 확인합니다. 오류가 있으면 입력 형식을 수정하고 다시 실행하세요.
- 원하는 결과를 복사하거나 파일로 저장합니다. 생성·변환 결과는 자동으로 보관되지 않습니다.
CSS Clamp 계산기
뷰포트에 따라 유동적으로 변하는 CSS 크기를 계산합니다. 두 뷰포트 지점 사이를 선형 보간합니다. px 기준 수식이므로 사용 환경의 글자 확대도 확인하세요.
예시 입력
minSize: 16 maxSize: 32 minWidth: 320 maxWidth: 1280
결과 해석
font-size: clamp(16px, 10.666667px + 1.666667vw, 32px);
알아두면 좋은 점
형식과 의미
두 뷰포트 지점 사이를 선형 보간합니다. px 기준 수식이므로 사용 환경의 글자 확대도 확인하세요.
지원 범위와 제한
텍스트 1MB
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.
데이터는 어떻게 처리되나요?
도구 처리는 브라우저에서 수행합니다. DNS 조회는 명시한 외부 제공자에게 조회 도메인을 보냅니다. 홈·가이드·작업 화면에는 설정에 따라 광고가 표시될 수 있습니다.
도구 열기