메뉴 건너뛰기


Developer > Web Application

HTML5 HTML5의 마크업

2013.11.13 11:05

푸우 조회 수:6292


1. HTML5 문서 선언


<!DOCTYPE html>


2. Charset 지정


<meta charset="utf-8">


3. 없어진 TAG


<basefont>, <big>, <center>, <font>, <strike>, <tt>, <u>, <frameset>, <frame>, <noframes>


4. 새로 생긴 TAG


<section> : 논리적으로 연관된 콘텐츠들을 포함

<nav> : 다른 페이지로의 링크를 나타냄(웹 사이트의 메뉴)

<article> : 독립적으로 재사용될 수 있는 문서의 일부(Component)를 나타냄)

<aside> : 중심 내용과 관련되어 있지만 분리될 수 있는 내용을 나타냄

<hgroup> : 섹션의 주제를 나타내는 것으로 h1~h6 엘리먼트를 그룹 지음

<header> : 섹션의 헤더를 나타냄

<footer> : 섹션의 푸터를 나타냄

<figure> : 스스로를 포함하는 콘텐츠 조각으로 일반적으로 메인 흐름에서 하나의 단일 구성 요소로 참조될 때 사용됨. 캡션을 나타내는 용도로 <figcaption> 엘리먼트 사용 가능


5. data 속성


TAG에 "data-"를 붙여 속성을 부여할 수 있습니다.


<div id="beverage" data-price="1000" data-amount="10">음료수</div>


사용할때는 다음과 같이 사용합니다.

var beveragePrice = document.getElementById('beverage').dataset.price;


HTML5 미지원 브라우저에서는 다음과 같이 사용하면 됩니다.

var beveragePrice = document.getElementById('beverage').getAttribute('data-price');