CSS clamp() 생성기

clamp()의 세 값은 무엇인가요?

clamp(최솟값, 유동값, 최댓값)은 가운데 값을 계산한 뒤 정해 둔 범위 안으로 제한하는 CSS 함수입니다. 이 생성기는 가운데 값에 px와 vw를 함께 사용합니다. 화면 폭이 달라지면 vw 부분이 변하고, 결과가 양쪽 한계를 넘으면 최솟값이나 최댓값을 사용합니다.

• 첫 번째 값은 허용할 가장 작은 크기입니다.
• 두 번째 값은 화면 폭에 따라 계산하는 크기입니다.
• 세 번째 값은 허용할 가장 큰 크기입니다.

크기와 화면 폭을 어떻게 정하나요?

크기 입력칸에는 요소에 적용할 값을, 화면 폭 입력칸에는 그 크기에 도달할 브라우저 뷰포트 너비를 넣습니다. 뷰포트는 웹페이지가 배치되는 화면 영역이며, 여기서 쓰는 px는 기기의 물리 픽셀 수와 구별되는 CSS 픽셀입니다. 작은 화면에서 읽거나 누르기 편한 크기를 먼저 정한 뒤 넓은 화면에서 필요한 크기를 선택하세요. 화면 폭 범위를 좁히면 같은 크기 차이가 더 짧은 구간에서 변합니다.

어떤 CSS 속성을 고르면 되나요?

속성 선택은 만들어진 길이를 어디에 적용할지 정합니다. 같은 16px이라도 글자 크기와 카드 사이 간격은 화면에서 다르게 보이므로 용도에 맞는 미리보기를 확인하세요.

• font-size: 글자 크기와 긴 제목의 줄바꿈을 확인합니다.
• gap: flex·grid 항목 사이의 간격을 확인합니다.
• padding: 요소 안쪽 네 방향에 같은 여백을 적용합니다.
• width: 부모 영역과 비교하며 요소의 가로 넘침을 확인합니다.

px와 vw를 섞은 식은 어떻게 계산하나요?

두 화면 폭과 두 크기를 직선으로 연결해 유동값을 구합니다. 크기 차이를 화면 폭 차이로 나눈 값이 기울기입니다. 1vw는 뷰포트 너비의 1%이므로 CSS의 vw 계수에는 기울기의 100배를 사용합니다. 이 도구는 계산한 px 절편과 vw 항을 calc()로 묶어 clamp() 가운데 값에 넣습니다.

• 기울기 = (최대 크기 − 최소 크기) ÷ (최대 화면 폭 − 최소 화면 폭)
• px 절편 = 최소 크기 − 기울기 × 최소 화면 폭
• vw 계수 = 기울기 × 100

16px에서 24px로 커지는 예시

화면 폭 360px과 1,200px에 각각 16px과 24px을 지정하면 기울기는 8 ÷ 840, px 절편은 약 12.571429px, vw 계수는 약 0.952381vw입니다. 글자 크기로 적용하는 식은 font-size: clamp(16px, calc(12.5714285714px + 0.9523809524vw), 24px); 입니다. 780px는 두 화면 폭의 정중앙이므로 계산상 20px이며, CSS 소수 반올림에 따른 미세한 차이는 있을 수 있습니다.

• 320px·360px 화면: 약 16px
• 780px 화면: 약 20px
• 1,200px·1,440px 화면: 약 24px

미리보기에서는 어디를 확인하나요?

미리보기 폭을 움직여 최솟값, 중간값, 최댓값 부근을 차례로 확인하세요. 입력한 양 끝에서 보기 좋아도 중간 화면에서는 제목이 한 줄 더 늘어나거나 카드 안쪽 공간이 좁아질 수 있습니다. 미리보기는 선택한 속성을 실제 CSS로 그린 예시이며, 사이트의 글꼴과 모든 부모 레이아웃까지 재현하지는 않습니다.

• 글자 크기는 긴 문장과 숫자도 읽기 편한지 확인합니다.
• 간격과 안쪽 여백은 콘텐츠가 답답하거나 지나치게 흩어지지 않는지 봅니다.
• 너비는 작은 화면에서 부모 영역 밖으로 나가지 않는지 확인합니다.

식과 CSS 선언은 어디에 붙여 넣나요?

기존 CSS 속성의 값만 바꿀 때는 clamp() 식을 복사하고, 속성부터 추가할 때는 CSS 선언을 복사합니다. 선언은 적용할 요소의 CSS 규칙 안에 붙여 넣으세요. 다른 규칙이 같은 속성을 덮어쓰면 결과가 보이지 않을 수 있으므로 브라우저 개발자 도구에서 실제 적용된 속성과 계산값을 확인하세요.

두 화면 폭이 같거나 값의 순서가 뒤집히면?

최대 화면 폭은 최소 화면 폭보다 커야 합니다. 두 폭이 같으면 기울기의 분모가 0이 되어 두 지점을 잇는 유동식을 만들 수 없습니다. 최대 크기도 최소 크기보다 작게 입력할 수 없습니다. CSS 자체는 clamp()의 최솟값이 최댓값보다 크면 최솟값을 우선하므로, 두 크기를 뒤집는 것만으로 화면이 넓어질수록 작아지는 식이 만들어지지 않습니다.

• 두 크기가 같으면 화면 폭과 관계없이 같은 크기를 유지하는 유효한 식을 만듭니다.
• gap이나 padding의 최소 크기는 0px으로 시작할 수 있습니다.
• 빈 입력 또는 유효하지 않은 범위에서는 이전 결과를 지우고 복사를 막습니다.

글자 크기에 쓸 때 확대도 확인해야 하나요?

네. px와 vw로 만든 글자 크기가 사용자의 확대 요구를 자동으로 충족하지는 않습니다. px로 고정한 경계는 브라우저 기본 글꼴 크기 변경을 rem처럼 따라가지 않으며, 페이지 확대 시 CSS 뷰포트가 좁아져 vw 계산값도 달라질 수 있습니다. 실제 페이지에서 글자를 원래 크기의 200%까지 확대해 문장이나 버튼이 잘리지 않고 기능을 계속 쓸 수 있는지 확인하세요. 이 도구의 미리보기만으로 접근성 충족 여부를 판정할 수는 없습니다.

미디어 쿼리나 컨테이너 기준 크기도 대체하나요?

clamp()는 길이를 연속으로 바꾸는 작업에 맞습니다. 특정 폭에서 열 개수를 바꾸거나 메뉴를 접는 동작은 미디어 쿼리 등 별도의 조건이 필요합니다. 이 도구의 vw는 브라우저 뷰포트 너비를 기준으로 하므로, 같은 화면에서 카드의 부모 영역만 좁아지는 상황에는 반응하지 않습니다. 부모 크기에 맞춘 변화가 필요하면 컨테이너 기반 CSS를 별도로 검토하세요.

실제 페이지에 적용하기 전 확인할 것

최종 확인은 생성한 CSS를 실제 콘텐츠에 적용한 화면에서 진행하세요. 속성 하나의 계산이 맞아도 주변 CSS나 콘텐츠에 따라 배치 결과가 달라집니다.

• 작은 화면·중간 화면·큰 화면에서 크기와 줄바꿈을 확인합니다.
• 긴 한글 제목과 영문 단어가 영역을 벗어나지 않는지 봅니다.
• padding과 width를 함께 쓴 요소는 box-sizing에 따른 전체 너비도 확인합니다.
• 글자 확대 후 내용과 조작 버튼이 가려지지 않는지 점검합니다.