Chapter 5. 영역 관련 태그

1. iframe

• 웹 문서 안에 다른 웹 페이지를 추가할 수 있는 태그
• 하나의 페이지구조 안에서 페이지 영역 자체를 나누어 버림

✍ 태그 작성 시

<iframe width="45%" height="1000px" src="http://www.google.com">
</iframe>
<iframe width="45%" height="1000px" src="http://www.nate.com">
</iframe> 

2. div

• 하나의 공간 형태로 구조를 잡는데 사용 된다.(block 형식의 공간 분할)
• css와 함께 공간을 분할 할때 사용
• div 안에 또 다른 div를 넣어서 공간 세분화 가능

✍ 태그 작성 시

<div> 하나의 공간
</div>
<div> 하나의 공간
</div>

👉결과

3. span

• inline 형식의 공간을 분할하는 태그
• text 단위
• 영역자체를 데이터까지만 범위로 잡는다.

✍ 태그 작성 시

<span> 하나의 공간
</span>
<span> 하나의 공간
</span>

👉결과

html4의 페이지 구조

• <div>,<span> 태그를 이용, 구역을 설정하고 id또는 class 값을 넣어서 구분

ex)
<div id="header">
.
.
</div>

<div id="content">
.
.
</div>

<div id="footer">
.
.
</div>

html5의 페이지 구조

• 시멘틱 태그를 사용

• 페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분

  • 페이지 구조를 쉽게 파악하고 좀 더 정확한 정보를 검색 할 수 있게 함
  • header, section, footer

• 웹 접근성의 용이함

  • 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게
    접근하고 이해할 수 있도록 보장하는 것

<header> </header>

• 특정 부분의 머리말로 주로 검색어(form), 메뉴(nav)를 넣음
  • <nav></nav>
  • 다른 사이트나 페이지로 이동하는 태그를 모아 놓은 태그
  • 특정 태그에 종속되지 않고 어느곳에서나 사용할 수 있음
  • 주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임

<section></section>

• 웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을 때 사용
• <section>태그안에 <section> 태그를 넣을 수 있음
• 주제별로 article을 묶어주는 태그
  • <article> </article>
  • 웹 페이지의 내용이 들어가는 영역
  • 이 태그 영역은 다른 곳으로 배포하거나 재사용이 가능
  • 검색 로봇은 이 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식

<aside> </aside>

• 사이드 바 라고 부름
• 본문 외의 기타내용을 담고 있는 영역
• 주로 광고를 달거나 링크모음 등을 표현

<footer> </footer>

-> 웹 페이지의 맨 아래쪽에 위치하며, 회사소개, 저작권, 연락처(<address>태그) 등의 정보 표시
-> <footer>에는 <header>,<section>,<article> 등 다른 레아아웃 사용 가능