Html5 소개 가이드

HTML5 소개

2012-10-06박종현

목 차

1. HTML5 소개2. HTML5 의 새로운 요소 (Elements)

3. HTML5 캔버스 (Canvas)

4. HTML5 인라인 SVG

5. HTML5 비디오6. HTML5 비디오 + DOM

7. HTML5 오디오8. HTML5 드래그와 드롭9. HTML5 지오로케이션 (Geolocation)

10. HTML5 입력 타입들11. HTML5 폼 ( 요소 , 속성 )

12. HTML5 웹 저장소13. HTML5 웹 응용프로그램 캐시14. HTML5 웹 워커15. HTML5 SSE

HTML5 소개

1. HTML5 는 무엇인가 ?– HTML 의 새로운 표준 (HTML 4.01 은 이전 버전임 )

– 여러 메이저 브라우저 회사들이 HTML5 와 API 를 지원함

2. HTML5 를 어떻게 시작할 것인가 ?– HTML5 는 W3C 와 WHATWG 의 협력으로 탄생

– HTML5 에 대한 규칙을 제정함에 있어 논의된 규칙• 새로운 특징들은 HTML, CSS DOM 그리고 Javascript 에 기초해야 함 .

• 플래시와 같은 외부 플러그 인을 줄이자 !

• 에러 핸들링이 더 보강되어야 한다 .

• 스크립팅 을 대체하는 마크업이 있어야 한다 .

• HTML5 는 디바이스에 독립적이어야 한다 .

• 개발 절차는 공개적이고 가시적이어야 한다 .

1. HTML5 소개

3. HTML5 <!DOCTYPE>– HTML5 에서는 <!DOTYPE> 만 선언 가능

4. 최소한의 HTML5 문서 구조

1. HTML5 소개

<!DOCTYPE html><html> <head> <title> 문서의 제목 </title> </head>

<body> 문서의 내용 ...... </body></html>

5. HTML5 의 새로운 특징– 2D 드로윙을 위한 <canvas> 요소

– 미디어 플레이백을 위한 <video> 와 <audio> 요소

– 로컬 저장소 지원

– 새로운 컨텐츠 지정 요소• <article>, <footer>, <header>, <nav>, <section>

– form 컨트롤• calendar, data, time, email, url, search

6. HTML5 를 지원하는 브라우저– 현재 모든 특징을 지원하는 브라우저는 없음

– 하지만 모든 중요한 브라우저가 새로운 HTML5 특징을 지속적으로 추가하는 중임 .

1. HTML5 소개

HTML5 의 새로운 요소(Element)

1. HTML5 내 새로운 요소 (Element)– HTML4.01 버전에서 사용해선 안되는 요소 (element) 와 고의적으로 사용하지 않는 요소를

고려

– 오늘날의 인터넷 환경에서 사용하기 위해 더 나은 구조 , 폼 , 미디어 컨텐츠를 고려

2. 새로운 시멘틱 (Semantic) 구조 요소들 (Elements)– 더 나은 구조를 위해 새로운 요소를 제공함

– 새로운 요소 리스트는 다음 장에서 제공

2. HTML5 의 새로운 요소 (Element)

2. HTML5 의 새로운 요소 (Elements)

테그 정의<article> 아티클을 정의한다 .

<aside> 페이지 콘텐트 외의 콘텐트를 정의한다 .

<bdi> 다른 텍스트 외부로 부터 한가지 다른 지시 내에서 초기화된 텍스트의 한 부분을 격리시킨다 .

<command> 사용자가 호출할 수 있는 하나의 커맨드 버튼을 정의한다 .

<details> 사용자가 보거나 숨길 수 있는 추가적인 디테일을 정의한다 .

<summary> 하나의 <details> 엘리먼트에 대해 눈에 보이는 타이틀을 정의<figure> 일러스트 , 다이어그램 , 사진 , 코드 리스트 등과 같은 자신이 포함한 콘텐트를 정의한다 .

<figcaption> <figure> 엘리먼트를 위한 캡션을 정의<footer> 문서나 섹션의 푸터를 정의<header> 문서나 섹션의 헤더를 정의 <hgroup> 타이틀이 다중 레벨을 가질 때 <h1> 에서 <h6> 엘리먼트를 위한 하나의 집합 그룹<mark> 표시되거나 하일라이트 되는 텍스트를 정의<meter> 알려진 범위 내에서 스칼라 측량을 정의 ( 게이지 )

<nav> 네비게이션 링크를 정의<progress> 작업 절차를 재표현<ruby> 루비 표기를 정의 ( 동아시아 문자에 대해 )

<rt> 문자의 설명 / 발음을 정의 ( 동아시아 문자에 대해 )

<rp> 루비 표기를 지원하지 않는 브라우저에 무엇인가를 보여줄 때 정의<section> 문서내 하나의 섹션을 정의<time> 하나의 날짜 / 시간을 정의<wbr> 가능한 라인 - 브레이크 정의

3. 새로운 미디어 요소– HTML5 는 미디어 콘텐츠를 위한 새로운 요소를 제공

4. 새로운 <canvas> 요소


테그 정의<audio> 사운드 콘텐트를 정의

<video> 비디오나 영화를 정의

<source> <video> 와 <audio> 에 대한 다중 미디어 자원을 정의

<embed> 외부 응용 프로그램이나 인터렉티브 콘텐트에 대한 하나의 컨테이너를 정의 ( 하나의 플러그인 )

<track> <video> 와 <audio> 를 위한 텍스트 트랙을 정의

테그 정의

<canvas> 그래픽을 그릴 때 사용 ( 대게는 자바스크립트 )

5. 새로운 Form 요소– HTML5 는 더 많은 기능을 위해 새로운 Form 요소를 제공

6. 삭제된 요소– 다음의 HTML4.01 요소는 HTML5 에서 삭제됨

• <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>,

<frameset>, <noframes>, <strike>, <tt>


테그 정의<datalist> 입력 컨트롤을 위해 사전 정의된 옵션의 리스트를 특징 짓는다 .

<keygen> 하나의 키 - 쌍 추가 필드를 정의 (forms 을 위해 )

<output> 계산 결과를 정의

캔버스(Canvas)

• 웹에서 그림을 그릴 때 사용

• 빨간 사각형 , 그라디언트 사각형 , 다중 색상 사각형 등과 같은 모형이나 다중 색상 글자와 같은 것을 그릴 수 있음

1. 캔버스란 무엇인가 ?– 자바스크립트와 같은 스크립팅을 통해 그림을 그릴 때 사용

– <canvas> 요소는 그래픽에 대해 하나의 컨테이너임 .

– 패스 , 박스 , 원 , 문자 그리고 이미지 추가와 같은 그리기를 위한 몇 가지 메서드를 가짐 .

2. 지원 브라우저– IE9, 파이어폭스 , 크롬 , 사파리 , 오페라를 지원

3. 캔버스 (Canvas)

3. 캔버스 생성– 직사각형의 영역 , <canvas> 요소로 지정

– 기본적으로 컨텐츠와 테두리가 없음

– 스크립트 참조를 위해 항상 요소의 id 를 지정해야 함

– 높이와 넓이를 반드시 지정해야 함

– 테두리 추가는 스타일시트를 이용해 지정 가능


<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

– 자바스크립트로 캔버스에 그림 그리기

– 코드설명• 캔버스 요소를 찾는다 .

• getContext() 메서드 호출

• 필요한 메서드를 이용해 패스 , 박스 , 원 , 이미지 , 문자 등을 그린다 .

• fillStyle 속성을 이용해 CSS색상 , 그라디언트 , 패턴을 그림

– 기본적인 fillStyle은 검은색 이다 .

• fillRect(x, y, width, height) 메서드는 현재의 fillStyle로 사각형을 그림


<script type="text/javascript">

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

< /script>

4. 캔버스 좌표– 캔버스는 2 차원 그리드임

– 캔버스의 상위 - 왼쪽 좌표는 (0,0)

– fillRect(0,0,150,75) 의 의미는 ?

• 상단 왼쪽 코너 (0,0) 에서 시작해 150 x 75 픽셀 사각형을 그림

5. 캔버스 패스– 직선을 그리는 메서드

• moveTo(x, y) : 시작점

• lineTo(x, y) : 끝점

• stroke() : “ink” 메서드 중의 하나

– 원을 그리는 메서드• arc(x, y, r, start, stop)

• stroke() 나 fill() 중 하나를 사용


– 직선을 그리는 코드의 예

– 원을 그리는 코드의 예




ctx.moveTo(0,0);

ctx.lineTo(300,150);

ctx.stroke();



ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

6. 캔버스 텍스트– 텍스트를 그리기 위한 중요한 속성과 메서드

• 텍스트에 대한 폰트 속성을 정의– font

• 캔버스에 “ filled” 텍스트를 그린다 .

– fillText(text, x, y)

• 캔버스에 텍스트를 그린다 .(no fill)

– strokeText(text, x, y)

– 예제 : 캔버스에 폰트 “ arial” 을 사용하는 높이 30px 의 채어진 (filled) 텍스트를 작성하는 코드를 작성해라 . ( 코드는 다음장에… )


– fillText() 메서드 사용 예

– strokeText() 메서드 사용 예




ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);



ctx.font="30px Arial";

ctx.strokeText("Hello World",10,50);

7. 캔버스 그라디언트– 채어진 (filled) 사각형 , 원 , 선 , 텍스트에 사용 가능

– 캔버스가 가지는 여러가지 모양의 색은 고정적이지 않음 (변경이 가능 )

– 2 개의 그라디언트 타입 메서드를 가짐

• 직선 모양의 그라디언트 생성

– createLinearGradient(x, y, x1, y1)

• 방사 / 원 모양의 그라디언트 생성

– createRadialGradient(x, y, r, x1, y1)

– Stop 이란 ?

• 그라디언트 컬러 포지션 (0 과 1 사이 )

• 여러가지 색을 지정할 때 필요

• addColorStop() 메서드를 사용

– fillStyle 과 strokeStyle 설정이 가능


– 예시

• createLinearGradient() 메서드를 이용해 사각형을 그리고 그라디언트로 채워라




// Create gradient

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// Fill with gradient

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

8. 캔버스 이미지– 캔버스에 이미지를 그리는 메서드

• drawImage(image, x, y)

– 캔버스에 대한 자세한 정보는 아래의 주소에서 확인

• http://www.w3schools.com/tags/ref_canvas.asp




var img=document.getElementById("scream");

ctx.drawImage(img,10,10);

HTML5 Inline SVG

1. SVG란 무엇인가?

– 가변 벡터 그래픽

– 웹을 위한 벡터 기반 그래픽을 정의하기 위해 사용

– XML 형태로 그래픽을 정의

– 확대 /축소 , 크기 변경에 퀄리티 저하가 없음

– SVG 파일내 모든 엘리먼트와 모든 속성이 있음

– W3C 권고

2. SVG 이점– 어떤 텍스트 에디터에서든 생성 /수정이 가능

– 검색 /인덱스 , 압축이 가능

– 가변적

– 어떤 해상도에서든 높은 퀄리티를 출력

– 확대 가능

4. HTML5 Inline SVG

3. 지원 브라우저– IE9, FF, Opera, Safari, Chrome

4. SVG 예

4. HTML5 Inline SVG

<!DOCTYPE html>

< html>

< body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

<polygon points="100,10 40,180 190,60 10,60 160,180"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">

< /svg>

< /body>

< /html>

4. HTML5 Inline SVG

5. SVG 관련 참고 사이트– http://www.w3schools.com/svg/svg_reference.asp

6. SVG 와 Canvas 의 다른점– SVG 는 XML 내 2D 그래픽을 정의하기 위한 언어

– Canvas 는 자바스크립트를 이용해 2D 그래픽을 그린다 .

– SVG 는 XML 기반 , SVG DOM 내에 이용 가능한 엘리먼트가 있다는 의미 ,

자바스크립트로 엘리먼트 핸들링이 가능

– SVG 객체의 속성을 변경하면 자동적으로 브라우저가 다시 렌더링됨

– Canvas 는 픽셀 by 픽셀로 다시 렌더됨

• Canvas 는 그린 그림을 브라우저가 기억하지 못함

• 포지션 변경시 전체를 다시 그림

4. HTML5 Inline SVG

7. SVG 와 Canvas 비교

CANVAS SVG

해상도에 의존한다 . 해상도에 독립적이다 .

이벤트 핸들러를 지원하지 않는다 . 이벤트 핸들러를 지원한다 .

간단한 텍스트 렌더링 이용이 가능하다 . 커다란 렌더링 영역은 응용 프로그램에게 있어 최고의 선택이다 .

.png, .jp 와 같은 이미지 결과를 저장할 수 있다 . 복잡하면 렌더링이 느리다 .(DOM 의 증가 )

게임과 같은 것에 최적 게임 응용 프로그램에 최적이지 않다 .

HTML5 비디오

5. HTML5 비디오

• 많은 최신의 현대적인 웹 사이트들은 비디오를 유저에게 제공함

• HTML5 는 이러한 비디오를 보여주기 위한 하나의 표준을 제공함

1. 웹에서의 비디오– 웹에서 비디오 / 오디오를 제공하기 위한 표준이 존재하지 않았음

– 이것들을 제공하기 위해 하나의 플러그인이 필요함 (Flash 와 같은 )

• 서로 다른 브라우저는 서로 다른 플러그인이 필요함

2. 지원 브라우저– IE9, FF, Opera, Chrome, Safari

• IE8 과 그 이전 버전은 <video> 요소를 제공하지 않음

5. HTML5 비디오

3. HTML5 비디오 – 작업은 어떻게 ?– 비디오를 보여주기 위해선 아래의 모든 것이 필요 ( 다음장 코드 참조 )

– 컨트롤의 속성은 플레이 , 멈춤 , 볼륨과 같은 컨트롤을 추가한다 .

– 컨트롤의 속성은 높이와 넓이를 포함한다 . (반드시 설정 )

– <video> 와 </video> 사이에 글자 포함 ( 지원하지 않는 브라우저를 위해 )

– <video> 요소는 여러 개의 <source> 요소를 지원함

– 브라우저는 공인된 포맷을 사용함

<!DOCTYPE html>

< html>

< body>

<video width="320" height="240" controls="controls">

<source src="movie.mp4" type="video/mp4" />

<source src="movie.ogg" type="video/ogg" />

Your browser does not support the video tag.

</video>

< /svg>

< /body>

< /html>

5. HTML5 비디오

• 웹에서 비디오를 출력하는데 필요한 예제 코드

5. HTML5 비디오

4. 비디오 포맷과 브라우저 지원– 지원되는 비디오 포맷 3 가지 : MP4, WebM, Ogg

– MP4: H264 비디오 코덱과 AAC 오디오 코덱으로써의 MPEG4 파일들

– WebM: VP8 비디오 코덱과 Voribs 오디오 코덱으로써의 WebM 파일들

– Ogg: Theora 비디오 코덱과 Voribs 오디오 코덱으로써의 Ogg 파일들

Browser MP4 WebM OggInternet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES

5. HTML5 비디오

5. HTML5 비디오 테그들

테그 정의

<video> 비디오나 무비를 정의

<source> <video> 와 <audio> 와 같은 미디어 엘리먼트에 대한 다중 미디어 리소스를 정의

<track> 미디어 플레이어내 텍스트 트랙을 정의

HTML5 비디오 +DOM

6. HTML5 비디오 +DOM

1. HTML<video> - DOM 을 사용하는 컨트롤 취하기– HTML5<video> 요소는 메서드 , 속성 , 이벤트를 가질 수 있다 .

• 메서드 : 플레이 , 멈추기 , 로딩과 같은 메서드들

• 속성 : 지속 , 볼륨 , 찾기 등에 대한 읽기 및 설정

– <video> 요소에 대해 플레이하거나 멈추거나 끝날 때 알림을 할 수 있는 DOM 이벤트

– 예제코드

<!DOCTYPE html>

<html>

<body>

<div style="text-align:center">

<button onclick="playPause()">Play/Pause</button>

<button onclick="makeBig()">Big</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

<br />

<video id="video1" width="420">

<source src="mov_bbb.mp4" type="video/mp4" />

<source src="mov_bbb.ogg" type="video/ogg" />

Your browser does not support HTML5 video.

</video>

</div>

<script>

var myVideo=document.getElementById("video1");

function playPause()

{

if (myVideo.paused)

myVideo.play();

else

myVideo.pause();

}

6. HTML5 비디오 +DOM

2. HTML<video> - 메서드 , 속성 그리고 이벤트– 대부분의 브라우저는 아래 테이블 리스트에 있는 메서드 , 속성 , 그리고 이벤트를 지원한다 .

– 주의 : 비디오 넓이와 높이는 바로 설정이 가능하다 . 하지만 다른 속성들은 비디오의 메타 데이터가 로드된 이후에 이용이 가능하다 .

메서드 속성 이벤트play() currentSrc play

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight error

duration timeupdate

ended ended

error abort

paused empty

muted emptied

seeking waiting

volume loadedmetadata

height

width

HTML5 오디오

7. HTML5 오디오

– HTML5 는 오디오 파일을 플레이하기 위한 표준을 제공

1. 웹상에서의 오디오– 현재까지는 웹 상에서 오디오를 플레이하기 위한 표준이 존재하지 않았음

– 오늘날 대부분의 오디오 파일은 플래시와 같은 플러그인을 통해 플레이 됨

– 다른 브라우저는 또 다른 플러그인을 사용해야 함

– HTML5 는 웹 상에서 오디오 파일을 플레이 하기 위한 <audio> 요소를 표준 지원함

2. 지원 브라우저– IE9, FF, Safari, Chrome, Opera

– Audio 파일을 플레이 하기 위한 예제 코드

<audio controls="controls">

<source src="horse.ogg" type="audio/ogg" />

<source src="horse.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

7. HTML5 오디오

– 컨트롤 속성으로 플레이 (Play), 멈춤 (Pause), 그리고 볼륨 (Volumn) 을 추가할 수 있다 .

– <audio> 요소를 지원하지 않는 브라우저를 위해 <audio> 와 </audio> 테그 사이에 텍스를 추가할 수 있다 .

3. Audio 포맷과 지원 브라우저– <audio> 요소는 3 개의 파일 포맷을 지원한다 . MP3, Wav, Ogg

– HTML5 오디오 테그

Browser MP3 Wav Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES YES NO

Opera 10.6 NO YES YES

Tag Description

<audio> 사운드 컨텐트를 정의

<source> <video> and < audio> 처럼 media 요소에 다중 멀티 미디어 리소스를 정의

HTML5 드래그와 드롭

8. HTML5 드래그와 드롭

– 드래그와 드롭은 HTML5 표준의 한 부분이다 .

1. 드래그와 드롭– 드래그와 드롭은 공통 특징을 가지는데 하나의 객체를 붙잡고 다른 위치로 드래그한다는 것이다 .

– HTML5 에서 이것은 어떤 요소든 드래그 할 수 있는 표준의 한 부분이다 .

2. 지원 브라우저– IE9, FF, Opera 12, Chrome, Safari

3. HTML5 드래그와 드롭 예제– 다음장 예제를 참고

function drag( ev ){

ev.dataTransfer.setData("Text",ev.target.id);

}

function drop( ev ){

ev.preventDefault();

var data = ev.dataTransfer.getData( "Text“ );

ev.target.appendChild(document.getElementById( data ));

}

</script>

</head>

<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop( event )" ondragover="allowDrop(event)"></

div>

<br />

<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)“ width="336" height="69" />

</body>

</html>

• 언뜻 복잡해 보이지만 드래그와 드롭 이벤트를 통해 시작이 가능


4. 드래그 가능한 요소 만들기– 드래그 가능한 요소를 만들기 위해 draggable 속성에 true 를 설정한다 .

5. 드래그는 무엇으로 하는가 ? – ondragstart() 와 setData()– 요소가 드래그 될 때 어떤 것이 발생해야 하는가 ?

– 위의 예에서 ondragstart 어트리뷰트는 어떤 특정 데이터를 드래그 하기 위해 drag( event ) 라는 하나의 함수 (function) 를 호출한다 .

– dataTransfer.setData() 메서드는 데이터 타입과 드래그 된 데이터 값을 설정한다 .

– 이 케이스에서 데이터 타입은 텍스트 이고 , 값은 드래그 가능한 요소의 ID 이다 .

<img draggable="true" />

function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);}


6. 드롭은 어디에 ? - ondragover– 드래그된 데이터는 ondragover 이벤트에 의해 어디든 드롭이 가능

– 기본적으로 데이터 / 요소들은 다른 요소 내에 드롭될 수 없다 . 드롭을 허가하기 위해선 요소의 기본 핸들링을 막아야 함

– 이것을 위해 ondragover 이벤트를 위한 event.preventDefault() 메서드를 호출하면 됨

7. 드롭하기 - ondrop– 드래그된 데이터를 드롭할 때 드롭은 이벤트를 발생시킨다 .

– 위의 예에서 ondrop 어트리뷰트는 drop( event ) 함수를 호출한다 .

event.preventDefault()

function drop(ev) {

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}


– 코드설명

• 데이터를 기본적으로 핸들링 하기 위해 preventDefault() 를 호출한다 .

• dataTransfer.getData(“Text”) 메서드로 드래그된 데이터를 얻는다 .

• 이 메서드는 setData() 메서드내 같은 타입으로 설정되었던 어떤 데이터든지 반환할 것이다 .

• 드래그된 데이터는 드래그된 요소의 ID 이다 .

• 드래그된 요소는 드롭된 요소에 덧붙여진다 .

HTML5 Geolocaion

9. HTML5 Geolocation

1. 사용자의 포지션 위치– HTML5 Geolocation API 는 사용자의 지표 좌표를 얻기 위해 사용

– 사용자 개인이 선택해야 하며 사용자가 허락하기 전에는 사용할 수 없음

2. HTML5 – Geolocaion 사용하기– 사용자 포지션을 얻기 위해 getCurrentPosition() 메서드를 사용

– 아래의 코드는 사용자의 경도와 위도를 얻는 간단한 코드이다 .

– 코드 설명

• 지표 좌표가 지원된다면 체크

• 지원된다면 getCurrentPosition() 메서드를 실행 , 지원이 안되면 사용자에게 메시지 전달

• 만일 getCurrentPosition() 메서드가 성공적으로 실행되었다면 이것은 파라미터에 지정된 함수에 하나의 좌표 객체를 반환할 것이다 .

• showPosition() 함수는 경도와 위도를 보여주기 위한 것을 가져온다 .

• 다음 페이지의 예제는 기본적인 좌표를 얻기 위한 예제이고 오류 처리가 되어 있지 않다 .


3. 오류와 취소 핸들링– getCurrentPosition() 메서드의 두번째 파라미터는 오류를 제어하기 위해 사용

– 주로 사용자의 위치 정보를 가져오는데 실패할 경우 사용

function showError(error){ switch(error.code){ case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; }}

– 에러코드에 대한 설명

• Permission denied: 사용자가 위치 정보를 허락하지 않을 때

• Position unavailable: 현재 위치를 가져오지 못할 때

• Timeout: 운영타임오버

<script>

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

function getLocation() { if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="Geolocation is not supported by this browser."; }}

function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude +"<br>Longitude: " + position.coords.longitude;}

</script>


4. Map 안에 결과 전달하기– 하나의 지도에 결과를 출력하기 위해선 구글맵과 같은 경도와 위도를 사용할 수 있는 지도

서비스에 접속할 필요가 있다 .

– 코드 예

– 위의 예에서 우리는 스태틱 이미지를 사용하는 구글맵 내에 위치를 보여주기 위한 경도와 위도를 반환할 수 있다 .

function showPosition(position){ var latlon=position.coords.latitude+","+position.coords.longitude;

var img_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";}


5. 위치 - 지정 정보 (Location-Specific Information)– 이 페이지는 맵에 사용자의 위치를 보여주기 위해 어떻게 하는지에 관한 데모이다 .

– 지표 좌표는 위치 - 지정 정보에 매우 유용하다 .

– 예

• 지역정보 ( 날짜 등 )

• 사용자 근처의 흥미로운 포인트

• GPS

6. getCurrentPosition() 메서드 - 반환 데이터– getCurrentPosition() 메서드는 객체를 반환한다 .

– 위도 , 경도 그리고 정밀한 속성들이 항상 반환된다 .

– 만일 이용이 가능하다면 아래의 다른 속성들이 반환될 것이다 .


속성 정의coords.latitude 10 진수 위도coords.longitude 10 진수 경도coords.accuracy 포지션 정밀도coords.altitude 해발 (m)coords.altitudeAccurary 해발 정밀도coords.heading 북극점 기준으로 오른쪽 방향coords.speed 초당 미터 ( 속도 )timestamp date/time 응답


7. Geolocation 객체 - 다른 흥미로운 메서드들– watchPosition() - 현재 사용자의 포지션을 반환하고 사용자가 움직일 때 마다 지속적으로

포지션을 업데이트 하여 데이터를 반환

– clearWatch() - watchPosition() 메서드를 멈춘다 .

– 아래의 예제는 watchPosition() 메서드를 보여줌 (GPS 디바이스 ( 아이폰과 같은 ) 가 필요 )

<script>var x=document.getElementById("demo");function getLocation(){ if (navigator.geolocation){ navigator.geolocation.watchPosition(showPosition); } else{ x.innerHTML="Geolocation is not supported by this browser."; }}function showPosition(position){ x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;}</script>

HTML5 Input 타입들

10. HTML Input 타입들

1. HTML5 의 새로운 입력 타입들– HTML5 는 form 에 대한 몇 가지 새로운 입력 타입을 가진다 . 이들 새로운 몇 가지 특징은 입력 컨트롤과

검증을 더 낫게 한다 .

– 새로운 입력 타입들

• Color

• Date

• Datetime

• datetime – local

• Email

• Month

• Number

• Range

• Search

• Tel

• Time

• url

• week


2. Input Type: Color– Color 타입은 하나의 컬러를 포함해야만 하는 input 필드를 위해 사용되어진다 .

– 예제 : 컬러 picker 로 색상을 선택한다 .

– 지원브라우저 : 크롬 , 오페라

3. Input type: Date– date type 은 날짜를 선택해야만 하는 경우에 사용한다 .

– 예제 : 하나의 데이터 컨트롤을 정의

– 지원브라우저 : 크롬 , 사파리 , 오페라

Select your favorite color: <input type="color" name="favcolor">

Birthday: <input type="date" name="bday">


4. Input type: datetime– datetime-local 타입은 시간과 날짜를 선택하기 위해 사용한다 .

– date 와 time 컨트롤을 정의

– 지원 브라우저 : 크롬 , 사파리 , 오페라

– 예제코드

5. Input type: email– email 타입은 input 필드에 e-mail 주소가 포함될 때에만 사용된다 .

– e-mail 주소를 위해 하나의 필드를 정의한다 .( 전송될 때 자동적으로 유효성을 검증 )

– 지원 브라우저 : 파이어폭스 , 크롬 , 오페라

– 예제코드

Birthday (date and time): <input type="datetime-local" name="bdaytime">

E-mail: <input type="email" name="usremail">


6. Input type: month– month 타입은 년 /월 선택을 사용자에게 허가한다 .

– 년 /월을 정의 ( 타임존을 고려하진 않음 )

– 지원되는 브라우저 : Chrome, Safari, Opera

– 예제코드

7. Input type: number– 타입은 숫자값을 포함해야만 하는 입력 필드에 사용된다 .

– 어떤 숫자만 취할 것인지에 대한 제약 조건을 설정할 수 있다 .

– 하나의 숫자 필드를 정의

– 아래와 같은 특정 제약 조건을 어트리뷰트에 사용할 수 있다 .

• max – 최대값

• min – 최소값

• step - 숫자의 간격

• value - 기본값 지정

Birthday (month and year): <input type="month" name="bdaymonth">


– 예제코드

8. Input type: range– range 타입은 숫자의 범위 내 하나의 숫자값을 포함할 경우에 사용한다 .

– 어떤 숫자를 취할 것인지에 대한 제약 조건을 설정할 수 있다 .

– 아래와 같은 특정 제약 조건을 어트리뷰트에 사용할 수 있다 .

• max – 최대값

• min – 최소값

• step - 숫자의 간격 (-3, 0, 3, 6, 9.....)

• value - 기본값 지정

– 예제코드

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

<input type="range" name="points" min="1" max="10">


9. Input type: search– search 타입은 검색 필드에 사용된다 .

– 예제코드

10.Input type: tel– 전화번호 숫자 입력을 위한 필드를 정의

– 예제코드

11.Input type: time– time type 은 사용자가 시간을 선택할 수 있도록 해준다 .

– 예제코드

Search Google: <input type="search" name="googlesearch">

Telephone: <input type="tel" name="usrtel">

Select a time: <input type="time" name="usr_time">


12.Input type: url– url 타입은 하나의 url주소를 포함해야만 하는 입력 필드에 사용된다 .

– 예제코드

13.Input type: week– week type 은 사용자가 년 /주를 선택할 수 있도록 한다 .

– 예제코드 : 주간 그리고 년을 선택할 수 있다 .

Add your homepage: <input type="url" name="homepage">

Select a week: <input type="week" name="week_year">

HTML5 폼 (Form) 요소 , 속성

11. HTML5 폼 ( 요소 , 속성 )

1. HTML5 의 새로운 폼 요소 – HTML5 는 다음의 새로운 폼 요소를 가진다 .

• <datalist>

• <keygen>

• <output>

– Note: 모든 메이저 브라우저가 이것을 지원하는 것은 아니지만 우선은 이것에 대한 사용을 시작해 볼 수 있다 .

2. HTML5 <datalist> 요소– <datalist> 는 <input> 요소를 위한 하나의 미리 정의된 옵션 리스트를 지정

– <datalist> 요소는 <input> 요소에 "autocomplete" 을 제공하기 위해 사용

– 사용자는 input 데이터에 대해 미리 정의된 옵션 드롭 - 다운 리스트를 볼 수 있을 것이다 .

– <input> 요소의 list 어트리뷰트를 추가하고 그 안에 <datalist> 요소를 바인드

– 예제코드 : <datalist> 에 미리 정의된 값을 가지고 있는 하나의 <input>

• 지원 브라우저 - FF, Chrome, Opera

3. HTML5 <keygen> 요소– <keygen> 엘리먼트의 목적은 인증 유저에게 보안통로를 제공하기 위해서 이다 .

– <keygen> 테그는 하나의 폼 안에 key-pair 추가를 지정한다 .

– 폼이 전송될 때 2 개의 키가 추가되는데 하나는 개인키 이고 하나는 공개키 이다 .

– 개인키는 로컬에 저장된다 . 그리고 공개키는 서버로 보내진다 . 공개키는 후에 사용자 인증을 위한 개인 인증 추가를 위해 사용되어질 것이다 .

– 예제코드

• 지원 브라우저 : FF, Chrome, Safari, Opera

<input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>

11. HTML5 폼 ( 요소 , 속성 )

<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"></form>

11. HTML5 폼 ( 요소 , 속성 )

4. HTML5 <output> 요소– <output> 엘리먼트는 계산 결과를 재표현한다 .

– 예제코드

• 지원 브라우저 : FF, Chrome, Safari, Opera

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50">100 + <input type="number" name="b" value="50">= <output name="x" for="a b"></output></form>

11. HTML5 폼 ( 요소 , 속성 )

5. HTML5 새로운 폼 어트리뷰트– HTML5 는 <form> 과 <input> 에 대해 몇 가지 새로운 어트리뷰트를 가진다 .

– <form> 에 대한 새로운 어트리뷰트

• Autocomplete

• novalidate

– <input> 에 대한 새로운 엘리먼트

• Autocomplete, Autofocus, Form, formaction, formenctype

• formmethod, formnovalidation, formtarget, height and width, list

• min and max, multiple, pattern(regexp), placeholder, required, step

11. HTML5 폼 ( 요소 , 속성 )

6. <form> / <input> autocomplete 어트리뷰트– autocomplete 어트리뷰트는 form 이나 input 필드에 autocomplete 를 on/off

설정함으로써 지정된다 .

– autocomplete 가 on 일 때 브라우저는 유저가 값을 입력하기 전에 값들을 기본으로 완벽하게 완성한다 .

• Tip: <form> 에 autocomplete "on" 을 가지는 것이 가능하다 . 특정한 input 필드에 "off" 를 설정할 수 있다 .

• Note: <form> 에 autocomplete 를 가지는 것이 가능하고 <input> 타입들인 text, search,

url, tel, email, password, datepickers, range, 그리고 color 에 사용이 가능하다 .

– 예제코드 : 아래의 예제코드는 form 에 autocomplete = on 을 가지고 하나의 input 필드에 "off" 를 가진다 .

<form action="demo_form.asp" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"></form>

11. HTML5 폼 ( 요소 , 속성 )

6. <form> novalidate 어트리뷰트– novalidate 어트리뷰트는 불린값을 가지는 어트리뷰트 이다 .

– form-data 를 전송할 때 validate 를 하고 싶지 않다면 이것을 지정하면 된다 .

– 예제코드

7. <input> autofocus 어트리뷰트– autofocus 어트리뷰트는 불린값을 가지는 어트리뷰트 이다 .

– 페이지가 로드될 때 자동으로 <input> 엘리먼트에 autofocus 를 얻어온다 .

– 예제코드

<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email"> <input type="submit"></form>

First name:<input type="text" name="fname" autofocus="autofocus">

11. HTML5 폼 ( 요소 , 속성 )

8. <input> form 어트리뷰트– form 어트리뷰트는 하나 또는 그 이상의 <input> 엘리먼트로 지정할 수 있다 .

• Tip: 하나 또는 그 이상의 form id 리스트를 지정하기 위해선 스페이스로 구분하여 사용할 수 있다 .

– 예제코드 : form 외부에 있는 input 필드는 form 어트리뷰트를 이용해 form id 를 지정해 사용

9. <input> formaction 어트리뷰트– formaction 어트리뷰트는 form 이 전송될 때 input 필드를 컨트롤하는 하나의 파일 url 을 지정할 수

있다 .

– formaction 어트리뷰트는 <form> 엘리먼트의 <form> 엘리먼트를 오버라이드 한다 .

– Note: formaction 어트리뷰트는 type="submit" 과 type="image" 에 사용할 수 있다 .

– 지원브라우저 : FF, Chrome, Safari, Opera

– 예제코드 : form 안에 2 개의 전송 버튼이 있고 서로 다른 action 을 가지고 있다 .

<form action="demo_form.asp" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"></form>

Last name: <input type="text" name="lname" form="form1">

10.<input> formenctype 어트리뷰트– formenctype 어트리뷰트는 서버에 전송할 때 form-data 가 어떻게 인코딩 되어 있어야

하는지를 지정할 때 사용한다 .

– formenctype 어트리뷰트는 <form> 어트리뷰트의 enctype 어트리뷰트를 오버라이드 한다 .

– Note: formenctype 어트리뷰트는 type="submit" 과 type="image" 에 사용된다 .

– 예제코드 : 첫번째 전송 버튼은 기본 인코드로 form-data 를 보내고 두번째 버튼은 "multipart/

form-data" 를 보낸다 .

11. HTML5 폼 ( 요소 , 속성 )

<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><input type="submit" value="Submit"><br><input type="submit" formaction="demo_admin.asp" value="Submit as admin"></form>

<form action="demo_post_enctype.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"></form>

11. HTML5 폼 ( 요소 , 속성 )

11.<input> formmethod 어트리뷰트– formmethod 어트리뷰트는 action URL 에 form-data 를 전송하기 위한 HTTP 메서드를

정의한다 .

– formmethod 어트리뷰트는 <form> 엘리먼트의 메서드 어트리뷰트는 오버라이드 된다 .

– Note: formmethod 어트리뷰트 type="submit" 그리고 type="image" 에서 사용될 수 있다 .

– 예제코드 : 두번째 전송 버튼은 form 의 HTTP 메서드를 오버라이드 한다 .

<form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" formaction="demo_post.asp" value="Submit using POST"></form>

11. HTML5 폼 ( 요소 , 속성 )

12.<input> formnovalidate 어트리뷰트– novalidate 어트리뷰트는 boolean 어트리뷰트 이다 .

– 이것은 전송시 <input> 엘리먼트에 대한 유효하지 않아야 함을 지정할 수있다 .

– formnovalidate 어트리뷰트는 <form> 엘리먼트의 novalidate 어트리뷰트를 지정한다 .

– Note: formnovalidate 어트리뷰트는 type="submit" 과 함께 사용될 수 있다 .

– 예제코드 : form 안에 2 개의 submit 버튼이 있다 .( 하나는 validation 이 있고 다른 하나는 없다 .)

<form action="demo_form.asp"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"></form>

11. HTML5 폼 ( 요소 , 속성 )

13.<input> formtarget 어트리뷰트– formtarget 어트리뷰트는 폼을 전송한 후에 받아진 응답을 표현하기 위해 하나의 이름이나 키를

지정한다 .

– formtarget 어트리뷰트는 <form> 엘리먼트의 target 어트리뷰트를 오버라이드 한다 .

– Note: formtarget 어트리뷰트는 type="submit" 과 type="image" 와 함께 사용될 수 있다 .

– 예제코드 : 폼에 2 개의 전송 버튼이 있고 다른 타겟 윈도우를 가진다 .

<form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"></form>

11. HTML5 폼 ( 요소 , 속성 )

14.<input> height 와 width 어트리뷰트– <input> 엘리먼트의 높이와 넓이를 지정한다 .

– Note: 높이와 넓이 어트리뷰트는 <input type="image"> 에만 사용된다 .

– Tip: 이미지에 대한 높이와 넓이를 지정하면 페이지가 로드될 때 이미지에 대한 여백을 확보하게 된다 . 그러나 이 어트리뷰트를 지정하지 않으면 페이지가 로드될 때 이미지의 크기를 모르기 때문에 여백을 따로 남기지 않는다 . 이것은 이미지가 로드될 때 레이아웃이 변경될수 있는 여지를 주기도 한다 .

– 예제코드 : 높이와 넓이 어트리뷰트와 함께 전송 버튼으로써 이미지를 지정한다 .

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

11. HTML5 폼 ( 요소 , 속성 )

15.<input> list 어트리뷰트– list 어트리뷰트는 <input> 엘리먼트에 대해 사전 - 정의를 포함하는 <datalist> 엘리먼트를

참조한다 .

– 예제코드 : <datalist> 안에 사전 정의된 값과 <input> 엘리먼트

<input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>

11. HTML5 폼 ( 요소 , 속성 )

16.<input> min 과 max 어트리뷰트– min 과 max 어트리뷰트는 <input> 요소에 대해 최소값과 최대값을 지정할 수 있다 .

– Note: min 과 max 어트리뷰트는 다음의 input 타입들 에서만 지정이 가능하다 .

– number, range, date, datetime, datetime-local, time 그리고 week

– 예제코드 : <input> 요소에 사용된 최소값과 최대값

Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

11. HTML5 폼 ( 요소 , 속성 )

17.<input> pattern 어트리뷰트– 패턴 어트리뷰트는 <input> 엘리먼트의 값을 다시 체크하는 정규식을 지정한다 .

– Note: 사용자를 돕기 위해 전역 title 어트리뷰트에 패턴에 대한 설명을 기술한다 .

– Tip: 더 많은 정규식을 배우기 위해 다음의 링크를 통해 학습할 수 있다 .

• http://www.w3schools.com/js/js_obj_regexp.asp

– 예제코드 : 단지 3 개의 문자만 포함할 수 있는 input 필드 (숫자나 특수문자는 안됨 )

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

http://www.w3schools.com/js/js_obj_regexp.asp



11. HTML5 폼 ( 요소 , 속성 )

18.<input> placeholder 어트리뷰트– placeholder 어트리뷰트는 input 필드의 기대값을 기술하는 하나의 짧은 힌트를 기술한다 .

– 기대하는 형태의 짧은 기술이나 간단한 값

– 힌트는 이것이 비어있을 때 input 필드에 보여진다 . 그리고 필드에 포커스가 되면 사라진다 .

– Note: placeholder 어트리뷰트는 다음의 input 타입에서만 지원됩니다 .

• text, search, url, tel, email 그리고 password

– 지원 브라우저 : FF, Chrome, Safari, Opera

– 예제 코드

<input type="text" name="fname" placeholder="First name">

11. HTML5 폼 ( 요소 , 속성 )

19.<input> required 어트리뷰트– required 어트리뷰트는 하나의 boolean 어트리뷰트 이다 .

– 이것은 form 이 전송되기 전에 input 필드가 채워져 있어야 한다는 것을 지정한다 .

– Note: required 어트리뷰트는 다음의 input 타입에서 사용할 수 있다 .

– text, search, url, tel, email, password, date pickers, number, checkbox, radio

그리고 file

– 예제코드Username: <input type="text" name="usrname" required="required">

11. HTML5 폼 ( 요소 , 속성 )

20.<input> step 어트리뷰트– step 어트리뷰트는 <input> 어트리뷰트를 위한 숫자 간격을 지정한다 .

• 예 : 만약 step = 3 이라면 숫자는 -3, 0, 3, 6 이다 .

– Tip: step 어트리뷰트는 숫자의 범위를 생성할 수 있는데 최소값과 최대값을 함께 사용할 수 있다 .

– Note: step 어트리뷰트는 다음의 input 타입에서 사용이 가능하다 .

– number, range, date, datetime, datetime-local, month, time, week

– 예제코드

<input type="number" name="points" step="3">

HTML5 웹 스토리지

12. HTML5 웹 스토리지

– HTML5 웹 저장소는 쿠키 (cookies) 보다 더 나은 로컬 저장소 이다 .

1. HTML5 웹 저장소는 무엇인가 ? – HTML5 로 웹 페이지는 사용자의 브라우저내에 로컬 데이터를 저장할 수 있다 .

– 웹 저장소는 쿠키보다 더 안전하고 빠르다 .

– 데이터는 서버 요청마다 포함되지 않지만 질문을 통해 사용될 수 있다 . 이것은 또한 데이터의 많은 수를 저장할 수 있다 .

– 데이터는 키 /값 쌍으로 저장된다 . 그리고 하나의 웹 페이지는 저장된 데이터에 접근할 수 있다 .

2. 지원되는 브라우저 – IE8+, FF, Opera, Chrome, Safari

• IE7 그리고 그 이전 버전은 웹 저장소를 지원하지 않는다 .

3. 로컬 저장소와 세션 저장소 – 클라이언트에 저장하는 데이터를 위한 2 개의 새로운 객체가 있다 .

• 로컬저장소 - 기간 만료 없이 데이터를 저장

• 세션저장소 - 하나의 세션에 대한 데이터를 저장

– 웹 저장소를 사용하기 전에 로컬저장소와 세션저장소를 지원하는지 체크해야 한다 .


4. 로컬저장소 (loalStorage) 객체– 로컬저장소 객체는 만료일 없는 데이터를 저장한다 . 데이터는 브라우저가 닫혀도 삭제되지 않고

다음날 , 다음주 또는 1년 뒤에도 이용이 가능할 것이다 .

– 예제코드

if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code.....}else { // Sorry! No web storage support..}

if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1;}else { localStorage.clickcount=1;}document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";


5. 세션저장소 객체– 세션저장소 객체는 로컬저장소 객체와 같다 .

– 데이터는 사용자가 브라우저 윈도우를 닫을 때 삭제된다 .

– 다음의 예는 현재의 세션 내에서 하나의 버튼을 클릭했을 때 시간을 카운트 한다 .

if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;}else { sessionStorage.clickcount=1;}document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";

HTML5 응용 프로그램 캐시


– HTML5 로 캐시 매니페스트 파일을 생성하는 것만으로 하나의 웹 응용 프로그램 오프라인 버전을 만들기가 쉽다 .

1. 응용 프로그램 캐시란 무엇인가 ? – 응용 프로그램 캐시는 3 가지 이점을 응용 프로그램에 제공한다 .

• 오프라인 브라우징 - 사용자는 오프라인에서도 응용 프로그램을 사용할 수 있다 .

• 속도 - 캐시된 리소스는 빠르게 읽을 수 있다 .

• 줄어든 서버 로드 - 브라우저는 서버로 부터 업데이트 되거나 /변경된 것만 다운로드 할 것이다 .

2. 브라우저 지원 – FF, Opera, Chrome, Safari

3. HTML5 캐시 매니페스트 예제 – 예제는 하나의 캐시 매니페스트와 함께 HTML 문서를 보여준다 .( 오프라인 브라우징 )

4. 캐시 매니페이스 기본– 응용 프로그램 캐시 활성화를 위해 문서의 <html>테그에 매니페스트 어트리뷰트를 포함한다 .

– 사용자가 방문할 때 모든 페이지에 지정된 매니페스트 어트리뷰트에 캐시될 것이다 . 만약에 매니페스트 어트리뷰트가 지정되지 않았다면 페이지는 캐시되지 않을 것이다 .

– 매니페스트 파일에 대한 추천되는 확장자는 .appcache 이다 .

– 매니페스트 파일은 올바른 MIME-type과 함께 사용되야 한다 . 그래서 웹 서버상에 "text/cache-manifest"가 설정되어야만 한다 .


<!DOCTYPE HTML><html manifest="demo.appcache">

<body> The content of the document......</body>

</html>

<!DOCTYPE HTML><html manifest="demo.appcache">...</html>


5. 매니페스트 파일– 매니페스트 파일은 캐시가 무엇인지 브라우저에게 말하는 간단한 텍스트 파일이다 .

– 매니페스트 파일은 3 개의 영역을 가진다 .

1. CACHE MANIFEST - 헤더 아래 기재된 파일은 처음으로 다운로드된 후에 캐시될 것이다 .

2. NETWORK - 헤더 아래 기재된 파일은 서버로 하나의 연결을 요구한다 . 그리고 캐시될 것이다 .

3. FALLBACK - 헤더 아래 기재된 파일이 만약 하나의 페이지에 접근이 어렵다면 대체 (fallback )

할 페이지를 지정한다 .

– 캐시 매니페스트

• 첫번째 라인에 CACHE MANIFEST 라고 표시한다 .

– CACHE MANIFEST

/theme.css

/logo.gif

/main.js

• 매니페스트 파일은 3 개의 자원을 표시한다 .(CSS 파일 , GIF 이미지 그리고 자바스크립트 )

• 매니페스트 파일이 로드될 때 브라우저는 웹 사이트의 루트에서 3 개의 파일을 다운로드할 것이다 .

• 사용자가 인터넷에 연결되어 있지 않아도 언제든 리소스 이용이 가능할 것이다 .


– NETWORK

• NETWORK 영역 아래에 지정한다 . 파일 login.asp" 는 캐시되어져야만 한다 . 그리고 오프라인에서 이용하지 못할 것이다 .

– NETWORK:

login.asp

• 애스터리스크는 모든 다른 리소스에 대한 인터넷 연결 요구를 지시할 때 사용한다 .

– NETWORK:

*

– FALLBACK

• FALLBACK 영역은 인터넷이 연결되어 있지 않을 때 /html/ 목록 안에 있는 모든 파일을 대신해 "offline.html" 로 대체되게 된다 .

– FALLBACK:

/html/ /offline.html

• Note: 첫번째 URI 는 자원이고 두번째가 fallback 이다 .


6. 캐시 업데이트– 응용 프로그램이 캐시했을 때 이것은 다음의 일중 하나가 발생할 때 까지 캐시되어 남는다 .

• 사용자가 브라우저의 캐시를 제거했다 .

• 매니페스트 파일이 수정되었다 .

• 응용 프로그램 캐시가 프로그램으로 수정되었다 .

– 예제 - 완전한 캐시 매니페스트 파일

CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.js

NETWORK:login.asp

FALLBACK:/html/ /offline.html


• Tip: 위에서 "#" 라인은 코멘트를 위한 라인이다 . 하지만 이것은 또 다른 목적을 가진다 . 응용 프로그램의 캐시가 매니페스트 파일 변경으로 인해 수정되었을 때 이다 . 만약 당신이 이미지나 자바스크립트 함수를 수정했다면 이러한 변경에 대해 다시 캐시되지 않는다 . 코멘트 라인에 수정날짜나 버전을 수정하는 것으로 브라우저가 당신의 파일을 다시 캐시할 수 있도록 만드는 하나의 방법이다 .

– 응용 프로그램 캐시 주의하기

• 여러분의 캐시는 무엇을 주의해야 하는가 ?

– 하나의 파일이 캐시된 브라우저는 서버상의 파일이 변경되었더라도 캐시된 버전을 보여주기를 계속할 것이다 . 브라우저가 업데이트 캐시를 활성화 하기 위해 매니페스트 파일을 변경하는 것이 필요하다 .

• Note: 브라우저들은 캐시된 데이터에 대해 제한된 크기를 가질 것이다 .( 어떤 브라우저는 하나의 사이트에 대해 5MB 제한을 가진다 .)

HTML5 웹 워커

12. HTML5 웹 워커

– 웹 워커는 페이지의 퍼포먼스에 관계없이 배경에서 실행되는 하나의 자바스크립트 이다 .

1. 웹 워커는 무엇인가 ? – HTML 페이지에서 스크립트가 실행될 때 페이지는 스크립트가 종료될 때까지 응답을 하지 않는다 .

– 웹 워커는 페이지 퍼포먼스와 관계없이 다른 스크립트와 독립적으로 배경에서 실행되는 하나의 자바스크립트 이다 .

– 여러분은 클릭이나 선택과 같은 것들에 대해 원하는대로 액션이 가능하다 .(배경에서 웹 워커가 실행되기 때문에 ...)

2. 지원 브라우저 – IE 를 제외한 대부분의 메이저 브라우저를 지원한다 .(FF, Chrome, Safari, Opera)

– 사용자의 브라우저에서 웹 워커를 지원하는지 반드시 체크해야 한다 .

• 웹 워커 지원 체크


• 웹 워커 파일 생성

1. 외부 자바스크립트에 웹 워커를 생성

2. "demo_workers.js" 라는 파일에 하나의 스크립트 카운트를 생성하고 저장 .

if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... }else { // Sorry! No Web Worker support.. }

var i=0;

function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500);}timedCount();


3. 위의 코드에서 중요한 부분은 postMessage() 메서드 이다 . (HTML 페이지에 메세지를 돌려준다 .)

• 하나의 웹 워커 객체 생성

1. HTML 페이지에서 웹 워커 파일을 호출한다 .

2. 아래의 코드 처럼 웹 워커가 이미 존재하는지 아닌지를 판단하는 로직을 이용하고 "demo_workers.js" 를 실행한다 .

3. 이것을 통해 우리는 웹 워커에 메세지를 보내거나 받거나 할 수 있다 .

4. 웹 워커에 "onmessage" 이벤트 리스너를 추가하자 .

5. 웹 워커가 하나의 메세지를 배달할 때 이벤트 리스너 내 코드가 실행된다 . 웹 워커로 부터의 데이터는 event.data 안에 저장된다 .

if(typeof(w)=="undefined") { w=new Worker("demo_workers.js");}

w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data;};


– 웹 워커는 페이지의 퍼포먼스에 관계없이 배경에서 실행되는 하나의 자바스크립트 이다 .

3. 웹 워커 끝내기– 웹 워커 객체가 생성될 때 웹 워커가 종료될 때까지 메세지 듣기를 계속할 것이다 .

– 웹 워커가 종료되기 위해 브라우저 /컴퓨터 자원은 teminate() 메서드를 사용한다 .

4. 전체 웹 워커 예제 코드– 다음 장에 코드 제시 .

<!DOCTYPE html><html><body>

<p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button><br><br><script>var w;function startWorker() {if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; };}else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Work-ers..."; }}function stopWorker() { w.terminate();}</script></body></html>



5. 웹 워커와 DOM– 웹 워커는 외부 파일에 있기 때문에 다음의 자바스크립트 객체에 접근할 수 없다 .

• window object

• document object

• parent object

HTML5 Server-Sent Event(SSE)

13. HTML5 Server-Sent Event(SSE)

– HTML5 Server-Sent Event 는 서버로 부터 업데이트를 가져오기 위한 웹 페이지를 인정한다 .

1. Server-Sent Event - 단방향 메세지 – server-sent 이벤트는 하나의 웹 페이지가 서버의 업데이트를 자동으로 가져오는 이벤트 이다 .

– 이것은 전에도 가능했다 . 그러나 웹 페이지가 업데이트 될 것인지 물어야 했다 . 하지만 server-

sent 이벤트는 자동으로 업데이트를 해줍니다 .

– 예 : 페이스북 / 트위터 업데이트 , 주식값 업데이트 , 뉴스피드 , 스포츠 결과 등

2. 지원 브라우저 – FF, Chrome, Safari, Opera (IE 제외 )


3. Server-Sent 이벤트 알림 받기– EventSource 객체는 server-side 이벤트 알림을 받기 위해 사용된다 .

– 예제 설명

• EventSource 객체를 생성한다 . 그리고 업데이트를 보내기 위해 특정 URL 을 지정한다 .( 이 예제에서는 "demo_sse.php")

• 업데이트를 받을 때 마다 onmessage 이벤트가 발생한다 .

• onmessage 이벤트가 발생할 때 엘리먼트 id="result" 로 데이터를 받는다 .

var source=new EventSource("demo_sse.php");

source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>";};


4. Server-Sent 이벤트 지원 체크– Server-Sent 이벤트를 지원하는 브라우저를 체크하기 위해 아래의 코드를 참고한다 .

– Server-Side 코드 예제

• 위의 예제를 위해 서버에 데이터를 업데이트 하거나 보낼 수 있는 능력이 필요하다 .(PHP 나 ASP

같은 것 )

• server-side 이벤트 스트림 문법은 간단하다 . 헤더의 "Content-Type" 에 "text/event-

stream" 을 설정한다 .

• 이제 이벤트 스트림 보내기를 사용할 수 있다 .

• PHP 내 코드 (demo_sse.php) 는 아래와 같다 .

if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code.....}else { // Sorry! No server-sent events support..}


• ASP 안에서 코드는 아래와 같다 .(demo_sse.asp)

– 코드에 대한 설명

• 헤더의 "Content-type" 에 "text/evnet-stream" 을 설정

• page 가 cache 되지 않도록 지정

• 데이터가 보내질 수 있도록 출력한다 .(항상 시작은 "data:" 로 한다 .)

• 웹 페이지에 데이터가 출력될 수 있게 Flush 한다 .

<?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache');

$time = date('r'); echo "data: The server time is: {$time}\n\n"; flush();?>

<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%>


5. EventSource 객체– 위의 예제에서 메세지를 가져오기 위해 onmessage 이벤트를 사용한다 . 하지만 이것 말고도

다른 이벤트도 사용이 가능하다 .

이벤트 정의onopen 서버가 오픈되고 연결될 때onmessage 메세지를 받을 때onerror 오류가 발생했을 때

Html5 소개 가이드

Technology

Transcript of Html5 소개 가이드