본문 바로가기

Creation/Design

부트스트랩의 col-push와 col-pull 속성


Bootstrap의 col-push와 col-pull 속성 이해하기



  이해하면 간단한 내용입니다.

  부트스트랩에서 col-md-9과 같이 생긴 것은 md사이즈를 기점으로 횡으로 배치되는 요소들의 폭을 100%로 바꿔주면서 전체 폭을 12로 놓고 봤을 때 9만큼의 폭을 차지하게 요소를 놓겠다는 뜻이죠. 그런데 만약에 왼쪽에 1만큼의 공백을 남겨두고 싶다면? 두가지 방법을 생각해볼 수 있습니다.


1. 왼쪽에 폭 1만큼의 요소를 넣어서 떨어지게 하기

	
<div class="row">
    <div id="object_1" class="col-md-1"></div>
    <div id="object_2" class="col-md-4"></div>
</div>
	

object_1은 실제로 출력되지 않게 비워두면 되겠습니다. 이 방법도 가능하지만..



2. col-push 속성 활용하기

	
<div class="row">
    <div id="object_2" class="col-md-4 col-push-1"></div>
</div>
	


  이렇게 object 하나로도 간단하게 만들 수 있습니다. 이를 한번 응용해볼까요? 실제로 FastBoot 티스토리 블로그 스킨에서 사용된 기법입니다.




  이 스킨은 크게 두 요소로 보실 수 있는데, 첫번째가 sidebar이고, 두번째가 content입니다. sidebar는 총 12의 폭에서 3만큼의 폭을 가지고 있고, content는 9의 폭을 가지고 있습니다. 그런데 실제 HTML 코드를 보면 content가 먼저 나옵니다. 무슨말이냐면..


	
<html>
  <body>
    <div id="content"></div>
    <div id="sidebar"></div>
  </body>
</html> 
	

  이런식으로 배치가 되어 있다는 말입니다. 그렇다면 상식적으로 아래와 같이 부트스트랩으로 코딩을 하면 content가 좌측에, sidebar가 우측에 나와야 맞습니다.


	
<html>
  <body>
    <div id="content" class="col-md-9"></div>
    <div id="sidebar" class="col-md-3"></div>
  </body>
</html> 
	

  그런데 실제 저 스킨의 모습을 보니 사이드바가 오히려 좌측에 와있죠? 그 이유는 아래와 같이 col-push와 col-pull을 넣었기 때문입니다.


	
<html>
  <body>
    <div id="content" class="col-md-9 col-push-3"></div>
    <div id="sidebar" class="col-md-3 col-pull-9"></div>
  </body>
</html> 
	

  이렇게 하면 위 스킨 모양처럼 content가 우측, sidebar가 좌측으로 될 것입니다.



  그런데 궁극적으로 왜 이렇게 했느냐는 질문이 남습니다. 이유는 간단합니다. 모바일에서 content가 sidebar보다 먼저 보이게 하고싶기 때문입니다. 하지만 데스크탑에서는 sidebar가 좌측에 보이게 하구요. col-push와 col-pull은 부트스트랩에서 임계점(md라든지 sm이러던지 지정한 사이즈로 창이 도달했을 때) 무시가 됩니다. 즉 횡으로 배치되었던 요소들이 종으로 배치되면서 순서를 뒤바꿀 수 있게 하는 것이죠. 위의 경우처럼 모바일과 데스크탑에서 요소들의 배치순서를 바꾸고 싶을 때 정말 유용하게 사용할 수 있습니다. 무엇보다도 Javascript 한 줄 없이 말이죠.