분류: 개발 도구
유동 여백 스케일 생성기
clamp() 기반 여백 토큰 세트를 만듭니다
좁은 뷰포트와 넓은 뷰포트에서의 기본 여백 크기, 그리고 배율을 입력하면 각각 두 값 사이를 매끄럽게 오가는 clamp()로 이루어진 --space-* 사용자 정의 속성 전체 세트를 얻어, :root에 바로 붙여넣을 수 있습니다.
| 토큰 | 출력 |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
출력
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}각 토큰은 자체 clamp()이므로, 모든 단계가 두 뷰포트 너비 사이에서 매끄럽게 변화합니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
clamp() 하나는 값 하나에는 유용하지만, 대부분의 레이아웃에는 일관된 여백 단계 전체가 필요합니다. 그리고 이를 하나씩 손으로 작성하면 같은 계산 실수가 토큰마다 반복됩니다. 이 도구는 뷰포트 범위 양 끝의 기본 크기와 배율 하나를 받아, 타입 스케일을 만들 때와 같은 방식으로 가운데 단계를 중심으로 대칭적인 토큰 스케일을 생성하므로, 뷰포트가 바뀌어도 세트 전체가 비례를 유지합니다.
사용 방법
- 좁은 뷰포트와 넓은 뷰포트에서의 기본 여백 크기를 설정합니다.
- 단계 사이의 배율을 설정합니다.
- 생성된 :root 블록의 --space-* 사용자 정의 속성을 복사합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 왜 아홉 단계인가요?
- 아홉 단계는 가운데 값 아래위로 각각 네 단계씩을 주므로, 나중에 이름을 더 만들 필요 없이 좁은 인라인 간격부터 큰 섹션 여백까지 대부분의 레이아웃을 다룰 수 있습니다.
- 서버로 전송되는 것이 있나요?
- 없습니다. 모든 clamp()는 입력한 숫자로 페이지에서 계산되며, 그래서 표와 CSS 출력이 즉시 갱신됩니다.
- CSS Clamp 생성기와 함께 쓸 수 있나요?
- 네. 이 도구는 하나의 입력 세트에서 전체 스케일을 만들고, CSS Clamp 생성기는 제목 크기처럼 한 번만 쓰는 단일 값을 위한 도구입니다. 둘은 같은 계산 방식을 씁니다.