워드프레스 테마 만들기 – 부트스트랩으로 레이아웃 만들기

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 span4role=“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>

Related posts:

  1. 워드프레스 – 트위터 부트스트랩으로 테마 수정하기 안녕하세요. 베누시안입니다. 워드프레스 책이  5장까지 완성되고 이제 부록 부분만 남았습니다. 5장은 워드프레스의 기본 테마인 Twenty Eleven을 트위터 부트스트랩으로 모바일 겸용 블로그를...
  2. HTML/CSS 기초 – 유동폭(Liquid Width) 레이아웃 – 2단(Two Columns) 유동폭 레이아웃은 컨텐트가 화면 전체를 채우게 되므로 요즘의 와이드 모니터가 많이 사용되고 있는 때에는 가독성이 떨어지므로 잘 사용하지 않습니다. 하지만...
  3. 워드프레스 테마 만들기 – 트위터 부트스트랩의 개요 5-1-3 트위터 부트스트랩의 개요   각 파일의 내용에 대해서 간단히 알아보겠습니다.   Index.html 파일을 열면 부트스트랩의 간단한 소개와 하단에 이...
  4. 워드프레스 템플릿 계층구조(Template Hierarchy) 템플릿 계층구조(Template Hierarchy)   워드프레스의 테마 폴더 안에는 여러 개의 파일이 있지만 사용하는 파일이 상황에 따라서 다릅니다. 이것은 사용자가 지정하는...
  5. 워드프레스 – 위젯 사용하기 위젯은 여러가지 블로그프로그램에서 다른 의미의 용어로 사용되고 있습니다. 티스토리는 사이드바에 있는 카테고리나 최근글 같은 기본적으로 사용되는 요소를 추가하거나 제거할 수...

워드프레스 테마 만들기 – 부트스트랩으로 레이아웃 만들기”에 대한 1개의 생각

  1. 안녕하세요. 워드프레스로 웹사이트 만들기는 CSS만 알면 원하는대로 가능합니다. 워드프레스가 참 쉽게 만들어졌고 사용자도 많아서 구글에서 정보를 찾으면 대부분 다 해결됩니다. 영어라는게 흠이지만요. 댓글 감사합니다.

댓글 남기기