HTML5 기본 레이아웃

 

 

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의 문자 부호화 방식

 

[html] meta 태그 사용법

 

 

레이아웃을 만들 때 보통 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

 

* HTML5 표준에서는 <html> <body> 태그를 생략해도 유효합니다.

 

하지만 <html>요소에서 페이지 언어를 지정하므로 생략을 절대 권하지는 않습니다

 

(언어 선언은 스크린 리더나, 검색 엔진에 중요함)

 

또 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>

 

참조 사이트 : http://www.w3schools.com/html/html5_syntax.asp

 

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

 

head 에 들어가는 태그 (title, style, script, meta 태그)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

지구별에
html 2014.12.24 11:37
Powerd by Tistory, designed by criuce