레이아웃 (layout) 이란 특정 공간 안에 문자, 이미지 등의 구성 요소를 보기 쉽게 효과적으로 배치하는 작업이다. 웹 페이지의 외관을 결정짓는 매우 중요한 요소이다. HTML에서는 다음과 같은 방법으로 레이아웃을 작성할 수 있다.
- ＜div＞를 이용한 레이아웃
- HTML5 의미 요소 (시멘틱 태그)를 이용한 레이아웃
- ＜table＞을 이용한 레이아웃
＜div＞를 이용한 레이아웃
＜div＞는 CSS 스타일을 손쉽게 적용할 수 있으므로, 레이아웃을 작성하는데 예전에는 자주 사용되었다. 최신에는 div보다는 HTML5 의미 요소를 이용한 레이아웃을 추천한다.
<div id="header">Header</div>
<div id="nav">Nav</div>
<div id="section">
Section
<div id="article">Article</div>
</div>
<div id="aside">Aside</div>
<div id="footer">Footer</div>HTML5 의미 요소를 이용한 레이아웃
HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공한다. 이러한 요소들을 의미(semantic) 요소라고 한다.
시멘틱 요소는 기능은 없지만 의미를 명확하게 하여, 컴퓨터가 정보를 이해하고 논리적인 추론까지 할 수 있는 구조를 만들기 위해 추가된 태그이다. 검색 엔진 최적화(SEO)를 할 시에 중요한 역할을 한다.
- SEO (검색 엔진 최적화 : Search Engine Optimization)
같은 마케팅 도구를 사용해 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다.
- 크롤링
검색엔진 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집
- 인덱싱
검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만드는 것
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉,검색 엔진은 HTML코드만으로 그 의미를 인지하여야 하는데 이때 시멘틱 요소(Semantic element)를 해석하게 된다.
<header>Header
<nav>Nav</nav>
</header>
<section>
Section
<article>Article</article>
</section>
<aside>Aside</aside>
<footer>Footer</footer>| tag | Description |
|---|---|
| header | 화면 상단에 위치하는 사이트나 문서의 정보를 정의 예)로고,제목,nav |
| nav | 문서의 네비게이션 항목을 정의 |
| aside | 페이지의 주요 내용 외의 내용을 정의한다. 페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할 수 있다. 예) 광고 |
| section | 본문의 여러내용(article)을 포함하는 공간 |
| article | 본문의 주내용이 들어가는 공간 section 내에서 하나의 기사를 article 태그로 감쌀 수 있다. |
| footer | 화면 하단에 위치하는 사이트나 문서의 정보를 정의 |
| details | 사용자가 보거나 숨길 수 있는 추가적인 세부정보를 정의 |
| figcaption | figure 에 대한 자막 정의 |
| figure | 사진이나 다이어그램과 같은 부가적인 요소를 정의 |
| main | 문서의 주가 되는 컨텐츠를 정의 |
| mark | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
| summary | detals에 대한 보이는 요소를 정의 |
| time | 날짜/시간 정의 |
출처 - https://seo-ox3.tistory.com/7
http://www.devkuma.com/books/pages/339
table 요소를 이용한 레이아웃
table 요소를 이용하여 레이아웃을 작성하는 방법은 오래전에 사용하던 방식이며, 현재는 거의 사용하지 않는다. table 요소는 레이아웃을 만들기 위해 설계된 요소가 아니므로, 테이블로 작성된 레이아웃은 수정이 매우 힘들다. 따라서 되도록이면 table 요소로 레이아웃을 작성하지 말아야 한다.
<table width="100%" style="text-align:center; border:none;">
<tr>
<td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Header</td>
</tr>
<tr>
<td colspan="2" style="background-color:#ddd;margin:4px;padding:4px;">Nav</td>
</tr>
<tr>
<td style="background-color:#ddd;width:280px;">
Section
<p style="background-color:#efefef;width:265px;margin:10px;">Article</p>
</td>
<td style="background-color:#ddd;height:60px;">Aside</td>
</tr>
<tr>
<td colspan="2" style="background-color:#ddd">Footer</td>
</tr>
</table>