CSS Clamp 생성기
최소/최대 크기와 뷰포트 너비로 유동적인 CSS clamp() 값을 생성합니다.
출력
최소 및 최대 크기와 적용될 뷰포트 범위를 입력하면 유동적이고 반응형인 타이포그래피나 간격을 위한 바로 사용 가능한 CSS clamp() 표현식을 얻습니다.
사용 방법
- 최소 및 최대 크기를 픽셀로 입력하세요.
- 크기가 적용될 최소 및 최대 뷰포트 너비를 입력하세요.
- 생성된 clamp() 선언을 복사하세요. 필요하면 CSS 속성 이름을 바꿀 수 있습니다.
자주 묻는 질문
- 유동 값은 어떻게 계산되나요?
- 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이의 선형 기울기를 계산하며, clamp() 안에서 rem + vw 공식으로 표현됩니다.
- 출력이 rem과 vw를 쓰는 이유는 무엇인가요?
- rem은 기본 크기를 사용자의 글꼴 설정에 상대적으로 유지하고, vw는 뷰포트 너비에 따라 부드럽게 크기가 조절되게 합니다.
- 최대 뷰포트가 최소 뷰포트보다 작으면 어떻게 되나요?
- 최대 뷰포트 너비를 최소보다 크게 만들라는 유효성 검사 메시지가 표시됩니다.