Bootstrap - 간격

Bootstrap의 기본 속성은 CSS와 동일하나 그 활용을 좀더 편리하게 하는 데 의미가 있다. 그 중에서도 간격요소를 좀더 쉽게 사용해보자

---

CSS 기본 박스모델

우선 CSS 기본 상자 모델을 다시 익혀보자

• Content : 해당 영역에는 텍스트, 이미지, 영상같은 실제로 보이는 요소가 포함된다.
• Padding : 콘텐츠와 테두리(Border) 사이의 내부 여백이며, 이를 추가함으로써 요소의 크기를 증가시킬 수 있다.
• Border : 요소의 경계를 의미하며, 다양한 너비, 색상을 가질 수 있다.
• Margin : 요소의 Border 외부의 빈 여백이다. 즉 다른 요소들과의 사이에 공간을 의미한다.

여기서 간격에 대한 Margin 과 Padding을 살펴보겠다.

---

Bootstrap 간격속성

Bootstrap에서는 margin과 padding을 각각 m , p로 정의하며, 세부 속성은 아래와 같이 분류된다.

t = margin-top 또는 padding-top ex) mt , pt
b = margin-bottom 또는 padding-bottom ex) mb , pb
s = (start) margin-left 또는 padding-left ex) ms, ps
e = (end) margin-right 또는 padding-right ex) me, pe
x = ~left 와 ~right 함께 적용 ex) mx, px
y = ~top 과 ~bottom 함께 적용 ex) my, py

또한 각 속성에 대한 크기를 부여할 때는 아래와 같다.

보편적으로 브라우저 속성을 건들지 않았을 때 body 내부의 font-size는 16px이며, rem은 글꼴 기준으로 설정되기에 이를 기준으로 한다.

• 0 : 간격 없음
• 1 : 0.25rem -> 4px
• 2 : 0.5rem -> 8px
• 3 : 1rem -> 16px
• 4 : 1.5rem -> 32px
• 5 : 3rem -> 48px

• x 예시
  
  이미지 자체가 하나의 container일때
  위는 margin의 left,right에 3rem을 적용한 결과이고, 아래는 padding의 left,right에 3rem을 적용한 결과이다.

• y 예시
  
  위는 margin의 top,bottom에 3rem을 적용한 결과이고, 아래는 padding의 top,bottom에 3rem을 적용한 결과이다.