작성일자
카테고리 워드프레스/테마,테마만들기

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>


저작자 표시 비영리 변경 금지
트랙백 URL
http://martian36.com/trackback/980 관련글 쓰기
BlogIcon 가람빛

WordPress가 좋다는 것은 알지만 마음에 드는 서비스가 없네요.
WordPress.com은 무료사용자에게 제한을 걸고 QroboPress는
블로그 주소를 user.blog.qrobo.com 너무 길게 만들어 버리고..
방명록 기능이 없네요;; 분명 플러그인으로는 있겠죠..?
설치해서 쓰기는 호스팅 비용때문에..

BlogIcon 베누시안

안녕하세요. 워드프레스를 디자인을 바꿔가면서 사용하기 위해서는 호스팅을 해야겠죠. 3기가 용량에 도메인까지 4만원이면 되더군요. 그리고 이곳( http://martian36.tistory.com/968 )을 참고하시면 비비프레스로 방명록이나 자유게시판도 만들 수 있습니다.

BlogIcon 레이니아

조만간 웹서버를 구축해서 블로그를 하나 꾸려볼까 해서 이것저것 알아보고 있습니다.
사실 꽤 많은 난관이 있을 것 같지만, 개인적으로 흥미로운 작업이 될 것 같아서 기대중인데요.
워드프레스를 하게 된다면 포스트도 참고하고, 그리고 추후에 발간하실 책에도 관심을
가져봐야겠네요.
좋은 자료에 감사드리며, 댓글로나마 흔적 남기고 돌아갑니다:-)

BlogIcon 베누시안

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

sso

좋은자료 잘 보고있습니다.
혹시 부트스트랩 span에 대해서.... 개인 서버에서 개발할때는 잘 작동하는데
공용서버에 올리고 나서 그 주소로 접근하게되면 span같은게 하나도 작동하지 않아서 엉망이 되는데 혹시 이유를 아시는지요... button 모양도 그렇고 적용안되는 것들이 많은데.. 꼭 필요한 환경이라는게 있나요 ?

BlogIcon 베누시안

안녕하세요. 부트스트랩은 특별한 환경이 필요는 없습니다. 저도 그런 현상이 있는 것이 궁금한데요. 해당 사이트를 알려주시면 점검해보겠습니다.

ilch

베누시안님 워드프레스 입문한지 몇개월된 유저입니다!!

다름이아니고 제가 직접 테마를 만들고 싶어서 서핑하다가 댓글을 남기네요..

어디서부터 글을 읽어야 알 수 있을까요? ㅠㅠ

거창하게 만들것이 아니고 깔끔하고 간단하게 제가 넣고 싶은것만 넣으면서

실력을 쌓으려고 합니다..

책같은거 추천해주실수 있으신가요??

BlogIcon 베누시안

안녕하세요. 부트스트랩 책을 마무리 하느라고 답변이 늦었습니다. 테마를 간단하게 나마 만드시려면 제 졸작인 워드프레스 완벽입문을 참고하시면 될것 같습니다.

PARK

안녕하세요
자주 블로그에서 기술을 배우곤하는데
현재 http://themeton.com/themes/?theme=squaregrid&ref=themeton
스퀘어그리드 형식으로 포토폴리오 구현되는 테마로 사용중인데 서비스 소개페이지를 추가하고싶어서
http://themes.sqrt121.com/mercurial/
이 테마와 결합 할수있는 기술적인 해결방안이 있을까요???

BlogIcon 베누시안

두개의 테마를 동시에 사용할 수는 없으니 패럴랙스 페이지 기능을 만들 수 있는 플러그인을 사용하세요. Parallax One Page Builder Wordpress Plugin로 검색하면 됩니다. 저도 사용해보지 않았으니 사용법은 모릅니다.

티스토리 툴바