[Bootstrap] 유틸리티로 Spacing 하는법

Box model 박스모델

bootstrap의 공백의 자세한 클래스들을 알아가기 전에, 먼저 박스 모델부터 잠깐 살펴보도록 하자! 박스 모델은 HTML의 엘리먼트들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다.

• margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
• border : 박스의 테두리
• padding : 테두리와 content간의 간격
• content : 엘리먼트 안에 포함되는 컨텐츠

 

Bootstrap 에서 Spacing ( 공백주기 ) 하는 법

부트스트랩에선 기본적인 반응형 utility classes 에 대한 전형적인 margin 과 padding 클래스를 제공한다.

기존에 margin-top : 10px 처럼 번거롭게 눈으로 봐가면서 작성할 필요없이 부트스트랩을 이용하면 정형화된 (?) Spacing 을 할 수 있다.

 

사용법

xs 부터 xl 까지 유틸리티에 적용할 수있으며

xs : {property}{sides}-{size} 표기 사용

sm,md,lg,xl : {property}{sides}-{breakpoint}-{size} 표기 사용

 

property

• M : Margin

• P : Padding

sides

• t : top

• b : bottom

• l : left

• r : right

• x : x축 -> left , right

• y : y축 -> top , bottom

size

• 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의 자동으로 세팅

.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;
}

위에 px-2 의 경우 

p : padding

x : x축으로 ( 좌우 )

2 : .5rem( font-size가 16px이면, 8px) 크기