먼저 LeagueON님의 http://www.zeroboard.com/16392078 게시물을 확인하세요^^
저도 초보이지만 모르는 것도 함께 공유하는 차원에서 올립니다.

웹표준을 준수하기 위해 테이블에서 div로 전환하며 고생을 많이 했습니다.
테이블의 모든 기능을 div로 대체가 가능하지만 쉽지 않습니다.

먼저 가장 기초적인 레이아웃을 살펴 보도록 하겠습니다.


헤드
메뉴 본문
바텀

 
<table border="1" width="400" align="center">   <!-- 테이블 생성 -->
    <tr>
        <td bgcolor="#EEEEEE" >헤드</td>
    </tr>
</table>
<table border="1" width="400" align="center">
    <tr>
        <td width="100" bgcolor="#ee6688">메뉴</td>
        <td width="300" bgcolor="#ffffff">본문</td>
    </tr>
</table>
<table border="1" width="400" align="center">
    <tr>
        <td bgcolor="#EEEEEE">바텀</td>
    </tr>
</table>

가장 기본적인 레이아웃입니다.


이것을 div로 나타내면 다음과 같습니다.

헤드
메뉴
본문
바텀

<div style="width:400px; background-color:#eeeeee">헤드</div> 
<!--넓이 400픽셀 지정, 배경색상 eeeeee 지정-->

<div style="width:100px; float:left; background-color:#ee6688;">메뉴</div>
<!-- 넓이 100픽셀 지정, 왼편정렬, 배경색상 ee6688지정-->

<div style="width:300px; float:left;  clear: right; ">본문</div>
<!--넓이 300필셀 지정, 왼편정렬(오른편정렬 아닙니다. 왼편정렬해도 자연스럽게 잘 붙습니다
또한 clear 속성이 보일겁니다. 
이것은 float 속성을 없애주는 속성입니다. none, left, right, both 값이 있습니다. 
right는 오른쪽에 더 이상 float이 붙지 않도록 하는 겁니다.
 바텀이 계속 본문메뉴 오른쪽에 붙는다고 생각해 보십시오. 끔찍하지 않나요?
그렇기 때문에 이제 오른쪽에 더이상 붙이 마세요! 라고 지정해 주는 겁니다. -->

<div style="width:400px;  background-color:#eeeeee;">바텀</div>
<!-- 바텀. 넓이 400픽셀, 배경색상 eeeeee-->


이해가 될 겁니다.
여기서 고민하시는 분들이 계실 겁니다.

테이블의 경우 테이블 자체를 항상 익스플로러의 가운데에 위치하도록 하는 것은 알겁니다.
그런데 div의 경우  어떻게 해야 할까요?


헤드
메뉴 본문
바텀

<table border="0" width="100%">
<tr>
<td align="center">
  <table border="1" width="400">
    <tr>
      <td bgcolor="#EEEEEE" >헤드</td>
        </tr>
  </table>
  <table border="1" width="400" >
    <tr>
      <td width="100" bgcolor="#ee6688">메뉴</td>
          <td width="300" bgcolor="#ffffff">본문</td>
        </tr>
  </table>
  <table border="1" width="400">
    <tr>
      <td bgcolor="#EEEEEE">바텀</td>
        </tr>
  </table>
  </td>
  </tr>
</table>


그냥 표를 감싸는 안보이는 표를 만듭니다.
그리고 표를 감싸는 표의 셀 속성에 td align="center"이것만 주시면 됩니다.


비슷합니다.
div역시 같은 방법입니다. 하지만 약간의 차이는 있습니다.

헤드
메뉴
본문
바텀

<div style="margin-left:auto; margin-right:auto; width:400px;">
<!-- 왼쪽 바깥여백 자동, 오른쪽 바깥여백 자동, 넓이 400픽셀-->

<div style="width:400px; background-color:#eeeeee">헤드</div> 
<!--넓이 400픽셀 지정, 배경색상 eeeeee 지정-->

<div style="width:100px; float:left; background-color:#ee6688;">메뉴</div>
<!-- 넓이 100픽셀 지정, 왼편정렬, 배경색상 ee6688지정-->

<div style="width:300px; float:left;  clear: right; ">본문</div>
<!--넓이 300필셀 지정, 왼편정렬(오른편정렬 아닙니다. 왼편정렬해도 자연스럽게 잘 붙습니다. 또한 clear 속성이 보일겁니다. 이것은 float 속성을 없애주는 속성입니다. none, left, right, both 값이 있습니다. right는 오른쪽에 더 이상 float이 붙지 않도록 하는 겁니다. 바텀이 계속 본문메뉴 오른쪽에 붙는다고 생각해 보십시오. 끔찍하지 않나요? 그렇기 때문에 이제 오른쪽에 더이상 붙이 마세요! 라고 지정해 주는 겁니다. -->

<div style="width:400px;  background-color:#eeeeee;">바텀</div>
<!-- 바텀. 넓이 400픽셀, 배경색상 eeeeee-->
</div> <!-- div 테그 닫음-->

보시면 알 것입니다.
변한 게 있다면 모든 div를 감싸는 div가 생겼다는 것입니다.
그리고 모든 것을 감싸는 div 스타일을 보면 margin-left 와 margin-right를 각각 auto 값을 부여해 주었습니다.
또한 모든 것을 감싸는 div의 넓이를 400픽셀로 정확히 맞춰 두었습니다.


위의 소스를 다음과 같이 구현하시면
좀 더 세련된 개발자구나... 라는 소리를 들을 겁니다.

test.html
<html>
<head>
<title>레이아웃 1.5</title>
<link href="layout.css" rel="stylesheet" type="text/css" /> <!-- layout.css 스타일 시트 파일을 불러옵니다-->
</head>
<body>

<div id="align">
  <div id="head">헤드</div>
  <div id="menu">메뉴</div>
  <div id="contents">본문</div> 
  <div id="bottom">바텀</div>
</div>
</body>
</html>


layout.css
#align{  /*가운데 정렬을 하기 위한 css */
 margin-left:auto;  /* 왼쪽바깥여백 자동 */
 margin-right:auto;  /* 오른쪽바깥여백 자동 */
 width:400px  /* div 넓이 400픽셀 */
}

#head{
 width:400px;   /* 넓이 */
 background-color:#eeeeee; /* div 배경색상 */
}

#menu{
 width:100px; /* 넓이 */ 
 float:left; /* 정렬입니다. left와 right가 있습니다. center는 float으로는 지정할 수 없습니다. */ 
 background-color:#ee6688;
 }

#contents{
width:300px;  /* 넓이 */
float:left; /* 왼쪽 정렬 */
clear: right; /* float 속성을 없애주는 속성입니다. none, left, right, both 값이 있습니다. right는 오른쪽에 더 이상 float이 붙지 않도록 하는 겁니다. */ 


#bottom{
 width:400px; 
 background-color:#eeeeee;
}

오늘 강의는 레이아웃에서 항상 가운데 정렬이 되는 것을 안내해 드렸습니다^^;;

다시 말씀드리지만.. 저도 초짜입니다.
가르치면서 한번 더 배울려고 강좌를 하는 겁니다^^
이 게시물을..
입시정보제공 사이트 운영자입니다.