CSS clamp() 계산기
작은 뷰포트에서의 크기와 큰 뷰포트에서의 크기를 입력하세요. 그 사이를 매끄럽게 이어 주는 clamp()가 나옵니다. 단위가 rem이라 독자의 브라우저 글꼴 크기를 그대로 따릅니다.
뷰포트—
계산된 크기—
다람쥐 헌 쳇바퀴에 타고파
타입 스케일
px 대신 rem을 쓰는 이유
px로 쓴 크기는 독자가 브라우저에서 고른 글꼴 크기를 무시합니다. 같은 선언을 rem으로 쓰면 그 값에 따라 함께 커져서, 기본값을 20px로 바꾼 사람은 고정해 둔 16 대신 더 큰 글씨를 보게 됩니다. 뷰포트 항은 어느 쪽이든 vw로 남습니다 — 그 부분은 화면 너비에 관한 것이지 독자의 설정과는 무관합니다.
자주 묻는 질문
가운데 항은 어떤 역할을 하나요?
입력한 두 점을 지나는 직선입니다. 절편에 vw로 표현한 기울기를 더한 것이죠. 작은 뷰포트보다 좁아지면 최솟값에, 큰 뷰포트보다 넓어지면 최댓값에 고정됩니다.
최댓값이 최솟값보다 작아도 되나요?
됩니다. clamp()도 정상 동작하고요. 다만 화면이 커질수록 크기가 줄어드는데, 그걸 의도하는 경우는 거의 없습니다. 그럴 때는 페이지가 알려 줍니다.
저희 서버로 전송되는 것이 있나요?
아니요. 브라우저 안에서 하는 산수일 뿐이고, 입력한 내용은 페이지를 벗어나지 않습니다.
GO AI 팀이 만들었습니다. 무료 도구 전체