div로 레이아웃잡기

div로 레이아웃잡기

 

익숙해지면....테이블보다 쉽네요^^(간단하여)...

솔직히 예전에는 테이블이 웹페이지 레이아웃, 틀을 잡는데에 쓰일수 밖에 없었습니다. 그만한 틀을 잡아주는 속성이 약했기 때문입니다. 그리고 그 당시에는 그것이 더 편했고, 깔끔했습니다. 규격이 맞지 않아서 줄이고 늘리고 하는것이 더 문제 였으니까요. 하지만 DIV는 레이아웃을 위한 그 목적으로 씌여진 만큼, 그보다 더 다루기 쉽게, 간편하게 발전 되었습니다.

보통의 홈페이지 레이아웃으로 예를 들어가면서 보겠습니다.

이런 레이아웃을 만들어 보겠습니다.

<div></div> <div style="float: left;"></div> <div></div>

이렇게 만들어 볼까요? 

그렇다면 이제 슬슬 테이블은 복잡해 집니다

<div></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both;"></div>
<div></div>
<div></div>
<div></div>