최소·최대 화면 폭과 크기를 넣으면 반응형 CSS clamp() 수식을 바로 만들고 복사할 수 있습니다.
💡 CSS clamp() 결과
기울기 (slope): 0
절편 (y절편): 0
📊 적용 안내
* clamp(최소, 선호값, 최대)에서 선호값은 Nvw ± 절편 형태입니다. 화면이 커질수록 선호값이 커지고, 최소·최대 밖으로 나가지 않습니다. 미디어쿼리로 끊지 않아도 크기가 부드럽게 변합니다.
💡 CSS clamp로 반응형 글자·여백 만들기
예전에는 화면마다 @media로 글자 크기를 여러 번 나눠 적었습니다. 코드가 늘고, 창 크기를 바꿀 때 값이 툭 바뀌기도 합니다. CSS clamp는 최소·선호·최대를 한 줄에 넣어, 화면 폭에 따라 크기가 서서히 변하게 합니다. 이 도구는 최소·최대 화면 폭과 목표 크기만 넣으면 clamp() 수식을 바로 만들어 줍니다.
단위는 px 또는 rem을 고를 수 있습니다. rem을 고르면 루트 폰트(보통 16px)를 기준으로 절편을 rem으로 돌려 줍니다. CSS clamp 한 줄이면 미디어쿼리 여러 개를 줄이는 데 도움이 됩니다.
📊 구간별로 어디에 쓰면 좋은가
디바이스마다 자주 쓰는 화면 폭과 적용 예입니다. 프로젝트 브레이크포인트에 맞게 최소·최대 폭을 바꿔 넣으면 됩니다.
| 구간 | 화면 폭 예 (px) | 이런 요소 | 설계 팁 |
|---|---|---|---|
| 모바일 | 320 ~ 565 | 제목, 본문, 카드 패딩 | 최소 크기를 너무 작게 두지 않기 |
| 태블릿 | 768 ~ 1024 | 섹션 제목, 그리드 여백 | 중간 구간에서 vw로 서서히 키우기 |
| 데스크톱 | 1440 ~ 1920+ | 히어로 문구, 큰 배너 | 최대 크기로 무한 확대를 막기 |
📌 clamp()가 하는 일
clamp(최소, 선호, 최대)는 선호값이 최소보다 작으면 최소를, 최대보다 크면 최대를 씁니다. 그 사이에서는 선호값(보통 Nvw + 절편)이 화면 폭에 비례해 변합니다. 기울기(slope)는 (최대크기−최소크기)÷(최대폭−최소폭)이고, 절편은 그 직선이 y축과 만나는 값입니다. 이 생성기가 그 숫자를 넣어 수식을 조립합니다.
「최소 크기 = 최대의 n%」칸에 숫자를 넣으면 최소 크기를 최대 기준으로 자동 채웁니다. 비워 두면 최소·최대를 직접 입력합니다.
📐 rem과 접근성
글자 크기는 rem으로 두면 사용자가 브라우저 기본 글자를 키울 때 함께 커져 접근성에 유리한 경우가 많습니다. 이 페이지에서 rem을 고르면 루트 px로 내부 계산한 뒤, 결과 수식은 rem으로 보여 줍니다. 루트가 16이 아닌 프로젝트는 루트 입력값을 맞춰 주세요.
CSS clamp는 font-size뿐 아니라 padding·gap·max-width에도 쓸 수 있습니다. 다만 줄간격(line-height)까지 전부 vw로 따라 변하게 하면 읽기 불편해질 수 있으니, 본문은 변화를 작게 두고 제목·히어로만 키우는 편이 무난합니다. 생성한 한 줄을 스타일시트에 붙인 뒤, 320px부터 1920px까지 폭을 밀어 보며 최소·최대에서 값이 고정되는지 확인하면 됩니다.
🚨 이용 시 주의사항
모던 브라우저에서 clamp()는 잘 동작합니다. 다만 vw는 스크롤바를 포함한 뷰포트 기준으로 잡히는 경우가 있어, 컨테이너 max-width·여백에 따라 체감 크기가 조금 다를 수 있습니다. 적용 후 개발자 도구 반응형 모드로 가로폭을 밀어 확인해 보세요. 최소가 최대보다 크면 수식을 만들지 않습니다. Safari 구형 등에서 지원이 걱정되면 caniuse로 clamp 지원을 한 번 확인하세요.
