Spacing
Stable원본 Space 스케일과 반응형 sp·gap 역할을 정의합니다.
Overview
원본의 Space 스케일과 sp / gap 역할을 그대로 사용합니다. sp와 gap은 같은 이름이어도 값이 다르며, 일부 값은 화면 크기에 따라 달라집니다.
sp ≠ gap
서로 다른 역할, 명확한 간격
Mobile → Tablet → DesktopSpacing scale
--site-space-0…--site-space-2…--site-space-4…--site-space-8…--site-space-12…--site-space-14…--site-space-16…--site-space-18…--site-space-20…--site-space-24…--site-space-28…--site-space-32…--site-space-40…--site-space-50…--site-space-60…--site-space-80…Height / Radius / Border / Touch / Layout Primitive
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--site-height-24 | 24px | … |
--site-height-28 | 28px | … |
--site-height-32 | 32px | … |
--site-height-36 | 36px | … |
--site-height-40 | 40px | … |
--site-height-44 | 44px | … |
--site-height-48 | 48px | … |
--site-height-52 | 52px | … |
--site-height-56 | 56px | … |
--site-radius-0 | 0px | … |
--site-radius-2 | 2px | … |
--site-radius-4 | 4px | … |
--site-radius-6 | 6px | … |
--site-radius-8 | 8px | … |
--site-radius-10 | 10px | … |
--site-radius-16 | 16px | … |
--site-radius-full | 999px | … |
--site-border-1 | 1px | … |
--site-border-2 | 2px | … |
--site-border-3 | 3px | … |
--site-touch-32 | 32px | … |
--site-touch-44 | 44px | … |
--site-touch-48 | 48px | … |
--site-container-1280 | 1280px | … |
--site-grid-columns-12 | 12 | … |
--site-grid-columns-8 | 8 | … |
--site-grid-columns-4 | 4 | … |
--site-breakpoint-360 | 360px | … |
--site-breakpoint-767 | 767px | … |
--site-breakpoint-768 | 768px | … |
--site-breakpoint-1024 | 1024px | … |
--site-breakpoint-1280 | 1280px | … |
--site-breakpoint-1920 | 1920px | … |
Semantic spacing
sp · Padding / Margin
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--site-sp-3xs | 2px | 2px | 2px | … |
--site-sp-2xs | 4px | 4px | 4px | … |
--site-sp-xs | 8px | 8px | 8px | … |
--site-sp-sm | 12px | 14px | 16px | … |
--site-sp-md | 16px | 18px | 20px | … |
--site-sp-lg | 24px | 24px | 24px | … |
--site-sp-xl | 28px | 32px | 32px | … |
--site-sp-2xl | 32px | 40px | 40px | … |
--site-sp-3xl | 40px | 50px | 60px | … |
--site-sp-4xl | 80px | 80px | 80px | … |
gap · 요소 사이 간격
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--site-gap-xxs | 2px | 2px | 2px | … |
--site-gap-xs | 4px | 4px | 4px | … |
--site-gap-sm | 8px | 8px | 8px | … |
--site-gap-md | 12px | 12px | 12px | … |
--site-gap-lg | 14px | 14px | 16px | … |
--site-gap-xl | 16px | 20px | 24px | … |
--site-gap-xxl | 24px | 28px | 32px | … |
--site-gap-3xl | 40px | 40px | 40px | … |
--site-gap-4xl | 60px | 60px | 60px | … |
--site-gap-5xl | 80px | 80px | 80px | … |
Layout / Radius / Touch 역할
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--site-breakpoint-min | 360px | 768px | 1280px | … |
--site-breakpoint-max | 767px | 1024px | 1920px | … |
--site-container-max | 360px | 768px | 1280px | … |
--site-margin-container | 16px | 24px | 0px | … |
--site-grid-card-4col | 302px | 302px | 302px | … |
--site-grid-card-3col | 227px | 227px | 227px | … |
--site-grid-card-1col | 328px | 328px | 328px | … |
--site-grid-card-2col | 156px | 156px | 156px | … |
--site-grid-desktop | 12 | 12 | 12 | … |
--site-grid-tablet | 8 | 8 | 8 | … |
--site-grid-mobile | 4 | 4 | 4 | … |
--site-radius-square | 0px | 0px | 0px | … |
--site-radius-badge | 2px | 2px | 2px | … |
--site-radius-button | 4px | 4px | 4px | … |
--site-radius-input | 4px | 4px | 4px | … |
--site-radius-card | 8px | 8px | 8px | … |
--site-radius-modal | 16px | 16px | 16px | … |
--site-radius-chip | 999px | 999px | 999px | … |
--site-radius-avatar | 999px | 999px | 999px | … |
--site-touch-compact | 32px | 32px | 32px | … |
--site-touch-min | 44px | 44px | 44px | … |
--site-touch-comfortable | 48px | 48px | 48px | … |
TSX / CSS
<div className="flex gap-md p-sp-md">관련 요소</div>
/* Mobile: sp-md 16px / gap-md 12px
Tablet: sp-md 18px / gap-md 12px
Desktop: sp-md 20px / gap-md 12px */Guidelines
- margin/padding에는 sp, 요소 사이 간격에는 gap을 사용합니다.
- 기본 Tailwind 숫자 스케일을 덮어쓰지 않습니다.
- Button의 md 높이는 40px입니다. 44px 터치가 필요한 환경에는 lg 이상을 선택하거나 별도 터치 영역을 확보합니다.
- 원본의 반응형 기준은 768px와 1280px입니다.