간격
Compass는 4px 기본 단위로 여백과 요소 사이 간격을 정의합니다.
기본 단위
주로 4, 8, 12, 16, 24, 32, 40, 48px을 사용합니다. 작은 컴포넌트에는 1.5, 2.5, 3.5단위처럼 반 단위도 사용해 6, 10, 14px을 표현합니다.
간격 스케일
| 단위 | 값 | 미리보기 |
|---|---|---|
| 1 | 4px | |
| 1.5 | 6px | |
| 2 | 8px | |
| 2.5 | 10px | |
| 3 | 12px | |
| 3.5 | 14px | |
| 4 | 16px | |
| 5 | 20px | |
| 6 | 24px | |
| 8 | 32px | |
| 10 | 40px | |
| 12 | 48px | |
| 16 | 64px |
간격의 역할
나란히 놓인 요소 사이16px
요소 안쪽 여백좌우 16px
요소 바깥쪽 여백위쪽 8px
현재 화면의 적용 값
헤더와 콘텐츠는 같은 좌우 여백을 사용합니다. 반응형 여백은 화면이 넓어질 때 16px, 32px, 40px 순으로 바뀝니다.
헤더·콘텐츠 좌우16 / 32 / 40px
갤러리 필터와 목록8 + 8 = 16px
갤러리 카드 사이16px
기본 버튼 좌우16px + 4pt ≈ 21.33px
기본 버튼 아이콘과 글자8px
미리보기 안쪽24px
문서 섹션 사이40 / 48px