간격 스케일 생성기

이 도구 소개

간격 스케일 생성기는 4, 5, 6, 8 px 기본 단위로 12, 16, 20단계 간격 시스템을 만들고 px 또는 rem 단위 CSS 사용자 정의 속성으로 내보냅니다.

사용 방법

1. 4 px나 8 px 같은 기본 단위를 선택합니다.
2. 출력 단위를 px 또는 rem으로 고릅니다.
3. 필요한 단계 수를 선택합니다.
4. CSS 변수 복사를 눌러 스케일을 스타일시트에 추가합니다.

알아두면 좋은 점

• Tailwind CSS 간격은 4 px(0.25 rem) 단위를 기반으로 합니다.
• Material Design은 8 dp 그리드를 쓰고, 작은 조정에는 4 dp를 씁니다.
• 0.5, 1, 1.5, 2, 3, 4, 6, 8 같은 배수로 대부분의 간격 요구를 해결할 수 있습니다.
• 여기의 rem 값은 루트 글꼴 크기를 16 px로 가정합니다.
• 고정된 스케일은 임의의 픽셀 값을 대신해 레이아웃을 시각적으로 일관되게 유지합니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문