🔠 CSS clamp() 생성기
두 화면폭 사이에서 선형으로 변하는 clamp(min, 선호값, max) 식을 계산합니다. 미리보기에서 창 너비를 바꿔 결과를 바로 확인할 수 있습니다.
사용 방법
- 글자·여백이 최소가 되는 화면폭과 최대가 되는 화면폭을 입력합니다.
- 각 화면폭에서 원하는 크기(px)를 입력합니다.
- 생성된 clamp() 값을 복사해 font-size 등에 붙여넣습니다.
이럴 때 유용해요
- 미디어쿼리 없이 반응형 제목 크기를 만들 때
- 화면폭에 따라 부드럽게 커지는 여백·패딩을 설정할 때
- 디자인 시안의 최소·최대 크기를 코드로 옮길 때
알아두면 좋은 팁
- rem 기준으로 출력되므로 사용자의 브라우저 글자 크기 설정을 존중하는 접근성 친화적인 값이 됩니다.
- 최소 화면폭보다 좁으면 최소 크기로, 최대 화면폭보다 넓으면 최대 크기로 고정됩니다.
- line-height나 gap에도 같은 방식으로 clamp()를 쓸 수 있습니다.
자주 묻는 질문
clamp()는 어떻게 동작하나요?
clamp(최솟값, 선호값, 최댓값)은 선호값을 기본으로 하되 최솟값보다 작아지거나 최댓값보다 커지지 않게 잘라 줍니다. 선호값에 vw 단위를 섞으면 화면폭에 따라 값이 선형으로 변합니다.
px 대신 rem으로 나오는 이유는요?
rem은 사용자가 브라우저에서 키운 기본 글자 크기를 반영하므로 접근성에 유리합니다. root 폰트 크기(보통 16px)를 기준으로 px를 rem으로 환산해 출력합니다.
미디어쿼리를 완전히 대체하나요?
폰트·여백처럼 한 축으로 부드럽게 변하는 값에는 clamp()가 훨씬 간결합니다. 다만 레이아웃 구조 자체가 바뀌는 변화(칸 수 변경 등)는 여전히 미디어쿼리나 그리드가 필요합니다.
