사이드바와 본문 크기/위치 조절하기 (Bootstrap 기반 스킨)

사이드바와 본문 입맛대로 수정하기

  스킨 커스텀 관련해서 사이드바 크기 조절과 위치조절에 관해 질문하시는 분들이 많아 따로 포스팅합니다. Bootstrap은 기본적으로 한 줄의 Grid의 크기를 12로 계산하고 있습니다. 현재 FastBoot에서 적용된 본문과 사이드바 폭의 비율은 9:3입니다. 이를 변경하시려면 8:4, 10:2등으로 변경하시면 되는데, 물론 본문 폭의 크기에 영향을 받습니다. 사이드바 크기를 늘리게 되면 본문 폭이 줄어들고, 사이드바 크기를 줄이게 되면 본문 폭이 늘어나죠. 이것은 Bootstrap의 스펙이라 아예 전체를 유동적으로 하거나 구조를 바꿔버리지 않는이상 어쩔 수 없는 부분입니다. 아래코드는 FastBoot의 코드입니다만 Bootstrap기반 스킨의 대부분이 아마 아래처럼 구조가 되어 있을 것입니다.

	

<!-- FastBoot v1.5.1 by Readiz
	 Responsive Tistory Skin
	 http://readiz.com/
	 Open sources are copyright of their respective owners.
-->

...생략...

<s_t3>

<div class="container" id="main">
	<!--F 빅 사이즈 좌우 버튼 (1400px 이상 좌우 배치) -->
	<div id="outer_btn_left" class="hidden"></div>
	<div id="outer_btn_right" class="hidden"></div>
	<div class="row">
		<div id="leftContent" class="col-md-9">		
...생략...
			</div> <!--F / content -->
		</div> <!-- /col-md-9 -->
	<aside><div id="sidebar" class="sidebar col-md-3">
	<s_sidebar>
		<s_sidebar_element>
		<!-- 블로그 설명 모듈 -->
		<div class="panel panel-default"> 
	

사이드바와 본문 폭 조절하기

  class="col-md-9"과 class="col-md-3"으로 되어 있는 부분이 있습니다. 이 부분을 변경하시면 되는데 앞서 말씀드린 것처럼 총 합이 12가 되게 하시면 됩니다. 만약에 8:4의 비율로 하고 싶다면 col-md-8과 col-md-4로 하시면 되겠죠. 아래 스크린샷은 실제로 본문을 8, 사이드바를 4로 하신 FastBoot을 적용한 onasaju님의 블로그 모습입니다.

http://onasaju.tistory.com/

 

사이드바와 본문 좌우 위치 바꾸기

  만약 사이드바를 왼쪽에 놓고 싶다면? 간단합니다. Bootstrap의 class중에 col-md-pull-xx와 col-md-push-xx속성이 있기 때문이죠. 둘은 각각 당기다/밀다는 듯이있는데요, 사이드바를 당기고, 본문을 밀면 좌우 위치가 바뀌겠죠? 아래처럼 말입니다.

  만약에 기본값인 col-md-9과 col-md-3을 사용하고 계신다면, 본문은 3만큼 밀고 사이드바는 9만큼 땡겨와야 할 것입니다. 이 경우 class를 "col-md-9 col-md-push-3"과 "col-md-3 col-md-pull-9" 으로 해주시면 됩니다. class는 여러개의 값을 가질 수 있으므로 col-md-push와 col-md-pull 속성을 추가한 것입니다.

  만약 위에서 수정한 것처럼 col-md-8과 col-md-4를 사용한다면 어떻게 해야할까요? 간단합니다. "col-md-8 col-md-push-4"과 "col-md-4 col-md-pull-8" 로 해주시면 되겠죠. 크기만큼 밀고 당기면 된다고 말씀드리는 것입니다.

  Bootstrap으로 스킨을 제작하면 이렇게 큰 틀을 쉽게 바꿀 수 있다는게 장점이겠죠. 선호하는 방식에 따라 사이드바와 본문 크기와 배치를 한번 잘 바꿔보시기 바랍니다. ^^