HTML 11단계 - 레이아웃(Layout)

안녕하세요

HTML 11단계 레이아웃(Layout) 시간이 돌아왔습니다.

저번 시간에는 폰트(font)를 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 11단계 레이아웃(Layout)을 시작해볼께요~

 

▣ HTML 레이아웃(Layout)

 

국내 대부분의 홈페이지는 HTML 같은 마크업 언어는 문서의 구조만 표시하고, 화면에 어떻게 출력할 것인가를 결정하는 것은 CSS를 사용하는 방식으로 많이 발전되고 있습니다. 

 

테이블 태그를 전혀 사용하지 않고(데이터가 들어있는 표에서만 사용) CSS를 이용하여 레이아웃을 잡는 것이 쉽지가 않습니다. 아직까지도 대형 포털 사이트를 제외하고는 대부분의 사이트에서는 여러 태그 및 다양한 방법으로 레이아웃 구성을 잡고 있습니다.

 

그러나 분명한 것은 앞으로는 CSS를 적극 사용하여 레이아웃을 잡는 방식이 보편화 될 것 같습니다.

드림위버나 여러 에디터에서도 이를 지원하기 위한 기능적인 보완과 적용이 되고 있는 실정 입니다.

 

그러므로 가능하다면 CSS를 배우고 나서 CSS를 이용하여 레이아웃을 잡는 방법을 공부해야 합니다. 

특히나 웹디자이너, 웹퍼블리셔와 같은 쪽으로 직업의 길로 가고 계시거나 진로의 생각이 있으신분들은 반듯이 CSS 공부를 열심히 하셔야 되며 레이아웃을 CSS로 잡을수 있도록 많은 연습을 하셔야 될 듯 합니다.

 

앞으로는 CSS를 다루는 능력여부에 따라서 웹디자이너와 웹퍼블리셔의 실력을 평가받게 될테니까요.

다만, 레이아웃을 가장 빨리 이해하시는데는 table 태그를 사용해 레이아웃에 대해 이해해나가는것이 가장 효율적이라 생각되네요.

 

자 그럼 예문 소스를 통하여 레이아웃을 구성을 잡아보는 연습을 해보겠습니다.

가장 보편적으로 많이 사용하는 레이아웃 방식인 Top 부분과 LEFT 부분에 네비게이션(메뉴)을 가지는 레이아웃을 구성해보겟습니다. 바로 시작할께요~

 

<table width="800" cellpadding="0" cellspacing="0" border="0" align="center"> 
  <tr bgcolor="#efefef" 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="#efefef"> 
  <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> 

 

복잡한 테이블이지만 직접 만들어 보면 크게 어렵지는 않습니다.

위의 소스에서 넓이 단위를 픽셀단위로 작업했지만 "%" 단위로도 작업이 가능합니다.

그리고 테이블안에 테이블이 들어가는 것도 볼수 있는데요.

이처럼 테이블을 이렇게 여러개 중첩시켜 나가면서 복잡한 레이아웃 구성을 구현하기도 합니다.

예문 소스에서는 이미지를 전혀 사용하지 않았지만 대부분의 홈페이지에서는 전반적인 이미지를 먼저 만들고 이 이미지를 잘라서 테이블안에 삽입하며 배치하는 방식으로 진행합니다. 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 메타(Meta)태크 에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.