5-4 부트스트랩으로 레이아웃 만들기
5-4-1 워드프레스 기본 테마(Twenty Eleven)의 HTML 구조
기존의 레이아웃에 부트스트랩으로 레이아웃을 만들려면 다음과 같이 .container, .row, .span+숫자의 순서로 클래스 선택자를 div태그에 넣어줘야합니다. span 다음의 숫자는 컬럼 수를 의미합니다.
<div class="container">
<div class="row">
<div class="span12">
content
</div>
</div>
</div>
부트스트랩은 총 12개의 컬럼을 사용하는데 사이드바를 사용하지 않고 전체를 12컬럼으로 사용하고자 하면 span12가 되고 사이드바를 사용하면 콘텐트 영역은 span8로 사이드바는 span4로 해줍니다.
<div class="container">
<div class="row">
<div class="span8">
content
</div>
<div class="span4">
aside
</div>
</div>
</div>
그러므로 첫번째 레이아웃은 header.php와 footer.php에 적용하고 두번째 레이아웃은 content.php와 sidebar.php에 적용합니다.
기본테마인 Twenty Eleven의 전체 레이아웃을 보면 다음과 같습니다. body태그가 전체를 감싸고 있고 그 안에 다시 <div id=”page”>가 전체를 감싸고 있습니다. 헤더 영역은 <header>가 감싸고 있고 컨텐트 영역과 사이드바 영역은 <div id=”main”>이 감싸고 있으며 다시 컨텐트 영역은 <div id="primary">가 감싸고, 사이드바 영역은 <div id="secondary">가 감싸고 있습니다. 푸터 영역은 <footer>가 감싸고 있습니다.
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
<header id="branding" role="banner">
헤더 영역
</header><!-- #branding -->
<div id="main">
<div id="primary">
<div id="content" role="main">
컨텐트 영역
</div><!-- #content -->
</div><!-- #primary -->
<div id="secondary" class="widget-area" role="complementary">
사이트바 영역
</div><!-- #secondary .widget-area -->
</div><!-- #main -->
<footer id="colophon" role="contentinfo">
푸터 영역
</footer><!-- #colophon -->
</div><!-- #page -->
</body>그림으로 보면 다음과 같습니다.
이것을 부트스트랩으로 레이아웃을 적용하려면 다음과 같이 각 영역에 대해 conainer, row, span선택자를 삽입해주면 됩니다. 기존에 div 태그가 있으면 활용할 수 있습니다. id=”page”에 삽입된 container는 전체를 감싸주는 역할만 합니다.
<body <?php body_class(); ?>>
<div id="page" class="hfeed container">
<div class="container">
<div class="row">
<header id="branding" role="banner" class="span12">
헤더 영역
</header><!-- #branding -->
</div><!-- .row-->
</div><!-- .container -->
<div class="container">
<div id="main" class="row">
<div id="primary" class="span8">
<div id="content" role="main">
컨텐트 영역
</div><!-- #content -->
</div><!-- #primary -->
<div id="secondary" class="widget-area span4" role="complementary">
사이트바 영역
</div><!-- #secondary .widget-area -->
</div><!-- #main -->
</div><!-- .container -->
<div class="container">
<div class="row">
<footer id="colophon" role="contentinfo" class="span12">
푸터 영역
</footer><!-- #colophon -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- #page -->
</body>
