HTML#3
웹 표준
방대한 웹 자료와 모호한 표현의 웹페이지는 정확한 정보 검색을 어렵게 함, 이를 해결하기 위해서 규칙적이고 일관성 있는 정보의 표현과 문서의 구조화가 필요함
웹 표준: W3C(World Wide Web Consortium)에서 권고하는 웹 페이지 기술에 대한 표준안을 말함
웹 표준을 준수한 웹 페이지는 문서 구조 계층(ex. HTML5), 문서 표현 계층(ex. CSS3), 동작 계층(ex. PHP, JS 등)으로 분리하여 작성하고 이들을 상호 연계하여 운영
웹 표준이 필요한 이유는 다음과 같음:
1. 크로스 브라우징 실현(다양한 운영체제와 브라우저에서 동일한 웹페이지가 보이도록 함)
2. 코딩의 단순화 실현(역할에 따라 계층을 나누어 각각의 문서 작성)
3. 가독성 향상, 로딩 속도 향상
4. 유지보수의 간편화, 개발자와 디자이너 협업 가능
시맨틱 웹
시맨틱 웹(semantic web): 웹페이지에서 사람이 인식하는 정보를 기계가 이해할 수 있도록 하는 컴퓨터 기술을 말함
시맨틱 웹을 실현하기 위해서는 메타 데이터(기계가 읽고 이해할 수 있는 설명 정보)를 웹 페이지가 표함하고 웹 표준을 준수하는 문서 표현과 구조를 가져야 함
목적: 기존 웹을 확장하여 사람과 컴퓨터 간의 효과적인 협력 체제를 구축하고, 사용자를 대신해 지능형 로봇 프로그램이 정보의 의미를 파악하고 실행, 메타 데이터를 기술해 정보에 대한 자동화된 접근성을 높여 정보를 효과적으로 공유하고 전달
HTML은 시맨틱 웹 페이지라고도 불림 - 웹 표준 준수, 시맨틱 표현 요소(address, mark, meter, time 등) 다수 존재, 웹 페이지 레이아웃을 위한 시맨틱 문서 구조 요소가 추가되어 의미가 부여된 웹 페이지 형성 가능
HTML5 시맨틱 문서 구조
예시는 위와 같다. 웹 페이지를 용도에 따라 구분 짓는 것이다.
1. header
- 웹 페이지의 본문 전체나 각 섹션의 머리글을 정의하는 문서 구조 태그
- 웹 페이지에 대한 소개, 네비게이션 메뉴 모음, 주요 로고 이미지 등과 헤딩 요소(Hn, hgroup) 포함
=> hgroup: 섹션 제목이 여러 계층일 때 대제목과 부제목, 소제목을 묶어 그룹화하는 문서 구조 태그
2. footer
- 웹 페이지의 본문 전체나 각 섹션의 바닥글을 정의하는 문서 구조 태그
- 저자, 저작권 정보, 연락처, 관련 문서로의 링크 등을 포함
- 바닥글이라고 항상 마지막에 존재하는 것은 아님
3. section
- 문서의 구조를 의미에 맞게 구성하는 기능
=> article: 문서 내에서 독립된 글을 표현하는 영역
=> aside: 문서의 주요 내용과 관련성이 낮은 보조 내용을 표현하는 영역
=> nav: 네비게이션 요소를 표현하는 영역
=> section: 실제 본문 주제에 해당하는 내용을 표현하는 영역
위와 같이 구조화 한다고 생각하고 HTML 시맨틱 문서 구조를 작성한 코드는 아래와 같음
<body>
<header>
<hgroup>
<h1> Semantic Structure</h1>
<h2> HTML5 섹션 </h2>
</hgroup>
</header>
<hr />
<nav>
<h1> navigation 영역 </h1>
웹 페이지의 주요 메뉴 부분이 위치하는 영역이다.
</nav>
<article>
<h1> article 영역 </h1>
문서 내의 독립적인 글을 작성하는 영역이다.
</article>
<section>
<h1> section 영역 </h1>
문서의 중요한 본문을 작성하는 영역이다.
</section>
<hr />
<footer> footer 영역 </footer>
</body>
구조화 했던 그림과 같이 세로로 세 영역(article, aside, section)을 나누어 사용하려면 CSS단에서 레이아웃 스타일을 적용해야 함
'Programming > Web Programming' 카테고리의 다른 글
| JavaScript Basic #1 (0) | 2017.07.13 |
|---|---|
| CSS #2 (0) | 2017.07.12 |
| CSS #1 (0) | 2017.07.12 |
| HTML Basic #2 (0) | 2017.07.08 |
| HTML Basic (0) | 2017.07.05 |
