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 한 줄 없이 말이죠.
'Creation > Design' 카테고리의 다른 글
| [CSS3] box-shadow 속성 (11) | 2014.05.04 |
|---|---|
| CSS Grayfilter with crossbrowsing (16) | 2014.04.17 |
| Offcanvas가 있는 반응형 스킨의 구조 설계 (14) | 2014.03.30 |
| Bootstrap Customize - Boost your bootstrap (7) | 2014.03.16 |
| Make bootstrap dropdown menu (4) | 2014.03.09 |
| [CSS+Javascript] 간단한 Back to top 버튼 넣기 (6) | 2014.02.26 |
| [CSS] 구글 애드센스 노란색 뒷배경 제거하기 (1) | 2014.02.26 |
| [CSS] CSS로만 만든 배경 / 그레디언트 들어간 배경 쓰기 (5) | 2014.02.24 |
| [폰트] 구글 Fonts이용, 영문 웹폰트 적용시키기 (9) | 2014.02.22 |
| [CSS] 원형 이미지 마스크 & transform 속성으로 회전시키기 (2) | 2014.02.19 |
