HTML5 기본 레이아웃
오늘부터 HTML5에 대해 조금씩 다뤄 보도록 하겠습니다.
▶HTML4 기본 레이아웃
HTML4까지 기본적인 레이아웃을 만들려면 이렇게 작성했습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">/*1*/
<html lang="ko">
<head>
<title>HTML4</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">/*2*/
<style> CSS 스타일</style>
</head>
<body>
<div id="header"> 머릿부분(페이지 제목 등)</div>
<div id="menu">메뉴</div>
<div id="contents">본문 내용</div>
<div id="footer">꼬리말(저작권 정보 등)</div>
</body>
</html>
1. HTML4의 DOCTYPE 선언
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
2. HTML4의 문자 부호화 방식
레이아웃을 만들 때 보통 div를 만들고 고유 id를 부여해 스타일을 주었습니다.
▶HTML5에서는 이렇게 바뀝니다.
<!DOCTYPE html>/*1*/
<html lang="ko">
<head>
<title>HTML5</title>
<meta charset="utf-8">/*2*/
<!--[if lt IE 9]> /*3*/
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>CSS 스타일 </style>
</head>
<body>
<header> 머릿부분(페이지 제목 등) </header>
<nav> 메뉴</nav>
<section> 본문 내용 </section>
<footer>꼬리말(저작권 정보 등)</footer>
</body>
</html>
1. HTML5의 DOCTYPE 선언
2. HTML5의 문자 부호화 방식
3. IE9 이하 버전에서 HTML5에 대응하기 위한 자바스크립트
html5shiv 삽입하기 (ie6-8에서 html5 적용하기)
<div id="header"> 대신에 <header>
<div id="menu"> 대신에 <nav>
<div id="contents"> 대신에 <section>
<div id="footer"> 대신에 <footer>요소를 사용했습니다.
이들 요소는 모두 html5에 새로 도입된 의미적인 요소(sematic element)입니다.
▶HTML5 의미적 요소
semantic의 뜻은 '의미의' '의미론적인' 입니다.
div, span 같은 비의미적인 요소는 내용에 대해 아무것도 말해주는 것이 없지만
img는 이미지를 담고, table은 데이터가 들어가 표를 담고, form의 양식을 담고 있다는 점에서,
태그 자체에 의미를 담고 있습니다.
검색 엔진은 의미적인 요소를 토대로 정보를 분석하고 결과물을 추출합니다.
HTML5의 새로운 의미적 요소는 다음과 같습니다.
header
nav
section
article
aside
footer
main
mark
summary
time
details
figcaption
figure
이미지 출처: http://www.w3schools.com/html/html5_semantic_elements.asp
이제 레이아웃을 만들 때 태그 작성이 좀 더 간결해졌습니다.
또 누가 보더라도 헤더와, 본문, 사이드바, 푸터 를 쉽게 구분 할 수 있게 되었습니다.
다음 시간부터터 각 요소에 대해 하나씩 알아보겠습니다~
▶ TIP
(언어 선언은 스크린 리더나, 검색 엔진에 중요함)
또 html, body를 생략하면 DOM과 XML 소프트웨어와 충돌할 수 있고,
body를 생략할 경우 ie9에서 에러를 일으킬 수 있습니다.
* HTML5 표준에서는 <head> 역시 생략할 수 있습니다
기본값으로, 브라우저는 body 앞 모든 요소에 head 요소를 추가합니다.
* HTML5에서 <title> 요소는 필수입니다. 타이틀은 되도록 의미 있게 만듭니다.
* 문서의 언어와 문자 부호화 방식은 가능한한 초반에 규정 합니다.
브라우저가 문서를 올바로 렌더링히고, 검색 엔진이 색인을 만들 때 적절히 할 수 있도록이요
예
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)
head 에 들어가는 태그 (title, style, script, meta 태그)
CSS란? (HTML과 CSS의 차이, CSS 작성법)
'html' 카테고리의 다른 글
| [html5] header 태그 (1) | 2015.01.02 |
|---|---|
| [html5] article vs section 차이 (2) | 2014.12.30 |
| IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법) (2) | 2014.12.19 |
| html5shiv 삽입하기 (ie6-8에서 html5 적용하기) (0) | 2014.12.18 |
| [html] meta 태그 사용법 (7) | 2014.12.17 |
댓글