WP홈페이지 제작 - Bootstrap 레이아웃

부트스트랩으로 레이아웃을 잡기 위해서는 코딩의 기본구조를 먼저 알아야 합니다. 부트스트랩의 레이아웃 구조를 위해서 알아야 할 것은 사실 몇가지 없기 때문에 익히기 어렵지 않습니다. 부트스트랩 홈페이지에서 Scaffolding 부분에서 이를 확인할 수 있습니다.

레이아웃 코딩을 위한 css 클래스(class) "container", "row", "span", "offset"의 뜻을 알아보겠습니다.

container 는 레이아웃 구성하는 가장 큰 부분으로 아래의 레이아웃에서 가장 외각선이라고 보면 이해가 쉽습니다. 일반적으로 홈페이지 소스에서 한 번 사용하는 경우가 대부분입니다.

<div class="container"> 네비게이션
이미지 슬라이더
최근 포스트	최근 포스트	최근 포스트
하단 푸터 & 카피라이트 </div>

 

row 는 레이아웃 구성에서 가로 '열'을 뜻합니다. 아래에서 "네비게이션", "이미지 슬라이더", " 최근포스트 3개", "하단 푸터 & 카피라이트" 부분이 각각의 row '열'을 구성합니다.

<div class="container"> <div class="row">네비게이션</div>
<div class="row">이미지 슬라이더</div>
<div class="row">최근 포스트	최근 포스트	최근 포스트</div>
<div class="row">하단 푸터 & 카피라이트</div> </div>

 

span은 세로 '행(column)'을 뜻합니다. 다른 말로 '단'이라고도 말할 수 있습니다.
부트스트랩은 전체적으로 12열을 지원하고, 일반적으로 1단, 2단, 3단, 4단 정도로 레이아웃으로 설계합니다. 아래에서 "네비게이션", "이미지 슬라이더", "하단 푸터 & 카피라이트" 부분은 1단 구성, "최근 포스트" 부분은 3단 구성입니다.

span1 부터 span12까지가 있으며,
1단 구성을 위해서는 span12 (12행을 모두 사용 : 12행*1단=12행),
2단 구성은 span6 (6행을 사용 : 6행*2단=12행),
3단 구성은 span4 (4행을 사용 : 4행*3단=12행),
4단 구성은 span3 (3행을 사용 : 3행*4단=12행) 입니다.

<div class="container"> <div class="row"><div class="span12">네비게이션</div></div>
<div class="row"><div class="span12">이미지 슬라이더</div></div>
<div class="row"> <div class="span4"> 최근 포스트 </div>	<div class="span4"> 최근 포스트</div>	<div class="span4"> 최근 포스트</div> </div>
<div class="row"><div class="span12">하단 푸터 & 카피라이트</div></div> </div>

 

offset은 span 클래스 뒤에 위치하여 함께 쓰이면서 '들여쓰기'처럼 빈 열을 추가합니다.

<div class="container"> <div class="row"><div class="span12">네비게이션</div></div>
<div class="row"><div class="span12">이미지 슬라이더</div></div>
<div class="row"> {빈 공간}	<div class="span4 offset4"> 최근 포스트</div>	<div class="span4"> 최근 포스트</div> </div>
<div class="row"><div class="span12">하단 푸터 & 카피라이트</div></div> </div>

 

이들 클래스를 스타일 요소에 클래스로 지정하여 레이아웃을 설계할 수 있습니다.