[bootstrap v4-alpha] spacing 기능

서론

bootstrap 을 사용하는 과정에서 spacing 에 관련되서 찾아보게 되었다. 

소스를 살펴보다보면 mb-1, my-1 이라는 클래스가 종종 보이기도 하여서 겸사 찾아보기로 하였다. 

https://v4-alpha.getbootstrap.com/utilities/spacing/

를 보니 자세히 설명이 있었다. 

정리

내용을 살펴보면, bootstrap 의 spacing 기능이 잘 나열되어 있는데, 간단하게 요약해보자면,

첫 글자

 m 은 margin

 p 는 padding

를 뜻한다.

조합되는 규칙을 보자면 다음과 같다. 

{m,p} + {t,b,l,r,x,y} + '-' + {0 ~ 5}

예시 를 들어보자면,

.mb-1

.my-2

와 같이 생성이 되는데, 

결론적으로는 my-2 my-3 과 같은 클래스를 자주 쓰게 되는 듯 하다. (상하 margin 여백 주는 클래스)