HTML5 레이아웃(layout) 설정하기
HTML5 본문 작성시에 가장 먼저 설정을 하여야 하는 것이 레이아웃(Layout)이 아닐까 합니다. 즉, 자신이 만들고자 하는 HTML문서의 외형을 어떻게 설정할 것인가 하는 것입니다.
집을 짓는 다고 가정을 하면, 정해진 공간에 방은 몇개, 주방, 욕실 등의 배치를 어떻게 할것이나 하는 것과 비슷하닥 생각을 하시면 됩니다.
HTML문서도 동일하게 현재 개발하고자 하는 웹사이트의 주제에 맞는 전체적인 외형을 디자인을 하는 것입니다. 작가가 글을 쓸때도 서론, 본론, 결론 형식으로 글을 쓰는것과 같이 HTML문서에서도 header, body, footer 형식으로 나누는 것이 일반적입니다.
header(헤더) 부분에는 웹사이트의 제목, 로고와 메인 메뉴(카테고리) 등을 일반적으로 설정을 하며, body(바디) 부분에는 실제 해당 내용, 컨텐츠 등 유동적으로 빈번하게 바뀌는 부분을 설정, footer(푸터) 부분에는 카피라이터, 사이트맵 등을 설정합니다.
모든 사이트가 위의 설명과 동일 하지는 않지만, 개발자에의해서 바뀌어 지기도 하지만, 일반적으로는 이렇게 설정을 하는 경우가 많습니다.
PHP, JSP, ASP 등과 같은 웹프로그램을 배우면, 헤더와 푸터를 별도의 페이지로 작성을 하여 쉬운 관리도 가능해지기도 합니다.
1. <table> 태그를 이용한 레이아웃 설정 ( 모바일 기기 등장 이전 )
스마트폰(Smart Phone) 등과 같은 모바일 기기가 등장하기 이전에는 일반 PC로만 웹페이지에 접속이 가능했던 관계로 <table> 태그를 사용하여, 레이아웃을 설정하였습니다.
( <table> 태그를 이용한 레이아웃 )
( 브라우저에서 확인한 레이아웃 )
<table> 태그를 이용한 레이아웃 설정
-- layout.table.html --
<!DOCTYPE html>
<html>
<head>
... 중간 생략 ... ( 이전 강좌 참조 )
</head>
<body>
<table>
<tr>
<td>레이아웃, 헤드</td>
</tr>
<tr>
<td>레이아웃, 본문</td>
</tr>
<tr>
<td>레이아웃, 푸트</td>
</tr>
</table>
</body>
</html>
<table> 태그를 이용하여, body 부분의 레이아웃을 설정하였으며, 이유는 레이아웃을 설정하기가 간편하며, 수정하기도 쉬웠기 때문입니다. ( <table>, <tr>, <td> 등의 태그에 대해서는 다음에 설명을 하겠습니다. 지금은 그냥 넘어가세요 )
위와 같이 동일한 코드는 아니지만, 이전의 레이아웃은 <table> 태그를 많이 사용했지만, 모바일 기기가 등장 이후에는 <table> 태그를 사용한 레이아웃은 거의 사용하지 않습니다. ( 모바일 기기 등장 이전에도 <table> 태그가 사라지기 시작했지만, 그 이유는 css 의 효율적인 사용과 디자인 변경의 용이성 때문에 바뀐 이유도 있습니다. )
그럼 요즘은 레이아웃으로 어떤 태그를 많이 사용할까요?
2. <div> 태그를 이용한 레이아웃
모바일 기기가 흔해진 요즘은 대부분 <div>태그를 이용해서 레이아웃을 설정하고 있습니다. <div> 태그를 이용해서 레이아웃을 설정하는 이유는 PC에서의 출력과 모바일 기기에서의 출력을 따로 따로 설정이 가능하다는 점과 CSS만 수정을 하면, 언제든지 원하는 디자인으로 다시 태어날수 있다는 장점이 있기 때문이지요.
( <div> 태그를 이용한 레이아웃 설정 코드 )
( <div> 태그로 작성한 레이아웃, 브라우저에서 확인한 모습 )
<div> 태그를 이용한 레이아웃 설정
-- layout.div.html --
<!DOCTYPE html>
<html>
<head>
... 중간 생략 ... ( 이전 강좌 참조 )
</head>
<body>
<div>레이아웃. 헤더</div>
<div>레이아웃. 바디</div>
<div>레이아웃. 푸터</div>
</body>
</html>
<div> 태그를 이용한 레이아웃 작성시에는 <table> 태그를 이용한 레이아웃보다 편할 수도 있지만, CSS에 능숙해야 합니다. 또한 크롬, 익스플로러, 사파리, 파이어폭스 등의 다양한 브라우저의 특성에 따라서도 실제 출력화면이 달라지므로 브라우저도 신경을 써야 합니다.
<div> 태그를 이용한 레이아웃 파일 :
layout.div.html<table> 태그를 이용한 레이아웃 파일 :
HTML 페이지의 레이아웃을 table 태그를 사용하면 안된다는 것이 아닙니다. 많은 개발자분들이 사용을 해 보고 편리고 유용한 방법을 선호하여 div 태그를 많이 사용한다는 것입니다.
'Web > Html' 카테고리의 다른 글
| [HTML5강좌] 본격적인 시작과 주석달기 (2) | 2015.01.17 |
|---|---|
| [HTML강좌] 헤드의 마지막 자바스크립트와 CSS (1) | 2015.01.12 |
| [HTML강좌] 헤드 메타태그 종합 name, content ... (0) | 2015.01.08 |
| [HTML강좌] 메타태그, 글자가 깨어진다면 Charset를 확인하라 (1) | 2015.01.05 |
| [HTML강좌] DOCTYPE 이란? (2) | 2015.01.04 |