Toollet
하려는 작업이나 앱 이름으로 검색검색문의하기
요금
메뉴
로그인요금

CSS clamp 생성기

작은 화면과 큰 화면의 너비·크기를 입력해 글자나 여백이 부드럽게 변하는 CSS를 생성합니다. px·rem 출력을 미리 보고 CSS와 Tailwind용 코드를 복사하거나 텍스트로 저장할 수 있습니다.

화면 너비와 그 너비에서의 크기 입력

작은 화면에서의 크기

큰 화면에서의 크기

고급 설정rem · 기준 16px

크기 입력은 px입니다. 1rem을 16px로 출력합니다.

생성 결과

「CSS 생성」을 누르면 여기에 코드와 미리보기가 표시됩니다.

할 수 있는 일

너비와 크기 두 쌍으로 지정

작은 화면과 큰 화면에서의 크기를 지정합니다. 글자 크기·간격·안팎 여백·너비·높이 6가지에 사용할 수 있습니다.

px와 rem 코드 생성

입력은 px로 통일하고 출력은 px 또는 rem을 선택합니다. CSS 선언과 Tailwind 임의 속성 코드를 얻을 수 있습니다.

생성한 CSS를 즉석에서 확인

미리보기 안의 두 요소에 CSS를 적용합니다. 현재 틀 너비에서 글자와 여백이 어떻게 표시되는지 확인할 수 있습니다.

사용 방법

  1. 바꿀 속성 선택

    글자 크기라면 font-size, 요소 사이 간격이라면 gap처럼 지정하려는 CSS 속성을 선택합니다.

  2. 두 화면 너비와 크기 입력

    작은 화면과 큰 화면 각각의 너비와 크기를 px로 입력합니다. 작은 쪽 크기는 큰 쪽 이하로 하세요.

  3. 출력 단위 확인 후 생성

    고급 설정에서 px 또는 rem을 선택합니다. rem은 기준 글꼴 크기도 확인한 뒤 “CSS 생성”을 누르세요.

  4. 미리보기 후 코드 받기

    CSS를 복사해 사용할 곳에 붙여넣습니다. Tailwind용 코드는 펼쳐서 얻을 수 있고, 전체 2개 항목을 한꺼번에 복사하거나 텍스트로 저장할 수도 있습니다.

이럴 때 편리

제목 크기를 부드럽게 바꾸기

좁은 화면과 넓은 화면에서의 글자 크기를 정하고 그 사이를 단계적이 아니라 연속적으로 바꾸고 싶을 때.

화면에 맞춰 여백 조정

카드 사이 gap이나 안쪽 padding을 정한 최소·최대 크기 범위 안에서 바꾸고 싶을 때.

가변 크기 지정과 미리보기 읽는 법

clamp의 세 가지 값

clamp는 최솟값·가변값·최댓값을 지정하는 CSS 함수입니다. 생성식은 두 기준점 사이를 일차식으로 잇고, 범위를 벗어나면 끝의 크기로 제한합니다.

입력은 px, 출력은 px 또는 rem

화면 너비와 크기 모두 입력은 px입니다. rem 출력에서는 크기와 고정 부분을 기준 글꼴 크기로 나누고, 화면 너비에 대한 vw 계수는 그대로 사용합니다.

rem 기준을 사용할 곳과 맞추기

기본적으로 1rem을 16px로 보고 코드를 만듭니다. 사용할 곳의 루트 요소 글꼴 크기가 다르면 끝의 크기와 변화 방식도 달라집니다. 사용할 곳에서도 확인하세요.

미리보기 틀이 화면 너비의 기준

미리보기는 독립된 표시 틀입니다. 화면 전체 너비가 아니라 틀 안쪽 너비로 vw를 계산합니다. 속성에 따라 글자, 두 요소 사이 간격, 여백, 요소의 크기에 같은 생성 CSS를 적용합니다.

사용할 곳에서의 확인도 필요

이 미리보기의 문자열과 구성은 고정입니다. 사용할 곳의 글꼴, 긴 문장, 줄 바꿈, 브라우저 글자 확대에서도 확인하세요. Tailwind 코드는 임의 속성 형식이며, 사용할 곳에서 감지·생성되는지도 확인합니다.

자주 묻는 질문

지정한 화면 너비 범위를 벗어나면 어떻게 되나요?

작은 쪽보다 좁은 너비에서는 최소 크기, 큰 쪽보다 넓은 너비에서는 최대 크기가 됩니다. rem인 경우 코드를 생성할 때와 같은 기준 글꼴 크기에서 사용하는 것이 전제입니다.

rem의 기준 글꼴 크기는 무엇인가요?

1rem을 몇 px로 계산할지 지정하는 값입니다. 기본은 16px이며 고급 설정에서 1~1000px로 바꿀 수 있습니다. 사용할 곳의 루트 요소 글꼴 크기에 맞추세요.

같은 크기나 음수 값을 지정할 수 있나요?

최소와 최대를 같은 값으로 하면 크기를 일정하게 할 수 있습니다. 음수 값은 margin에만 지정할 수 있습니다. 화면이 넓을수록 크기가 작아지는 지정은 지원하지 않습니다.

속성이나 값을 바꾸면 바로 반영되나요?

변경하면 생성된 코드와 미리보기를 해제합니다. “CSS 생성”을 눌러 갱신하세요. 출력 단위나 기준 글꼴 크기를 바꿀 때도 같습니다.

미리보기 글자를 바꿀 수 있나요?

확인용 문장과 “Aa 123” 두 가지는 고정입니다. 문자열 편집 기능은 없습니다. 생성한 CSS를 사용하는 페이지에서도 실제 문장과 표시 너비를 확인하세요.

입력과 결과

화면 너비
1~100000px. 작은 쪽 화면 너비는 큰 쪽보다 작아야 합니다. 소수도 입력할 수 있습니다.
크기
0~10000px. margin만 −10000px까지 지정할 수 있습니다. 작은 쪽 크기는 큰 쪽 이하여야 합니다.
출력
CSS 선언과 Tailwind 임의 속성. 전체 2개 항목은 css-clamp-generator.txt로 저장할 수 있습니다.
정밀도
생성식은 최대 13 유효 자릿수의 계수를 사용합니다. 반올림한 식으로 기준점을 재현할 수 없을 만큼 너비가 가까운 경우 등은 오류가 됩니다.

현재 설정

도구 검색