유동 크기 clamp 계산
Fluid Size Calculator
두 화면 너비 사이에서 크기가 매끄럽게 변하는 clamp() 식을 계산합니다.
두 뷰포트 너비 사이에서 크기가 매끄럽게 변하는 `clamp()`를 만듭니다. 유동 타이포그래피 식이고, 계산은 대신 해 줍니다. 양 끝을 `rem`으로 두는데, 결과가 접근성을 지키는지가 거기서 갈립니다.
기준점
결과 식
기울기
0.833vw
절편
0.833rem
범위
1.000–1.500rem
rem으로 씁니다. 취향의 문제가 아닙니다. px로 만든 clamp는 읽는 사람이 브라우저에서 정한 글자 크기를 완전히 무시합니다. WCAG 1.4.4 위반이고, 기본값을 24px로 바꿔 둔 사람이 아닌 작성자는 평생 겪지 않는 문제입니다. vw 계수는 뷰포트에 대한 비율로 남기 때문에, 위에서 루트 크기를 바꾸면 양 끝만 움직이고 기울기는 그대로입니다.실제로 계산되는 값
| 뷰포트 | 크기 | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(고정됨) | |
| 1920px | 24px(고정됨) |
알아 둘 것
- · 위쪽 기준점을 넘으면 크기가 고정되어, 창을 더 넓혀도 값이 바뀌지 않습니다. 양쪽 기준점이 rem이라 읽는 사람이 정한 글자 크기는 그대로 따라갑니다. 같은 식을 px로 쓰면 그것마저 따라가지 않습니다.
이런 값을 한 벌로 만드는 중이라면, 타입 스케일 생성기가 clamp 사이에 넣을 단계 크기를 만들어 줍니다.
사용 방법
네 기준점을 정합니다
가장 좁은 뷰포트에서의 크기, 가장 넓은 뷰포트에서의 크기, 그리고 그 두 값이 적용되는 뷰포트 너비입니다. 나머지는 여기서 유도됩니다.
계산 결과 표를 확인합니다
실제로 흔한 뷰포트 너비들에서 이 식이 어떤 값이 되는지 보여 주고, 기울기가 아니라 clamp가 잡고 있는 구간에 표시를 붙입니다.
선언을 복사합니다
`font-size: clamp(...)` 한 줄입니다. 붙여넣기만 하지 않고 이해하고 싶을 때를 위해 기울기와 절편도 함께 보여 줍니다.
자주 묻는 질문
왜 `px`이 아니라 `rem`인가요?
`px`으로 만든 clamp는 읽는 사람이 브라우저에서 정한 글자 크기를 완전히 무시하기 때문입니다. 필요해서 기본값을 24px로 바꿔 둔 사람에게도 16px이 그대로 갑니다. WCAG 1.4.4 위반이고, 작성자는 겪지 않는 종류의 실패입니다.
뷰포트 양 끝을 브레이크포인트로 잡아야 하나요?
꼭 그럴 필요는 없습니다. 그 사이는 clamp가 알아서 처리하므로, 쓸모 있는 양 끝은 지원하는 가장 좁은 휴대폰과 그 이상에서는 글자가 더 커지지 않았으면 하는 너비입니다. 가장 큰 브레이크포인트라기보다 보통 1200–1400px쯤입니다.
확대는 여전히 되나요?
페이지 확대는 됩니다. 뷰포트 너비가 바뀌고 clamp가 따라갑니다. `rem` 기준점이 지켜 주는 것은 글자만 키우는 확대입니다. `vw` 부분은 거기 반응하지 않아서, `rem` 성분이 없으면 글자가 고정돼 버립니다. 식이 둘을 섞는 이유가 그것입니다.
패딩이나 간격에도 쓸 수 있나요?
됩니다. 이 식은 단위 계산일 뿐이고 어느 속성에 붙는지는 상관하지 않습니다. 출력이 `font-size`로 되어 있는 건 그게 흔한 경우이기 때문입니다. 속성만 바꾸고 값은 그대로 쓰면 됩니다.
이 도구로 이어지는 것
모서리 둥글기 생성
Border Radius Generator
모서리마다 값을 따로 주고 두 값 문법의 곡선 형태까지 만들어 CSS로 내보냅니다.
CSS 그리드 생성
CSS Grid Builder
이름이 붙은 영역으로 그리드를 시각적으로 배치하고 grid-template CSS를 만듭니다.
플렉스박스 실습장
Flexbox Playground
예제에서 flex 속성을 바꿔 보며 CSS와 각 속성이 무엇을 바꿨는지 확인합니다.
화면 비율 계산기
Aspect Ratio Calculator
목표 비율에 맞는 나머지 한 변을 계산하고 해당하는 표준 규격을 알려 줍니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
CSS 정렬·압축
CSS Beautifier & Minifier
선언 순서를 바꾸지 않고 CSS를 정렬하거나 압축하며, 토큰 구성을 그대로 보존합니다.
CSS 그리드 생성
CSS Grid Builder
이름이 붙은 영역으로 그리드를 시각적으로 배치하고 grid-template CSS를 만듭니다.
타이포 스케일 생성
Type Scale Generator
기준 크기와 비율로 글자·간격의 모듈러 스케일을 만들어 CSS나 토큰으로 내보냅니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
명도대비 검사
Contrast Checker
전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.