페이지구조 / 시멘틱

1 페이지구조 / 시멘틱
1.1 페이지 영역분할 태그
- <div></div> : block형식의 공간을 분할(수직으로 공간분할)
- <span></span> : inline형식의 공간을 분할(수평으로 공간분할)

1.2 HTML4 페이지 구조
: HTML4에서 페이지 구조는 <div>, <span>태그를 이용, 구역을 설정하고 거기에 id값을 넣어서 구분

단점
- 사용자 마다 id값을 다르게 부여하여 구조를 이해하는데 어려움
- 구조가 파악이 어려워 차후 유지 보수에 어려움이 있음
- 검색엔진이 웹소스를 확인할때도 메뉴, 본문을 구별이 어려움
- 다양한 기기에서 이해하기에 구조가 복잡함

- HTML4 페이지구조

- 소스구조 예시

<div id="header">
    내용
</div>
<div id="content">
    내용
</div>
<div id="footer">
    내용
</div>

1.3 시맨틱 태그(semantic)
: 페이지 구조를 특정 기능에 맞는 태그를 사용하여 구분
페이지 구조를 쉽게 파악하고 좀더 정확한 정보를 검색할 수 있게 함

2 HTML5 페이지 구조
2.1 웹 접근성
: 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

장애유형		특징	보완대책
시작장애	전맹	모니터를 볼 수 없음	스크린리더
	저시력	모니터 사용 일부가능	화면확대 / 고대비
	색맹	색을 구별할 수 없음	색상에만 의존하지 않기 / 고대비
청각장애		사운드 오디오등을 청취 불가	수화, 시각정보(동영상) 제공
지체장애	상시장애	손을 사용할 수 없음	마우스 대체방법, 키보드만 사용
	기타	움직임이 어려움	충분한 시간제공
언어장애		복잡한 용어, 어려운 용어의 이해 불가능	쉬운용어 사용

소스구조 예

<header>
    <h1>제목</h1>
    <nav><a></a></nav>
</header>
<section>
    <article>"컨텐츠 내용"</article>
    <article>"컨텐츠 내용"</article>
</section>
<footer>
    사업번호, 사업자주소, 연락처, 저작권, 링크모듬
</footer>

태그이름	설명
<header></header>	특정부분의 머리말로 주로 검색어(form), 메뉴(nav)를 넣는다.
<nav></nav>	- 다른 사이트나 페이지로 이동하는 태그를 모아 놓은 태그(내비게이션) - 특정태그에 종속되지 않고 어느곳에서나 사용할 수 있음 - 주로 메뉴, footer의 사이트 링크 모음에 많이 쓰임
<section></section>	- 웹 문서에서 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을때 사용 - <section>태그안에 <section>태그를 넣을 수 있음 - 주제별로 article을 묶어주는 태그
<article></article>	- 웹 페이지의 내용이 들어가는 영역 - 이 태그영역은 다른 곳으로 배포하거나 재사용가능 - 검색로봇은 이 태그가 사용된 컨텐츠는 배포할 수 있는 컨텐츠로 인식
<aside></aside>	- 사이드 바라고 불림 - 본문 외의 기타 내용을 담고 있는 영역
<footer></footer>	- 웹 페이지의 맨 아래쪽에 위치하며, 회사소개, 저작권, 연락처(<address>태그)등의 정보표시 - <footer>에는 <header>, <section>, <article>등 다른 레이아웃 사용가능

태그이름	설명	속성
<iframe></iframe>	웹 문서안에 다른 웹페이지를 추가하는 태그	width / height	페이지의 크기 설정
		name	인라인 프레임의 이름
		src	페이지의 경로
		seamless	태그의 테두리를 없애는 속성

작성

<div class="content">
    <iframe width="크기" height="크기" src="경로"[seamless]>
</div>