간격 규모 생성기 사용자 지정 기본 단위와 곱셈자를 사용하여 일관된 간격 규모 시스템을 생성합니다.

What Is 간격 규모 생성기?

스페이싱 스케일 생성기는 웹 디자인을 위한 일관된 스페이싱 시스템을 만들기 위해 기본 단위를 미리 정의된 요인으로 곱하는 방식입니다. 일관된 스페이싱은 전문적이고 조화로운 디자인에 필수적인데, 이를 갖추지 못하면 레이아웃이 불일치하고 다듬어지지 않은 모습으로 보입니다. 이 도구는 기본 단위(일반적으로 4px 또는 8px)를 요인(0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24)으로 곱하여 포괄적인 스페이싱 스케일을 생성합니다. 시각적 미리보기에서는 각 스페이싱 값을 색상 막대로 표시하므로 상대적인 차이를 쉽게 볼 수 있습니다. 출력은 CSS 사용자 정의 속성(--space-0부터 --space-24까지)으로, px 또는 rem 단위로 제공되며 마진, 패딩, 갭 및 기타 스페이싱 값으로 스타일시트 전체에서 사용할 수 있습니다.

Why Use 간격 규모 생성기?

• 수학적으로 일관된 간격을 위한 기본 단위 시스템
• 상대적인 간격 차이를 보여주는 시각적 바 차트
• 디자인 시스템 통합을 위한 CSS 사용자 정의 속성 출력
• px 및 rem 출력 단위를 모두 지원

Common Use Cases

디자인 시스템 토큰

디자인 시스템의 기초로 간격 토큰을 생성합니다.

컴포넌트 라이브러리 간격

라이브러리의 모든 컴포넌트에서 일관된 간격을 보장합니다.

새 프로젝트 설정

새로운 웹 프로젝트를 시작할 때 간격 시스템을 설정합니다.

팀 정렬

디자인 및 개발 팀에서 표준화된 간격 스케일을 공유합니다.

Technical Guide

스페이싱 스케일은 일관된 비례적인 스페이싱 값을 생성하기 위해 기본 단위를 연속되는 요인으로 곱합니다. 가장 일반적으로 사용되는 기본 단위는 Tailwind CSS와 Material Design에서 사용하는 4px와 많은 디자인 시스템에서 사용하는 8px입니다. 4px의 기본 단위는 세밀한 제어를 제공합니다: 4, 8, 12, 16, 20, 24, 32, 40 등등. 8px의 기본 단위는 더 큰 간격을 생성합니다: 8, 16, 24, 32, 40, 48 등등. CSS 사용자 정의 속성(변수)은 값을 재사용하기 위해 저장됩니다: --space-1: 0.25rem. 이러한 속성은 마진, 패딩, 갭 및 기타 스페이싱 속성에서 사용할 수 있습니다. rem 단위를 사용하면 루트 글꼴 크기에 따라 스페이싱이 조정되므로 텍스트 크기를 변경하더라도 비례가 유지됩니다. 반단계(0.5배)는 세밀한 조정을 위한 작은 증분을 제공합니다. 큰 배수(16배, 20배, 24배)는 섹션 스페이싱 및 대형 레이아웃 갭을 처리합니다.

Tips & Best Practices

• 1
  세밀한 제어를 위해 4px 기본 단위를 사용하고, 더 прост게 하려면 8px를 사용하세요
• 2
  접근성과 확장성이 뛰어난 간격을 위한 rem 단위를 적용하세요
• 3
  전역 간격 조정을 쉽게 하기 위해 CSS 사용자 정의 속성을 사용하세요
• 4
  스케일 값을 지키세요-일관성을 유지하기 위해 임의의 간격을 피하세요

Related Tools

CSS 그리드 플레이그라운드

템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.

🎨 CSS & Design

테일윈드 구성 생성기

사용자 지정 색상, 글꼴 및 중단점으로 테일윈드 CSS 구성 파일을 생성합니다.

🎨 CSS & Design

타이포그래피 스케일 생성기

사용자 지정 기본 크기, 비율 및 단위를 갖춘 모듈러 타이포그래피 스케일을 생성합니다.

🎨 CSS & Design

CSS 변수 생성기

색상, 간격, 타이포그래피를 위한 CSS 사용자 지정 속성(변수)을 생성합니다.

🎨 CSS & Design

Frequently Asked Questions

Q 어떤 기본 크기를 사용해야 합니까?

4px는 가장 인기 있는 선택입니다(Tailwind에서 사용). 8px를 사용하면 더 단순하고 제한적인 스케일을 제공합니다.

Q px와 rem 중에 어떤 것을 사용해야 합니까?

사용자 글꼴 크기 설정과 함께 확장되는 rem이 접근성에 선호됩니다.

Q 임의의 간격 값을 왜 사용하지 않나요?

일관된 스케일은 시각적 조화를 창조하고 디자인을 더 다듬고 전문적으로 보이게 합니다.

Q 간격 값들을 어떻게 사용합니까?

margin, padding, gap에 대한 CSS 사용자 정의 속성을 사용하세요: margin: var(--space-4);

Q 배율 집합을 수정할 수 있나요?

표준 집합은 대부분의 요구를 충족하지만 생성된 CSS를 편집하여 배율을 추가하거나 제거할 수 있습니다.

About This Tool

간격 규모 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.