베누시안 2012/09/01 19:10 워드프레스/테마,테마만들기

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>


저작자 표시 비영리 변경 금지

댓글을 달아주세요..

  1. BlogIcon 가람빛 2012/09/01 19:34 : :

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

    • BlogIcon 베누시안 2012/09/01 19:39 :

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

  2. BlogIcon 레이니아 2012/09/01 21:18 : :

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

    • BlogIcon 베누시안 2012/09/02 14:02 :

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

  3. sso 2013/02/18 09:38 : :

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

    • BlogIcon 베누시안 2013/02/19 11:59 :

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

  4. ilch 2013/02/27 21:07 : :

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

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

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

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

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

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

    • BlogIcon 베누시안 2013/03/01 10:37 :

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

  5. PARK 2014/05/16 16:36 : :

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

    • BlogIcon 베누시안 2014/05/16 18:01 :

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

워드프레스 책 관련 질문은 diywordpress.kr을 이용해주세요. 여기서는 답변을 드리지 않습니다.

티스토리 툴바