CSS Clamp 생성기
최소 크기, 최대 크기, 뷰포트 브레이크포인트를 입력하면 두 값 사이를 부드럽게 스케일하는 CSS clamp() 표현식을 즉시 생성합니다.
최소·최대 크기와 두 뷰포트 폭을 입력해 그 사이를 선형으로 변화시키는 CSS clamp() 표현식을 계산합니다.
CSS clamp() 만드는 방법
- 최소 크기와 최대 크기를 px로 입력합니다.
- 최소·최대 뷰포트 폭을 넣고 출력 단위를 px 또는 rem으로 고릅니다.
- 생성된 clamp(min, fluid, max) 표현식을 복사합니다.
계산 방식
두 크기 지점 사이의 선형 기울기를 계산하고 이를 vw 항으로 바꿉니다.
rem 출력에서는 크기와 절편만 root font size로 나누며 vw 기울기 항은 그대로 vw를 사용합니다.
개인정보와 제한
계산은 브라우저 안에서만 수행됩니다. 두 지점 사이가 선형으로 변한다고 가정하며 실제 레이아웃이나 브라우저의 계산 스타일을 검사하지 않습니다.
CSS clamp 자주 묻는 질문
clamp()는 무엇인가요?
최솟값, 유동적인 선호값, 최댓값을 한 식에 지정합니다.
rem으로 출력할 수 있나요?
네. root size를 지정하고 rem을 선택하면 됩니다.
최소 뷰포트가 더 작아야 하나요?
네. 선형 보간을 위해 증가하는 범위가 필요합니다.
최소 크기가 최대 크기보다 커도 되나요?
아니요. 도구가 오류로 처리합니다.
내 CSS 파일을 읽나요?
아니요. 입력한 숫자만 계산합니다.