DTR web

HTML

인코딩과 lang
head 초기화
HTML 구조
HTML 태그
HTML5 API

# 인코딩과 doctype

기본 UTF-8 인코딩과 HTML5 DOCTYPE을 사용한다.
html에 language 선언도 필요하다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

# head초기화

SNS 공유와 반응형웹 전용 head

<head>
	<meta charset="UTF-8">
	<title>Webwiki Coding Guide</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="apple-mobile-web-app-title" content="">
	<meta name="keywords" content="키워드">
	<meta name="description" content="설명">
	<meta name="author" content="저자">
	<meta property="og:title" content="페이스북 공유 타이틀">
	<meta property="og:url" content="페이스북 공유 URL">
	<meta property="og:image" content="페이스북 공유 이미지">
	<meta property="og:description" content="페이스북 공유 설명">
	<meta name="twitter:card" content="트위터 카드 종류">
	<meta name="twitter:title" content="트위터 카드 제목">
	<meta name="twitter:url" content="트위터 카드 URL">
	<meta name="twitter:image" content="트위터 카드 이미지">
	<meta name="twitter:description" content="트위터 카드 설명">
	<!-- <meta name="viewport" content="width=960"> 일반웹용 뷰포트-->
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<meta name="format-detection" content="no">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="apple-touch-icon" href="icon.png">	
	<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="common/js/placeholder.min.js"></script>
	<script type="text/javascript" src="common/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="common/js/common.js"></script>
	<link rel="stylesheet" href="common/css/common.css">
	<link rel="stylesheet" href="common/css/design.css">
	<link rel="stylesheet" href="common/css/responsive.css">
	<!--[if lt IE 9]>
	<script src="common/js/html5shiv.min.js"></script>
	<![endif]-->
</head>

# HTML 구조

아래와 같은 기본 마크업 구조를 가진다.
HTML5 태그를 사용하며 구버전 브라우저를 위해 html5shiv를 사용한다.

<html lang="ko">
	<head>
		<!--[if lt IE 9]>
		<script src="common/js/html5shiv.min.js"></script>
		<![endif]-->
	</head>
	<body>
	<div id="wrap">
		<header id="header"></header>
		<div id="container"></div>
		<footer id="footer"></footer>
	</div>
	</body>
</html>

# HTML5 태그

html5에 새로 추가된 태그들

<header>

머리말을 나타낸다.
가까운 섹셔닝 태그의 머리말이 될 수도 있고, 루트 태그의 머리말이 될 수도 있다.
주로 타이틀과 네이게이션을 나타낸다.

<footer>

꼬리말을 나타낸다.
가까운 섹셔닝 태그의 꼬리말이 될 수도 있고, 루트 태그의 꼬리말이 될 수도 있다.
주로 주소정보나 저작권정보를 나타낸다.

<section>

문서의 절을 의미한다.
주제에 따라 나뉜다.
논리적인 마크업을 위해 헤딩태그를 포함한다.

<section>
	<h2>HTML5의 특징들을 알아보자.</h2>
	<article>
		<h3>시멘틱 태그 제공</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, eum.
		</p>
	</article>
	<article>
		<h3>API 제공</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, facere sapiente optio.
		</p>
	</article>
</section>

<article>

독립적이다.
재사용이 가능하고 완성된 요소이다.
논리적인 마크업을 위해 헤딩태그를 포함한다.

<nav>

네비게이션 역할을 하는 링크 그룹을 담당한다.
논리적인 마크업을 위해 헤딩태그를 포함한다.

<header>
	<h1>HTML5</h1>
	<nav>
		<a href="#html5">HTML5</a>
		<a href="#html5api">API</a>
		<a href="#html5tag">TAG</a>
	</nav>
</header>

<aside>

페이지의 내용과 관련이 적은 내용을 나타낸다.
주로 광고나 관련글,관련댓글을 포함한다.
논리적인 마크업을 위해 헤딩태그를 포함한다.

<main>

페이지당 한번만 쓰이고 핵심 주제나 기능을 의미한다.

<figure>

독립적이고 완성된 요소로서 삽화,도표,사진,코드 등을 포함한다.
처음 또는 마지막에 figcaption 태그가 올 수 있고,
figcaption 태그는 figure 태그안에서 한번만 사용할 수 있다.

<figcaption>

figure 태그로 삽입된 요소에 대한 설명이나 범례를 포함한다.

<video>

영상과 음성을 재생한다.
내장 컨트롤러와 플레이어를 사용한다.
미리보기 이미지나 컨트롤러 사용여부, 재생횟수등을 설정할 수 있다.

<audio>

음성을 재생한다. 내장 컨트롤러와 플레이어를 사용한다.

<source>

video나 audio 요소에 미디어 자원을 할당한다.

<video>
	<source src="video.mp4" type="video/mp4">
	<source src="video.wmv" type="video/wmv">
	<source src="video.webm" type="video/webm">
</video>

추가적으로 form 관련된 태그가 추가되었고, data,mark 등 제공하는 데이터에 따라 적용가능한 태그가 추가되었다.

# HTML5 API

Geolocation

HTML5를 지원하지는 지 확인하고 사용자의 위치를 구할 수 있다.
구글맵이나 네이버맵과 연동하여 지도에 표시하는 형태도 가능하다.

var x = document.getElementById("demo");

function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition,showError);
	} else {
		x.innerHTML = "Geolocation is not supported by this browser.";
	}
}
function showPosition(position) {
	x.innerHTML = "Latitude: " + position.coords.latitude + "Longitude: " + position.coords.longitude; 
}
function showError(error) {
	switch(error.code) {
		case error.PERMISSION_DENIED:
			alert('위치 정보를 사용할 수 없습니다');					        
			break;
		case error.POSITION_UNAVAILABLE:
			alert('위치 정보를 사용할 수 없습니다');
			break;
		case error.TIMEOUT:
			alert('위치 정보를 사용할 수 없습니다');					        
			break;
		case error.UNKNOWN_ERROR:
			alert('위치 정보를 사용할 수 없습니다');					        
			break;
	}
}

WEB Storage

웹 스토리지는 브라우저 내에서 데이터를 저장하며 서버로 데이터를 전송하지 않는다.
로컬 스토리지는 조정기간에 제약이 없고, 웹사이트의 도메인에 따라서 생성된다.
세션 스토리지는 브라우저에 따라 유효범위와 생존기간을 갖는다.
따라서 브라우저가 닫히면 세션 스토리지도 같이 삭제된다.
일반적인 객체의 형태로 저장/출력/삭제가 가능하다.

WEB Storabe 지원 여부 확인

if(typeof(Storage) !== "undefined") {
	// Code for localStorage/sessionStorage.
} else {
	// Sorry! No Web Storage support..
}

로컬 스토리지 저장/출력/삭제

// Store
localStorage.lastname = "Smith";
localStorage.setItem('lastname','Smith');
locaStorage["lastname"] = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
document.getElementById("result").innerHTML = localStorage["lastname"];
// Remove
localStorage.removeItem("lastname");
delete localStorage.lastname;
delete localStorage["lastname"];
// 세션 스토리지는 sessionStorage로 사용한다.