부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여유 및 패딩 유틸리티 클래스가 포함되어 있다.
margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
border : 박스의 테두리
padding : 테두리와 content간의 간격
content : 엘리먼트 안에 포함되는 컨텐츠
ⓐ M/P
M : Margin
P : Padding
ⓑ t , b , l , r ,x , y
t : top
b : bottom
l : left
r : right
x : x축 -> left , right
y : y축 -> top , bottom
ⓒ 0, 1, 2, 3, 4, 5, auto
0 : 0
1 : .25rem( font-size가 16px이면, 4px) 크기
2 : .5rem( font-size가 16px이면, 8px) 크기
3 : 1rem( font-size가 16px이면, 16px) 크기
4 : 1.5rem( font-size가 16px이면, 24px) 크기
5 : 3rem( font-size가 16px이면, 48px) 크기
auto : margin의 자동으로 세팅
ⓓ n1, n2, n3, n4, n5
n : negative을 의미
n1 : -.25rem( font-size가 16px이면, -4px) 크기
n2 : -.5rem( font-size가 16px이면, -8px) 크기
n3 : -1rem( font-size가 16px이면, -16px) 크기
n4 : -1.5rem( font-size가 16px이면, -24px) 크기
n5 : -3rem( font-size가 16px이면, -48px) 크기
다음은 이러한 클래스의 몇 가지 대표적인 예다.
.mt-0 {
margin-top: 0 !important;
}
.ml-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에는 가로 여백을 auto로 설정하여 고정 너비 블록 수준 콘텐츠, 즉 display: block 및 너비 세트가 있는 콘텐츠를 수평으로 중앙에 배치하기 위한 .mx-auto 클래스도 포함되어 있다.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
'프론트엔드 (Front-End) > CSS' 카테고리의 다른 글
<CSS> active, hover, press 차이 (0) | 2023.11.08 |
---|---|
<CSS> border-collapse 속성 (0) | 2022.10.03 |
[CSS] overflow 속성 (0) | 2022.06.30 |