이 글은 고수분들보단.. 아직 이해가 안되시는 분들을 위해 쓰는것이니
내용이 다소 모자라고 유치하더라도 이해해주세요.
혹시 틀린부분이나 모자란부분이 있다면 질책부탁드립니다.


XE의 레이아웃은 DIV와 CSS를 기초로 합니다.
물론 테이블을 이용하여도 작동에는 문제가 없지만,
DIV를 사용하는것이 XE가 지향하는 웹2.0에도 발맞추어 가는것이니
이번에 그냥 테이블에서 DIV로 갈아타는것도 나쁘지 않을것 같아요.

테이블은 tr과 td, 그리고 rowspan, cellspan 의 개념만 안다면
아무리 복잡하더라도 얼마든지 만들 수 있습니다.

하지만 div를 처음 접하시는분들은 이녀석을 주무르는게 여간 쉽지 않을것입니다.

그렇다면 이제 div의 배를 조금 갈라볼까요?

이해를 쉽게하기위해 테이블과 비교해가며 설명해 볼게요.
(이때 사용되는 div의 style 태그는 구분을 쉽게하기 위해 사용하는 것입니다.)

먼저 작은 박스를 만들어 보겠습니다.

<테이블>

한칸의 박스

<table border=1>
 <tr>
  <td>한칸의  박스</td>
 </tr>
</table>

<DIV>

<div style="background:#ff0000">한칸의 박스</div> 

소스로 볼때, DIV가 훨씬 가벼운것을 보실 수 있습니다.
또한 테이블은 가로를 따로 100%로 지정해 주어야 하지만, div의경우 알아서 꽉꽉 들어맞아줍니다.

작성시 한가지 주의하실점은, 테이블의 경우 <tr>과 <td> 는 따로 닫는 테그를 사용하지 않아도
완전하지는 않지만 형태는 갖추어집니다. 물론 닫지않고 바로 또 적용시켜 주어도 마찬가지 이구요.
하지만 DIV는 꼭! 닫아주셔야 정상적으로 나옵니다.

자 이제 슬슬 구조를 복잡하게 해보겠습니다.

<테이블>

첫째줄

둘째줄

<table border=1>
 <tr>
  <td>첫째줄</td>
 </tr>
 <tr>
  <td>둘째줄</td>
 </tr>
</table>

<DIV>

<div style="background:#ff0000">첫째줄</div>
<div style="background:#0000ff">둘째줄</div>

점점 복잡해 질수록 div는 점점 가벼워집니다.
아니.. div를 닫아주고, 바로 div를 적용했는데, 칸이 늘어나는게 아니라, 줄이 늘어났네요?
그렇다면 칸은 언제 어떻게 추가해주나요?

간단합니다.

<테이블>

첫째칸

둘째칸

<table>
 <tr>
  <td>첫째칸</td><td>둘째칸</td>
 </tr>
</table>

<DIV>

<div style="float:left;background:#ff0000">첫째칸</div>
<div style="float:left;background">둘째칸</div>

다시 말씀드리지만 div에 적용된 스타일에서 background 부분은 구분을 쉽게하기위하여 넣은것입니다.

float:left 가 칸을 추가하는 방법이었군요. 아! float:left?? left가 왼쪽을 의미하는것이니 right도 있나요?
네. 있습니다. 여기서 하나는 left, 다른 하나는 right를 적용하게되면,


이런 현상이 벌어지지요..

float에 대해 궁금하시다면, 에디트프로그램에 소스를 작성하신 후 페이지를 테스트해보세요.
창크기를 늘이거나 줄여도 div는 float가 지정해준편에 계속 붙어있답니다.


칸과 줄을 추가하는 방법을 알았으니,
가장 흔히들 사용하시는 레이아웃 구성형태로 꾸며보겠습니다.

우선 이번에 꾸며볼 페이지는, 가로폭은 200px, 메뉴부분은 80px, 본문부분은 120px 입니다.

<테이블>

헤더
메뉴	본문 XE 만세!

<table width=200 border=1>
 <tr>
  <td colspan=2>헤더</td>
 </tr>
 <tr>
  <td width=80, valign=top>메뉴</td><td width=120>본문<br>XE 만세!</td>
 </tr>
</table>

<DIV>

<div style="width:200px; background:#e4e4e4">헤더</div>
<div style="width:80px; background:#ff0000;float:left">메뉴</div>
<div style="width:120px; background:#0000ff;float:left">본문<br>XE 만세!</div>

자, 어떠신가요? 이해가 되셨나요?
div를 처음 접하시는 분들은 눈으로만 보시는것보다 직접 따라해보시는것이 이해에도 훨씬 도움이 됩니다.
글솜씨가 없어서 설명이 우왕좌왕한지라, 도움이 되셨으려나 모르겠네요..

이번장에서는 div를 이용해 간단한 구조를 잡는방법에 대해 알아봤습니다.
다음엔 좀더 자세한 div의 속성을 알아보고, 나중엔 실전 레이아웃을 잡아가는 방법을 알아보도록 하겠습니다