태터툴즈 기본스킨의 구조를 보면 아래와 같습니다.
<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

트랙백을 보내세요

트랙백 주소 :: http://www.plyfly.net/trackback/2630029