태터툴즈 기본스킨의 구조를 보면 아래와 같습니다.
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
이것을 바탕으로 css를 이용하여 컨텐츠 영역을 왼쪽에 사이드바를 오른쪽에 위치시켰습니다. 아래 그림과 같이 말이죠

위 그림과 같은 레이아웃을 만들기 위해 다음과 같이 css를 작성했습니다.

#container {        /* width : 760px */
   width:760px;
   padding:10px;
   margin:50px auto;
   background-color:#eee;
  }
     
#header    {        /* header width : 740px */
   padding:10px;
  }

#content   {        /* content width : 540px */
   float : left;
   width:540px;
   padding:10px;
  }   
 
#sidebar    {        /* sidebar width : 190px */
   float : right;
   width:190px;
  }

#footer    {
   clear:both;
   padding:10px;
  margin-top:10px;
  }

자 그럼 아래 그림과 같이 레이아웃을 바꾸려면 어떻게 하면 될까요?

아래와 같이 content 영역과 sidebar 영역의 float값을 서로 바꿔주면 됩니다. 단지 이렇게 skin.html 파일을 수정하지 않고, style.css 파일만 수정해 주는것 만으로도 레이아웃이 쉽게 변하게 됩니다.

#container {        /* width : 760px */
   width:760px;
   padding:10px;
   margin:50px auto;
   background-color:#eee;
  }   
 
#header    {        /* header width : 740px */
   padding:10px;
   background-color:#ccc;
  }

#content   {        /* content width : 540px */
   float : right;
   width:540px;
   padding:10px;
   background-color:#c1b3d7;
  }   
 
#sidebar    {        /* sidebar width : 190px */
   float : left;
   width:190px;
   background-color:#a589c1;
  }   

#footer    {
   clear:both;
   padding:10px;
   background-color:#ccc;
   margin-top:10px;    
  }


2006/11/06 23:21 2006/11/06 23:21

트랙백을 보내세요

Trackback address :: http://www.plyfly.net/trackback/2630029

Comments

  1. 함장 2006/11/07 01:48

    이것이 바로 진정한 초초초초초보를 위한 글 --)bb

  2. 엉뚱이 2006/11/07 09:06

    연재해주실 수 있을까요? ^^ CSS의 심오한 세계를 더 알고 싶어요~ 애독자가 되겠스니다.

  3. JJong 2006/11/07 10:06

    굿~~~~~
    그래그래 내가 원한게 이런거야.....
    친구 잘하고 있네 그려~ ^^

  4. leezche 2006/11/09 10:14

    연재하겠습니다.. ^^;;

  5. 푸르름 2007/01/31 23:22

    유용한 정보 고마워여
    스크랩 해갑니다

  6. dalikim 2007/05/03 16:45

    오~호 요렇게 하면 되는거군요... 나중에 참고하겠읍니다...^^
    아직 익숙치 않아서 건들었다간 퇴근하는데 늦어질거 같아서요...어제도 블로그 약간 손봤다가 글들이 깨지고 사이드바 편집에서 제 갈길을 못찾아 온통 뒤죽박죽...
    블로그 폭파 할뻔 했읍니다...-_-

  7. 에로원숭이 2007/05/07 17:38

    오호라...
    저놈이 문제였군...

  8. 대감 2008/02/22 17:37

    잘 보고 갑니다. 그런데 저렇게 했는데 나중에 보니 다시 오른쪽으로 가 있는 경우가 있었습니다.
    그런 때에는 어떻게 해야 하는지요? (저는 초보입니다-_-;

    • leezche 2008/02/26 10:24

      정확하게 어떤경우인지 말씀해 주셔야 할것 같습니다.
      예제 화면을 보여주시면 더욱더 문제를 해결하는데 도움이 될 것같습니다.

  9. 밤안개 2008/10/11 21:06

    완전 감사합니다~

  10. annonce 2009/01/12 08:31

    유용한 정보 고마워여
    스크랩 해갑니다

  11. 비밀방문자 2009/03/06 12:27

    관리자만 볼 수 있는 댓글입니다.

비밀글 (Secret)
댓글 달기 (Submit)