CSS clamp() 계산기

clamp(하한, 선호값, 상한)은 선호값을 우선 쓰되 하한보다 작아지거나 상한보다 커지지 않게 잘라냅니다. 이 계산기는 선호값을 "px + vw" 형태의 1차함수로 만들어, 뷰포트가 두 지점 사이일 때는 값이 부드럽게 선형 보간되고 그 밖에서는 하한·상한에 고정되게 합니다.

vw만 쓰면 뷰포트 0일 때 값도 0이 되어 원하는 두 지점을 동시에 지나는 직선을 만들 수 없습니다. px(절편)를 더해야 두 좌표(최소너비→최소값, 최대너비→최대값)를 정확히 지나는 1차함수가 됩니다. 미디어 쿼리 여러 개를 쓰는 대신 이 한 줄로 모든 뷰포트에서 부드럽게 변합니다.

입력한 기준 폰트 크기(기본 16px)로 모든 px 값을 나눠 rem으로 바꿉니다. vw 계수는 상대 단위끼리의 비율이라 px든 rem이든 값이 같습니다. 사이트의 html 요소에 font-size를 따로 지정했다면 그 값을 기준 폰트 크기에 입력하세요.