부트스트랩4 여백

먼저 이 블로그는 부트스트랩4가 아닌 3으로 만들었다는 것을 적으면서 시작할까 한다. 이 글을 쓰는 시점을 기준으로 최신 버전은4.1이다. 최신 버전은 부트스트랩 정식 홈페이지에서 항상 확인할 수 있다.

4 소스를 보다 pt-9, mr-3 ,p-2 등의 단어를 봤다. 처음에 아주 낯설었다. 왜냐하면 부트스트랩3에서 구경도 못 해본 단어였기 때문이었다. 나중에 알았는데 p는 padding이었고 m은 margin이었다. 그리고 t는 padding-top이나 margin-top이었으며 숫자는 수치였다. 그러면 pt-9는 padding-top=9라는 말이 된다.  

참고로 4에서 CSS 단위가 PX(픽셀)이 아니 REM으로 바뀌었다. 그래서 수치가 2라면 2px가 되는 것이 아니라 2rem이 되며 px로 하면 16px이다. 내가 정확히 모르나 rem은 문서의 폰트 크기를 따라 변하는 가변적이라 한다.

내가 전에 부트스트랩을 사용하면 정말 쉽게 홈페이지를 만들 수 있다고 했다. 그리고 단점으로 CSS를 제대로 모르게 된다고 했다. 부트스트랩에 있는 pt-2, mr-3, p-2 등의 줄임말을 익숙해 쓰다 보면 CSS에 있는 padding, margin 등의 긴 말을 접하면 답답하다. pt-2, mr-3, p-2 등의 줄임말을 CSS를 배운 사람이라 부트스트랩3이하 사람이 알 것이라 생각하지 말았으면 한다.  일상생활에서 알고 있는 사람끼리 초성으로 대화하면 간단하고 편하다. 그 초성은 모든 연령대나 사람이 알 것...

거기에서 x는 left와 right의 공백을 동시에 표시하는 경우인 것이다. 예로 mx-2라면 margin-left:2와 margin-right:2를 동시에 적용하는 경우이다. x가 left와 right라면 혹시 y는 top과 bottom ? 그래서 찾아보니 아래 그림 1번과 같이 나왔다. 그리고 t, b, l, r, x, y를 정리하면 아래 그림과 같다. 

그리고 아래 그림 2번과 같이 요소를 중앙에 배치하고 싶을 때, mx에 auto 값을 주는 것 같다. 왜 그렇게 되느냐는 물음표를 달고 싶지 않다. 머리 아프니 그냥 외우고 싶다. 3에서 div를 중앙에 배치하는 요소는 없었던 것 같다. 그때는 CSS를 이용하여 가운데 중앙을 위해 margin:auto라고 했던 것 같다. 4에서 mx-auto 요소는 아주 유용할 것 같다.  

부트스트랩 3이 아닌 4에서 공백에 대한 설명은 여기에서 볼 수 있다. 

크리에디터를 위한 프로그램