이렇게 사용하세요
뷰포트에 따라 유동적으로 변하는 CSS 크기를 계산합니다.
알아두면 좋은 점
형식과 의미
두 뷰포트 지점 사이를 선형 보간합니다. px 기준 수식이므로 사용 환경의 글자 확대도 확인하세요.
지원 범위와 제한
텍스트 1MB
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.
CSS Clamp 계산기
뷰포트에 따라 유동적으로 변하는 CSS 크기를 계산합니다.
입력은 이 브라우저에서 처리됩니다.
결과
입력 후 실행하면 결과가 표시됩니다.
사용 예제 코드
개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.
Node.js 22+ · ES module (.mjs)
현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.
필요한 패키지 설치
const minSize = 16, maxSize = 32;
const minWidth = 320, maxWidth = 1280;
if (maxWidth <= minWidth || maxSize < minSize) throw new Error("Invalid range");
const slope = (maxSize - minSize) / (maxWidth - minWidth);
const intercept = minSize - slope * minWidth;
console.log("clamp(" + minSize + "px, " + intercept.toFixed(4) + "px + " +
(slope * 100).toFixed(4) + "vw, " + maxSize + "px)");