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