CSS Clamp 생성기

처음부터 결과 확인까지

1. 1

   작은 화면에서 유지할 최소 크기와 큰 화면에서의 최대 크기를 정합니다.

2. 2

   값이 변하기 시작하고 끝날 최소·최대 뷰포트 너비를 입력합니다.

3. 3

   font-size, padding, gap 등 적용할 속성과 선택자를 선택합니다.

4. 4

   rem 또는 px 출력과 CSS 변수 생성 여부를 프로젝트 규칙에 맞춥니다.

5. 5

   생성 버튼을 누른 뒤 출력 코드와 현재 CSS 계산값을 비교합니다. 이후 입력 변경은 자동 반영되며 오류가 나면 기존 결과와 복사가 해제됩니다.

6. 6

   최소·중간·최대 화면과 브라우저 확대 상태에서 실제 레이아웃을 테스트합니다.

계산·처리 기준

최소·최대 크기의 차이를 최소·최대 뷰포트 차이로 나누어 기울기를 구하고 100을 곱해 vw 계수로 바꿉니다. 절편은 최소 크기에서 기울기×최소 뷰포트를 뺀 값입니다. 선호값은 기울기vw와 절편 px 또는 rem의 합으로 구성하고, 이를 clamp(최소값, 선호값, 최대값)에 넣습니다. rem 출력은 기준 16px로 환산하므로 프로젝트 루트 글꼴 크기가 다르면 결과를 조정해야 합니다.

알아둘 한계

• rem 환산 기준은 16px로 고정입니다. 첫 번째 예시를 루트 글꼴 20px인 사이트에 적용하면 최소·최대는 40px·80px이며, 900px 화면의 값은 약 53.33px입니다. 뷰포트 경계도 달라지므로 프로젝트에서 다시 확인하세요. 이 페이지의 현재 CSS 계산값에는 현재 루트 글꼴과 반올림한 계수를 반영합니다.
• 크기는 0 이상, 뷰포트는 1px 이상이고 각각 최대값이 최소값보다 커야 합니다. 소수는 허용하지만 같은 크기·역방향 감소는 이 생성기의 지원 범위가 아닙니다. 출력 숫자·계수는 절댓값 1,000,000 이하, 소수 넷째 자리까지로 제한하며 반올림으로 범위가 사라지는 입력은 거절합니다.
• 미리보기는 font-size·line-height·padding·margin·gap·border-radius·width·letter-spacing에 적용합니다. 다른 유효한 길이 속성은 코드만 생성하고 미리보기 미지원임을 표시합니다. 선택자는 생성 코드에만 쓰며 이 페이지의 다른 요소를 바꾸지 않습니다. width 표시값은 콘텐츠 너비로 테두리·padding을 포함한 외곽 너비와 다릅니다.
• 선택자·속성은 현재 브라우저가 지원하는 문법인지 확인합니다. 프로젝트의 CSS 변수 값, 상속·우선순위·다른 스타일과의 충돌까지 검증하지는 않습니다. 자동 복사가 막히면 결과 아래에 표시되는 코드를 직접 선택해 복사하세요.
• 선형 변화가 모든 디자인 구간에 적합한 것은 아니므로 필요하면 미디어 쿼리와 함께 사용해야 합니다.
• 너무 많은 속성에 서로 다른 유동값을 적용하면 레이아웃 예측과 유지보수가 어려워질 수 있습니다.
• 폰트 크기는 최소값이 지나치게 작지 않은지, 확대와 사용자 글꼴 설정에서도 읽을 수 있는지 확인해야 합니다.