Spacing
Spacing (간격)
요소의 모양을 수정하는 다양한 반응형 축약 margin, padding, gap 유틸리티 클래스에 대해 알아봅니다.
출처: 문서
본문
Margin과 padding
축약 클래스로 요소 또는 요소의 일부 변에 반응형으로 친숙한 margin 또는 padding 값을 지정합니다. 개별 속성, 전체 속성, 세로·가로 속성을 모두 지원합니다. 클래스는 기본적으로 .25rem부터 3rem까지의 기본 Sass map에서 생성됩니다.
참고: CSS Grid 레이아웃 모듈을 사용하시나요? 그러면 gap 유틸리티를 사용하는 것을 고려하세요.
표기법 (Notation)
xs부터 xxl까지 모든 브레이크포인트에 적용되는 spacing 유틸리티에는 브레이크포인트 약어가 없습니다. 이런 클래스는 min-width: 0부터 적용되므로 미디어 쿼리에 묶이지 않기 때문입니다. 반면 나머지 브레이크포인트는 브레이크포인트 약어를 포함합니다.
클래스는 xs의 경우 {property}{sides}-{size}, sm, md, lg, xl, xxl의 경우 {property}{sides}-{breakpoint}-{size} 형식으로 이름 지어집니다.
여기서 property는 다음 중 하나입니다.
- m - margin을 설정하는 클래스
- p - padding을 설정하는 클래스
여기서 sides는 다음 중 하나입니다.
- t - margin-top 또는 padding-top을 설정하는 클래스
- b - margin-bottom 또는 padding-bottom을 설정하는 클래스
- s - (start) LTR에서는 margin-left/padding-left, RTL에서는 margin-right/padding-right를 설정하는 클래스
- e - (end) LTR에서는 margin-right/padding-right, RTL에서는 margin-left/padding-left를 설정하는 클래스
- x - *-left와 *-right를 모두 설정하는 클래스
- y - *-top과 *-bottom을 모두 설정하는 클래스
- 빈 값 - 요소의 네 변 모두에 margin 또는 padding을 설정하는 클래스
여기서 size는 다음 중 하나입니다.
- 0 - margin 또는 padding을 0으로 설정해 제거하는 클래스
- 1 - (기본) margin 또는 padding을
$spacer * .25로 설정하는 클래스 - 2 - (기본) margin 또는 padding을
$spacer * .5로 설정하는 클래스 - 3 - (기본) margin 또는 padding을
$spacer로 설정하는 클래스 - 4 - (기본) margin 또는 padding을
$spacer * 1.5로 설정하는 클래스 - 5 - (기본) margin 또는 padding을
$spacer * 3으로 설정하는 클래스 - auto - margin을 auto로 설정하는 클래스
($spacers Sass map 변수에 항목을 추가하면 더 많은 size 값을 추가할 수 있습니다.)
예시 (Examples)
이 클래스들의 대표적인 예시입니다.
.mt-0 {
margin-top: 0 !important;
}
.ms-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
가로 가운데 정렬 (Horizontal centering)
추가로 Bootstrap에는 가로 margin을 auto로 설정하는 .mx-auto 클래스가 있으며, 이 클래스를 고정 너비의 블록 레벨 콘텐츠(즉 display: block이고 너비가 지정된 콘텐츠)를 가로로 가운데 정렬하는 데 사용합니다.
<div class="mx-auto p-2" style="width: 200px;">
Centered element
</div>
음수 margin (Negative margin)
CSS에서 margin 속성은 음수 값을 사용할 수 있습니다(padding은 불가). 이런 음수 margin은 기본적으로 비활성화되어 있지만, Sass에서 $enable-negative-margins: true를 설정하면 활성화할 수 있습니다.
구문은 기본 양수 margin 유틸리티와 거의 같지만, 요청한 size 앞에 n이 붙습니다. 다음은 .mt-1의 반대인 예시 클래스입니다.
.mt-n1 {
margin-top: -0.25rem !important;
}
Gap
display: grid나 display: flex를 사용할 때 부모 요소에 gap 유틸리티를 사용할 수 있습니다. 그러면 grid나 flex 컨테이너의 개별 자식 요소들에 margin 유틸리티를 추가할 필요가 없어집니다. Gap 유틸리티는 기본적으로 반응형이며, $spacers Sass map을 기반으로 utilities API를 통해 생성됩니다.
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
Bootstrap의 모든 그리드 브레이크포인트에 대한 반응형 옵션과 $spacers map의 6가지 크기(0–5)를 지원합니다. .gap-auto 유틸리티 클래스는 없는데, .gap-0과 실질적으로 동일하기 때문입니다.
row-gap
row-gap은 지정된 컨테이너의 자식 요소들 사이의 세로 간격을 설정합니다.
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
column-gap
column-gap은 지정된 컨테이너의 자식 요소들 사이의 가로 간격을 설정합니다.
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
CSS
Sass map
Spacing 유틸리티는 Sass map으로 선언된 뒤 utilities API로 생성됩니다.
scss/_variables.scss
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
Sass utilities API
spacing 유틸리티는 scss/_utilities.scss의 utilities API에 선언되어 있습니다. utilities API 사용법을 알아보세요.
scss/_utilities.scss
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),
// Gap utility
"gap": (
responsive: true,
property: gap,
class: gap,
values: $spacers
),
"row-gap": (
responsive: true,
property: row-gap,
class: row-gap,
values: $spacers
),
"column-gap": (
responsive: true,
property: column-gap,
class: column-gap,
values: $spacers
),