[Html] 레이아웃(Layout) 에 대해서

테이블을 이용한 레이아웃(Layout)

홈페이지를 제작할때 가장 많이 사용되는 태그는 <table>태그입니다.(<tr>,<td>와 함께) 이유는 레이아웃을 잡을때 <table>태그만큼 효율적인 것이 없기 때문입니다. 대부분의 홈페이지는 top 부분과 left 부분에 네비게이션(메뉴)이 위치합니다. 이를 최대한 간단하게 만들어 보겠습니다. <table width="800" cellpadding="0" cellspacing="0" border="0" align="center"> <tr bgcolor="#8080FF" align="center">  <td width="100">홈페이지 로고</td>  <td width="100">메뉴1</td>  <td width="100">메뉴2</td>  <td width="100">메뉴3</td>  <td width="100">메뉴4</td>  <td width="100">메뉴5</td>  <td width="200"><!-- 여백 --></td> </tr> <tr height="5">  <td colspan="7"><!-- 여백 --></td> </tr> </table> <table width="800" cellpadding="0" cellspacing="0" border="0" align="center"> <tr>  <td width="150" valign="top" bgcolor="#8080FF">   <table width="130" cellpadding="5" cellspacing="0" border="0" align="center">   <tr>    <td>하위메뉴1</td>   </tr>   <tr>    <td>하위메뉴2</td>   </tr>   <tr>    <td>하위메뉴3</td>   </tr>   <tr>    <td>하위메뉴4</td>   </tr>   <tr>    <td>하위메뉴5</td>   </tr>   </table>  </td>  <td width="650" valign="top">   <table width="600" cellpadding="0" cellspacing="0" border="0" align="center">   <tr>    <td>여기에 본문이 옵니다.</td>   </tr>   </table>  </td> </tr> </table> 다소 복잡한 테이블이지만 실제로 만들어 보면 크게 어렵지 않습니다. 홈페이지 로고 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 하위메뉴1 하위메뉴2 하위메뉴3 하위메뉴4 하위메뉴5 여기에 본문이 옵니다. 너비의 단위는 %를 사용하였지만 100% 레이아웃을 차지하는 홈페이지가 아닌 이상 % 보다는 픽셀을 사용하는 것이 보다 일반적입니다. 그리고 테이블의 셀안에 다시 테이블이 들어가는 것을 볼 수 있습니다. 테이블을 이렇게 중첩시켜 나가면서 복잡한 레이아웃을 구현합니다. 예제에서는 이미지를 전혀 쓰지 않았지만 대부분의 홈페이지 작업은 전체적인 화면의 이미지를 먼저 만들고 이 이미지를 잘라서 테이블을 이용하여 배치를 하는 방식으로 진행됩니다.

CSS를 이용한 레이아웃(Layout)으로의 전환

아직까지는 국내의 대부분의 홈페이지는 테이블 태그를 이용하여 레이아웃을 잡고 있습니다. 웹브라우저에서 소스보기를 해보면 <table> 태그의 수는 헤아릴 수가 없을겁니다. 그러나 이런 전통적인 레이아웃 제작 방식이 많은 비판을 받고 있습니다. 아무런 의미도 없는(시각적으로 보여주는 역할만 할 수 있는) 테이블 태그의 남용으로 웹문서가 의미를 잃어간다는 지적입니다. 그래서 가능하면 HTML과 같은 마크업 언어는 문서의 구조만 표시하고, 화면에 어떻게 출력될것인가를 결정하는 것은 CSS를 사용하자는 쪽으로 발전되고 있죠. 테이블 태그를 사용하지 않고(데이터가 들어있는 표에만 사용하고) CSS를 이용하여 레이아웃을 잡는 것이 쉽지가 않습니다. 아직까지도 대형 포털 사이트를 제외하곤 대부분의 사이트에서는 테이블 태그를 사용하여 레이아웃을 잡고 있고 있습니다.

그러나 분명한 것은 앞으로는 테이블 태그 대신 CSS를 사용하여 레이아웃을 잡는 방식이 일반화 될 것입니다. 드림위버와 같은 위지윅 에디터에서도 이를 지원하기 위한 기능적인 보완이 이루어질 것으로 예상됩니다. 그러므로 가능하면 CSS를 배우고 나서는 CSS를 이용하여 레이아웃을 잡는 방법을 공부해야 합니다. 특히 웹디자이너와 같이 이쪽으로 직업을 생각하고 계신 분들은 반드시 CSS 공부를 열심히 하여 레이아웃을 CSS로 잡아야 합니다. 앞으로는 CSS를 다루는 능력에 따라서 웹디자이너의 실력을 평가받게 될 것입니다.

점선 테이블1

<table>태그를 이용하여 아래와 같은 점선 테이블을 만들어 보겠습니다. <table width="300" cellpadding="0" cellspacing="0" border="0" align="center"> <tr height="12">  <td colspan="3"><img src="top.gif" border="0"></td> </tr> <tr>  <td width="7"><img src="left.gif" border="0"></td>  <td width="286" align="center">점선 테두리를 가진 테이블</td>  <td width="7"><img src="right.gif" border="0"></td> </tr> <tr height="11">  <td colspan="3"><img src="bottom.gif" border="0"></td> </tr> </table> 3개의 열과 3개의 행으로 구성된 테이블입니다. 점선 테두리를 가진 테이블 테이블의 주위는 이미지를 사용하고, 테이블안의 내용은 텍스트를 사용하므로 언제든지 텍스트의 수정이 가능합니다. 이 테이블의 단점은 width가 300으로 고정되어 있다는 점입니다.

점선 테이블2

앞의 예제에서는 테이블의 width가 고정되어 있어서 실제로 적용하기가 곤란합니다. 테이블 안의 내용이 늘어날 수록 자연적으로 늘어나게 만들려면 배경이미지를 사용해야 합니다. <table width="300" cellpadding="0" cellspacing="0" border="0" align="center"> <tr height="12">  <td width="14"><img src="top_left.gif" border="0"></td>  <td width="270" background="top_center.gif"></td>  <td width="16"><img src="top_right.gif" border="0"></td> </tr> <tr>  <td background="mid_left.gif"></td>  <td align="center">보다유연한<br>점선 테이블입니다.<br>테이블 안의 내용이 늘어나면<br>자동적으로 배경이미지가<br>패턴으로 깔립니다.</td>  <td background="mid_right.gif"></td> </tr> <tr>  <td><img src="bottom_left.gif" border="0"></td>  <td background="bottom_center.gif"></td>  <td><img src="bottom_right.gif" border="0"></td> </tr> </table> 보다유연한 점선 테이블입니다. 테이블 안의 내용이 늘어나면 자동적으로 배경이미지가 패턴으로 깔립니다. 이런 형태의 테이블을 자주 만들다보면 레이아웃을 잡아나가는 실력이 빠르게 향상됩니다.