O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Html5 소개 가이드

3.738 visualizações

Publicada em

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Html5 소개 가이드

  1. 1. HTML5 소개 2012-10-06 박종현
  2. 2. 목차1. HTML5 소개2. HTML5의 새로운 요소(Elements)3. HTML5 캔버스(Canvas)4. HTML5 인라인 SVG5. HTML5 비디오6. HTML5 비디오 + DOM7. HTML5 오디오8. HTML5 드래그와 드롭9. HTML5 지오로케이션(Geolocation)10. HTML5 입력 타입들11. HTML5 폼 (요소, 속성)12. HTML5 웹 저장소13. HTML5 웹 응용프로그램 캐시14. HTML5 웹 워커15. HTML5 SSE
  3. 3. HTML5 소개
  4. 4. 1. HTML5 소개1. HTML5는 무엇인가? – HTML의 새로운 표준(HTML 4.01은 이전 버전임) – 여러 메이저 브라우저 회사들이 HTML5와 API를 지원함2. HTML5를 어떻게 시작할 것인가? – HTML5는 W3C와 WHATWG의 협력으로 탄생 – HTML5에 대한 규칙을 제정함에 있어 논의된 규칙 • 새로운 특징들은 HTML, CSS DOM 그리고 Javascript에 기초해야 함. • 플래시와 같은 외부 플러그 인을 줄이자! • 에러 핸들링이 더 보강되어야 한다. • 스크립팅 을 대체하는 마크업이 있어야 한다. • HTML5는 디바이스에 독립적이어야 한다. • 개발 절차는 공개적이고 가시적이어야 한다.
  5. 5. 1. HTML5 소개3. HTML5 <!DOCTYPE> – HTML5에서는 <!DOTYPE>만 선언 가능4. 최소한의 HTML5 문서 구조<!DOCTYPE html><html> <head> <title>문서의 제목</title> </head> <body> 문서의 내용...... </body></html>
  6. 6. 1. HTML5 소개5. HTML5의 새로운 특징 – 2D 드로윙을 위한 <canvas> 요소 – 미디어 플레이백을 위한 <video>와 <audio> 요소 – 로컬 저장소 지원 – 새로운 컨텐츠 지정 요소 • <article>, <footer>, <header>, <nav>, <section> – form 컨트롤 • calendar, data, time, email, url, search6. HTML5를 지원하는 브라우저 – 현재 모든 특징을 지원하는 브라우저는 없음 – 하지만 모든 중요한 브라우저가 새로운 HTML5 특징을 지속적으로 추가하는 중임.
  7. 7. HTML5의 새로운 요소 (Element)
  8. 8. 2. HTML5의 새로운 요소(Element)1. HTML5 내 새로운 요소(Element) – HTML4.01 버전에서 사용해선 안되는 요소(element)와 고의적으로 사용하지 않는 요소를 고 려 – 오늘날의 인터넷 환경에서 사용하기 위해 더 나은 구조, 폼, 미디어 컨텐츠를 고려2. 새로운 시멘틱(Semantic)구조 요소들(Elements) – 더 나은 구조를 위해 새로운 요소를 제공함 – 새로운 요소 리스트는 다음 장에서 제공
  9. 9. 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> 가능한 라인-브레이크 정의
  10. 10. 2. HTML5의 새로운 요소(Element)3. 새로운 미디어 요소 – HTML5는 미디어 콘텐츠를 위한 새로운 요소를 제공 테그 정의<audio> 사운드 콘텐트를 정의<video> 비디오나 영화를 정의<source> <video>와 <audio>에 대한 다중 미디어 자원을 정의<embed> 외부 응용 프로그램이나 인터렉티브 콘텐트에 대한 하나의 컨테이너를 정의(하나의 플러그인)<track> <video>와 <audio>를 위한 텍스트 트랙을 정의4. 새로운 <canvas> 요소 테그 정의<canvas> 그래픽을 그릴 때 사용(대게는 자바스크립트)
  11. 11. 2. HTML5의 새로운 요소(Element)5. 새로운 Form 요소 – HTML5는 더 많은 기능을 위해 새로운 Form 요소를 제공 테그 정의<datalist> 입력 컨트롤을 위해 사전 정의된 옵션의 리스트를 특징 짓는다.<keygen> 하나의 키-쌍 추가 필드를 정의(forms을 위해)<output> 계산 결과를 정의6. 삭제된 요소 – 다음의 HTML4.01 요소는 HTML5에서 삭제됨 • <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, <tt>
  12. 12. 캔버스(Canvas)
  13. 13. 3. 캔버스(Canvas)• 웹에서 그림을 그릴 때 사용• 빨간 사각형, 그라디언트 사각형, 다중 색상 사각형 등과 같은 모형이나 다중 색상 글자와 같은 것 을 그릴 수 있음1. 캔버스란 무엇인가? – 자바스크립트와 같은 스크립팅을 통해 그림을 그릴 때 사용 – <canvas> 요소는 그래픽에 대해 하나의 컨테이너임. – 패스, 박스, 원, 문자 그리고 이미지 추가와 같은 그리기를 위한 몇 가지 메서드를 가짐.2. 지원 브라우저 – IE9, 파이어폭스, 크롬, 사파리, 오페라를 지원
  14. 14. 3. 캔버스(Canvas)3. 캔버스 생성 – 직사각형의 영역, <canvas> 요소로 지정 – 기본적으로 컨텐츠와 테두리가 없음<canvas id="myCanvas" width="200" height="100"></canvas> – 스크립트 참조를 위해 항상 요소의 id를 지정해야 함 – 높이와 넓이를 반드시 지정해야 함 – 테두리 추가는 스타일시트를 이용해 지정 가능<canvas id="myCanvas" width="200" height="100" style="border:1px solid#000000;"></canvas>
  15. 15. 3. 캔버스(Canvas) – 자바스크립트로 캔버스에 그림 그리기<script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);< /script> – 코드설명 • 캔버스 요소를 찾는다. • getContext() 메서드 호출 • 필요한 메서드를 이용해 패스, 박스, 원, 이미지, 문자 등을 그린다. • fillStyle 속성을 이용해 CSS색상, 그라디언트, 패턴을 그림 – 기본적인 fillStyle은 검은색 이다. • fillRect(x, y, width, height) 메서드는 현재의 fillStyle로 사각형을 그림
  16. 16. 3. 캔버스(Canvas)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()중 하나를 사용
  17. 17. 3. 캔버스(Canvas) – 직선을 그리는 코드의 예var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(300,150);ctx.stroke();var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); – 원을 그리는 코드의 예ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();
  18. 18. 3. 캔버스(Canvas)6. 캔버스 텍스트 – 텍스트를 그리기 위한 중요한 속성과 메서드 • 텍스트에 대한 폰트 속성을 정의 – font • 캔버스에 “filled” 텍스트를 그린다. – fillText(text, x, y) • 캔버스에 텍스트를 그린다.(no fill) – strokeText(text, x, y) – 예제: 캔버스에 폰트 “arial”을 사용하는 높이 30px의 채어진(filled) 텍스트를 작성하는 코드 를 작성해라. (코드는 다음장에…)
  19. 19. 3. 캔버스(Canvas) – fillText() 메서드 사용 예var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50);var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); – strokeText() 메서드 사용 예ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);
  20. 20. 3. 캔버스(Canvas)7. 캔버스 그라디언트 – 채어진(filled) 사각형, 원, 선, 텍스트에 사용 가능 – 캔버스가 가지는 여러가지 모양의 색은 고정적이지 않음(변경이 가능) – 2개의 그라디언트 타입 메서드를 가짐 • 직선 모양의 그라디언트 생성 – createLinearGradient(x, y, x1, y1) • 방사/원 모양의 그라디언트 생성 – createRadialGradient(x, y, r, x1, y1) – Stop이란? • 그라디언트 컬러 포지션 (0과 1사이) • 여러가지 색을 지정할 때 필요 • addColorStop() 메서드를 사용 – fillStyle과 strokeStyle 설정이 가능
  21. 21. 3. 캔버스(Canvas) – 예시 • createLinearGradient() 메서드를 이용해 사각형을 그리고 그라디언트로 채워라var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");// Create gradientvar grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
  22. 22. 3. 캔버스(Canvas)8. 캔버스 이미지 – 캔버스에 이미지를 그리는 메서드 • drawImage(image, x, y)var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");ctx.drawImage(img,10,10); – 캔버스에 대한 자세한 정보는 아래의 주소에서 확인 • http://www.w3schools.com/tags/ref_canvas.asp
  23. 23. HTML5 Inline SVG
  24. 24. 4. HTML5 Inline SVG1. SVG란 무엇인가? – 가변 벡터 그래픽 – 웹을 위한 벡터 기반 그래픽을 정의하기 위해 사용 – XML 형태로 그래픽을 정의 – 확대/축소, 크기 변경에 퀄리티 저하가 없음 – SVG 파일내 모든 엘리먼트와 모든 속성이 있음 – W3C 권고2. SVG 이점 – 어떤 텍스트 에디터에서든 생성/수정이 가능 – 검색/인덱스, 압축이 가능 – 가변적 – 어떤 해상도에서든 높은 퀄리티를 출력 – 확대 가능
  25. 25. 4. HTML5 Inline SVG3. 지원 브라우저 – IE9, FF, Opera, Safari, Chrome4. 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>
  26. 26. 4. HTML5 Inline SVG5. SVG 관련 참고 사이트 – http://www.w3schools.com/svg/svg_reference.asp6. SVG와 Canvas의 다른점 – SVG는 XML내 2D 그래픽을 정의하기 위한 언어 – Canvas는 자바스크립트를 이용해 2D 그래픽을 그린다. – SVG는 XML 기반, SVG DOM내에 이용 가능한 엘리먼트가 있다는 의미, 자바스크립트로 엘 리먼트 핸들링이 가능 – SVG 객체의 속성을 변경하면 자동적으로 브라우저가 다시 렌더링됨 – Canvas는 픽셀by픽셀로 다시 렌더됨 • Canvas는 그린 그림을 브라우저가 기억하지 못함 • 포지션 변경시 전체를 다시 그림
  27. 27. 4. HTML5 Inline SVG7. SVG와 Canvas 비교 CANVAS SVG해상도에 의존한다. 해상도에 독립적이다.이벤트 핸들러를 지원하지 않는다. 이벤트 핸들러를 지원한다. 커다란 렌더링 영역은 응용 프로그램에게 있어 최고의 선택간단한 텍스트 렌더링 이용이 가능하다. 이다..png, .jp와 같은 이미지 결과를 저장할 수 있다. 복잡하면 렌더링이 느리다.(DOM의 증가)게임과 같은 것에 최적 게임 응용 프로그램에 최적이지 않다.
  28. 28. HTML5 비디오
  29. 29. 5. HTML5 비디오• 많은 최신의 현대적인 웹 사이트들은 비디오를 유저에게 제공함• HTML5는 이러한 비디오를 보여주기 위한 하나의 표준을 제공함1. 웹에서의 비디오 – 웹에서 비디오/오디오를 제공하기 위한 표준이 존재하지 않았음 – 이것들을 제공하기 위해 하나의 플러그인이 필요함(Flash와 같은) • 서로 다른 브라우저는 서로 다른 플러그인이 필요함2. 지원 브라우저 – IE9, FF, Opera, Chrome, Safari • IE8과 그 이전 버전은 <video> 요소를 제공하지 않음
  30. 30. 5. HTML5 비디오3. HTML5 비디오 – 작업은 어떻게? – 비디오를 보여주기 위해선 아래의 모든 것이 필요 (다음장 코드 참조) – 컨트롤의 속성은 플레이, 멈춤, 볼륨과 같은 컨트롤을 추가한다. – 컨트롤의 속성은 높이와 넓이를 포함한다. (반드시 설정) – <video>와</video> 사이에 글자 포함(지원하지 않는 브라우저를 위해) – <video> 요소는 여러 개의 <source> 요소를 지원함 – 브라우저는 공인된 포맷을 사용함
  31. 31. 5. HTML5 비디오 • 웹에서 비디오를 출력하는데 필요한 예제 코드<!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>
  32. 32. 5. HTML5 비디오4. 비디오 포맷과 브라우저 지원 – 지원되는 비디오 포맷 3가지 : MP4, WebM, Ogg Browser MP4 WebM Ogg Internet 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 – MP4: H264 비디오 코덱과 AAC 오디오 코덱으로써의 MPEG4 파일들 – WebM: VP8 비디오 코덱과 Voribs 오디오 코덱으로써의 WebM 파일들 – Ogg: Theora 비디오 코덱과 Voribs 오디오 코덱으로써의 Ogg 파일들
  33. 33. 5. HTML5 비디오5. HTML5 비디오 테그들 테그 정의 <video> 비디오나 무비를 정의 <source> <video>와 <audio>와 같은 미디어 엘리먼트에 대한 다중 미디어 리소스를 정의 <track> 미디어 플레이어내 텍스트 트랙을 정의
  34. 34. HTML5 비디오+DOM
  35. 35. 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>
  36. 36. <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();}
  37. 37. function makeBig(){ myVideo.width=560;}function makeSmall(){ myVideo.width=320;}function makeNormal(){ myVideo.width=420;}</script><p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big BuckBunny</a>.</p></body></html>
  38. 38. 6. HTML5 비디오+DOM2. HTML<video> - 메서드, 속성 그리고 이벤트 – 대부분의 브라우저는 아래 테이블 리스트에 있는 메서드, 속성, 그리고 이벤트를 지원한다. 메서드 속성 이벤트play() currentSrc playpause() currentTime pauseload() videoWidth progresscanPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width – 주의: 비디오 넓이와 높이는 바로 설정이 가능하다. 하지만 다른 속성들은 비디오의 메타 데 이터가 로드된 이후에 이용이 가능하다.
  39. 39. HTML5 오디오
  40. 40. 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>
  41. 41. 7. HTML5 오디오 – 컨트롤 속성으로 플레이(Play), 멈춤(Pause), 그리고 볼륨(Volumn)을 추가할 수 있다. – <audio> 요소를 지원하지 않는 브라우저를 위해 <audio>와 </audio> 테그 사이에 텍스를 추 가할 수 있다.3. Audio 포맷과 지원 브라우저 – <audio> 요소는 3개의 파일 포맷을 지원한다. MP3, Wav, Ogg Browser MP3 Wav OggInternet Explorer 9 YES NO NOFirefox 4.0 NO YES YESGoogle Chrome 6 YES YES YESApple Safari 5 YES YES NOOpera 10.6 NO YES YES – HTML5 오디오 테그 Tag Description <audio> 사운드 컨텐트를 정의 <source> <video> and < audio> 처럼 media 요소에 다중 멀티 미디어 리소스를 정의
  42. 42. HTML5 드래그와 드롭
  43. 43. 8. HTML5 드래그와 드롭 – 드래그와 드롭은 HTML5 표준의 한 부분이다.1. 드래그와 드롭 – 드래그와 드롭은 공통 특징을 가지는데 하나의 객체를 붙잡고 다른 위치로 드래그한다는 것 이다. – HTML5에서 이것은 어떤 요소든 드래그 할 수 있는 표준의 한 부분이다.2. 지원 브라우저 – IE9, FF, Opera 12, Chrome, Safari3. HTML5 드래그와 드롭 예제 – 다음장 예제를 참고
  44. 44. • 언뜻 복잡해 보이지만 드래그와 드롭 이벤트를 통해 시작이 가능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>
  45. 45. 8. HTML5 드래그와 드롭4. 드래그 가능한 요소 만들기 – 드래그 가능한 요소를 만들기 위해 draggable 속성에 true를 설정한다.<img draggable="true" />5. 드래그는 무엇으로 하는가? – ondragstart()와 setData() – 요소가 드래그 될 때 어떤 것이 발생해야 하는가? – 위의 예에서 ondragstart 어트리뷰트는 어떤 특정 데이터를 드래그 하기 위해 drag( event ) 라는 하나의 함수(function)를 호출한다. – dataTransfer.setData() 메서드는 데이터 타입과 드래그 된 데이터 값을 설정한다.function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id);} – 이 케이스에서 데이터 타입은 텍스트 이고, 값은 드래그 가능한 요소의 ID이다.
  46. 46. 8. HTML5 드래그와 드롭6. 드롭은 어디에? - ondragover – 드래그된 데이터는 ondragover 이벤트에 의해 어디든 드롭이 가능 – 기본적으로 데이터/요소들은 다른 요소 내에 드롭될 수 없다. 드롭을 허가하기 위해선 요소 의 기본 핸들링을 막아야 함 – 이것을 위해 ondragover 이벤트를 위한 event.preventDefault() 메서드를 호출하면 됨event.preventDefault()7. 드롭하기 - ondrop – 드래그된 데이터를 드롭할 때 드롭은 이벤트를 발생시킨다. – 위의 예에서 ondrop어트리뷰트는 drop( event )함수를 호출한다.function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data));}
  47. 47. 8. HTML5 드래그와 드롭– 코드설명 • 데이터를 기본적으로 핸들링 하기 위해 preventDefault()를 호출한다. • dataTransfer.getData(“Text”) 메서드로 드래그된 데이터를 얻는다. • 이 메서드는 setData() 메서드내 같은 타입으로 설정되었던 어떤 데이터든지 반환할 것이다. • 드래그된 데이터는 드래그된 요소의 ID이다. • 드래그된 요소는 드롭된 요소에 덧붙여진다.
  48. 48. HTML5 Geolocaion
  49. 49. 9. HTML5 Geolocation1. 사용자의 포지션 위치 – HTML5 Geolocation API는 사용자의 지표 좌표를 얻기 위해 사용 – 사용자 개인이 선택해야 하며 사용자가 허락하기 전에는 사용할 수 없음2. HTML5 – Geolocaion 사용하기 – 사용자 포지션을 얻기 위해 getCurrentPosition() 메서드를 사용 – 아래의 코드는 사용자의 경도와 위도를 얻는 간단한 코드이다. – 코드 설명 • 지표 좌표가 지원된다면 체크 • 지원된다면 getCurrentPosition() 메서드를 실행, 지원이 안되면 사용자에게 메시지 전달 • 만일 getCurrentPosition() 메서드가 성공적으로 실행되었다면 이것은 파라미터에 지정된 함 수에 하나의 좌표 객체를 반환할 것이다. • showPosition() 함수는 경도와 위도를 보여주기 위한 것을 가져온다. • 다음 페이지의 예제는 기본적인 좌표를 얻기 위한 예제이고 오류 처리가 되어 있지 않다.
  50. 50. <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>
  51. 51. 9. HTML5 Geolocation3. 오류와 취소 핸들링 – 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; }}
  52. 52. <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> – 에러코드에 대한 설명 • Permission denied: 사용자가 위치 정보를 허락하지 않을 때 • Position unavailable: 현재 위치를 가져오지 못할 때 • Timeout: 운영타임오버
  53. 53. 9. HTML5 Geolocation4. Map안에 결과 전달하기 – 하나의 지도에 결과를 출력하기 위해선 구글맵과 같은 경도와 위도를 사용할 수 있는 지도 서비스에 접속할 필요가 있다. – 코드 예function showPosition(position){ var latlon=position.coords.latitude+","+position.coords.longitude; varimg_url="http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src="+img_url+">";} – 위의 예에서 우리는 스태틱 이미지를 사용하는 구글맵 내에 위치를 보여주기 위한 경도와 위 도를 반환할 수 있다.
  54. 54. 9. HTML5 Geolocation5. 위치-지정 정보(Location-Specific Information) – 이 페이지는 맵에 사용자의 위치를 보여주기 위해 어떻게 하는지에 관한 데모이다. – 지표 좌표는 위치-지정 정보에 매우 유용하다. – 예 • 지역정보(날짜 등) • 사용자 근처의 흥미로운 포인트 • GPS6. getCurrentPosition() 메서드 - 반환 데이터 – getCurrentPosition() 메서드는 객체를 반환한다. – 위도, 경도 그리고 정밀한 속성들이 항상 반환된다. – 만일 이용이 가능하다면 아래의 다른 속성들이 반환될 것이다.
  55. 55. 9. HTML5 Geolocation 속성 정의coords.latitude 10진수 위도coords.longitude 10진수 경도coords.accuracy 포지션 정밀도coords.altitude 해발(m)coords.altitudeAccurary 해발 정밀도coords.heading 북극점 기준으로 오른쪽 방향coords.speed 초당 미터(속도)timestamp date/time 응답
  56. 56. 9. HTML5 Geolocation7. 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>
  57. 57. HTML5 Input 타입들
  58. 58. 10. HTML Input 타입들1. HTML5의 새로운 입력 타입들 – HTML5는 form에 대한 몇 가지 새로운 입력 타입을 가진다. 이들 새로운 몇 가지 특징은 입력 컨트롤 과 검증을 더 낫게 한다. – 새로운 입력 타입들 • Color • Date • Datetime • datetime – local • Email • Month • Number • Range • Search • Tel • Time • url • week
  59. 59. 10. HTML Input 타입들2. Input Type: Color – Color 타입은 하나의 컬러를 포함해야만 하는 input 필드를 위해 사용되어진다. – 예제: 컬러 picker로 색상을 선택한다. – 지원브라우저: 크롬, 오페라Select your favorite color: <input type="color" name="favcolor">3. Input type: Date – date type은 날짜를 선택해야만 하는 경우에 사용한다. – 예제: 하나의 데이터 컨트롤을 정의 – 지원브라우저: 크롬, 사파리, 오페라Birthday: <input type="date" name="bday">
  60. 60. 10. HTML Input 타입들4. Input type: datetime – datetime-local 타입은 시간과 날짜를 선택하기 위해 사용한다. – date와 time 컨트롤을 정의 – 지원 브라우저: 크롬, 사파리, 오페라 – 예제코드Birthday (date and time): <input type="datetime-local" name="bdaytime">5. Input type: email – email 타입은 input 필드에 e-mail 주소가 포함될 때에만 사용된다. – e-mail 주소를 위해 하나의 필드를 정의한다.(전송될 때 자동적으로 유효성을 검증) – 지원 브라우저: 파이어폭스, 크롬, 오페라 – 예제코드E-mail: <input type="email" name="usremail">
  61. 61. 10. HTML Input 타입들6. Input type: month – month 타입은 년/월 선택을 사용자에게 허가한다. – 년/월을 정의 (타임존을 고려하진 않음) – 지원되는 브라우저: Chrome, Safari, Opera – 예제코드Birthday (month and year): <input type="month" name="bdaymonth">7. Input type: number – 타입은 숫자값을 포함해야만 하는 입력 필드에 사용된다. – 어떤 숫자만 취할 것인지에 대한 제약 조건을 설정할 수 있다. – 하나의 숫자 필드를 정의 – 아래와 같은 특정 제약 조건을 어트리뷰트에 사용할 수 있다. • max – 최대값 • min – 최소값 • step - 숫자의 간격 • value - 기본값 지정
  62. 62. 10. HTML Input 타입들 – 예제코드Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">8. Input type: range – range 타입은 숫자의 범위 내 하나의 숫자값을 포함할 경우에 사용한다. – 어떤 숫자를 취할 것인지에 대한 제약 조건을 설정할 수 있다. – 아래와 같은 특정 제약 조건을 어트리뷰트에 사용할 수 있다. • max – 최대값 • min – 최소값 • step - 숫자의 간격(-3, 0, 3, 6, 9.....) • value - 기본값 지정 – 예제코드<input type="range" name="points" min="1" max="10">
  63. 63. 10. HTML Input 타입들9. Input type: search – search 타입은 검색 필드에 사용된다. – 예제코드Search Google: <input type="search" name="googlesearch">10. Input type: tel – 전화번호 숫자 입력을 위한 필드를 정의 – 예제코드Telephone: <input type="tel" name="usrtel">11. Input type: time – time type은 사용자가 시간을 선택할 수 있도록 해준다. – 예제코드Select a time: <input type="time" name="usr_time">
  64. 64. 10. HTML Input 타입들12. Input type: url – url 타입은 하나의 url주소를 포함해야만 하는 입력 필드에 사용된다. – 예제코드Add your homepage: <input type="url" name="homepage">13. Input type: week – week type은 사용자가 년/주를 선택할 수 있도록 한다. – 예제코드: 주간 그리고 년을 선택할 수 있다.Select a week: <input type="week" name="week_year">
  65. 65. HTML5 폼(Form) 요소, 속성
  66. 66. 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
  67. 67. 11. HTML5 폼 (요소, 속성)<input list="browsers"><datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"></datalist>3. HTML5 <keygen> 요소 – <keygen> 엘리먼트의 목적은 인증 유저에게 보안통로를 제공하기 위해서 이다. – <keygen> 테그는 하나의 폼 안에 key-pair 추가를 지정한다. – 폼이 전송될 때 2개의 키가 추가되는데 하나는 개인키 이고 하나는 공개키 이다. – 개인키는 로컬에 저장된다. 그리고 공개키는 서버로 보내진다. 공개키는 후에 사용자 인증을 위한 개인 인증 추가를 위해 사용되어질 것이다. – 예제코드 • 지원 브라우저: FF, Chrome, Safari, Opera<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"></form>
  68. 68. 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>
  69. 69. 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
  70. 70. 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>
  71. 71. 11. HTML5 폼 (요소, 속성)6. <form> novalidate 어트리뷰트 – novalidate 어트리뷰트는 불린값을 가지는 어트리뷰트 이다. – form-data를 전송할 때 validate를 하고 싶지 않다면 이것을 지정하면 된다. – 예제코드<form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email"> <input type="submit"></form>7. <input> autofocus 어트리뷰트 – autofocus 어트리뷰트는 불린값을 가지는 어트리뷰트 이다. – 페이지가 로드될 때 자동으로 <input> 엘리먼트에 autofocus를 얻어온다. – 예제코드First name:<input type="text" name="fname" autofocus="autofocus">
  72. 72. 11. HTML5 폼 (요소, 속성)8. <input> form 어트리뷰트 – form 어트리뷰트는 하나 또는 그 이상의 <input> 엘리먼트로 지정할 수 있다. • Tip: 하나 또는 그 이상의 form id 리스트를 지정하기 위해선 스페이스로 구분하여 사용할 수 있다. – 예제코드: form 외부에 있는 input 필드는 form 어트리뷰트를 이용해 form id를 지정해 사용<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">9. <input> formaction 어트리뷰트 – formaction 어트리뷰트는 form이 전송될 때 input 필드를 컨트롤하는 하나의 파일 url을 지정할 수 있 다. – formaction 어트리뷰트는 <form> 엘리먼트의 <form> 엘리먼트를 오버라이드 한다. – Note: formaction 어트리뷰트는 type="submit"과 type="image"에 사용할 수 있다. – 지원브라우저: FF, Chrome, Safari, Opera – 예제코드: form안에 2개의 전송 버튼이 있고 서로 다른 action을 가지고 있다.
  73. 73. 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>10. <input> formenctype 어트리뷰트 – formenctype 어트리뷰트는 서버에 전송할 때 form-data가 어떻게 인코딩 되어 있어야 하는지 를 지정할 때 사용한다. – formenctype 어트리뷰트는 <form> 어트리뷰트의 enctype 어트리뷰트를 오버라이드 한다. – Note: formenctype 어트리뷰트는 type="submit"과 type="image"에 사용된다. – 예제코드: 첫번째 전송 버튼은 기본 인코드로 form-data를 보내고 두번째 버튼은 "multipart/form-data"를 보낸다.<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>
  74. 74. 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 usingPOST"></form>
  75. 75. 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>
  76. 76. 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>
  77. 77. 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">
  78. 78. 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>
  79. 79. 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">
  80. 80. 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 lettercountry code">
  81. 81. 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">
  82. 82. 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">
  83. 83. 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">
  84. 84. HTML5 웹 스토리지
  85. 85. 12. HTML5 웹 스토리지 – HTML5 웹 저장소는 쿠키(cookies) 보다 더 나은 로컬 저장소 이다.1. HTML5 웹 저장소는 무엇인가? – HTML5로 웹 페이지는 사용자의 브라우저내에 로컬 데이터를 저장할 수 있다. – 웹 저장소는 쿠키보다 더 안전하고 빠르다. – 데이터는 서버 요청마다 포함되지 않지만 질문을 통해 사용될 수 있다. 이것은 또한 데이터의 많은 수 를 저장할 수 있다. – 데이터는 키/값 쌍으로 저장된다. 그리고 하나의 웹 페이지는 저장된 데이터에 접근할 수 있다.2. 지원되는 브라우저 – IE8+, FF, Opera, Chrome, Safari • IE7 그리고 그 이전 버전은 웹 저장소를 지원하지 않는다.3. 로컬 저장소와 세션 저장소 – 클라이언트에 저장하는 데이터를 위한 2개의 새로운 객체가 있다. • 로컬저장소 - 기간 만료 없이 데이터를 저장 • 세션저장소 - 하나의 세션에 대한 데이터를 저장 – 웹 저장소를 사용하기 전에 로컬저장소와 세션저장소를 지원하는지 체크해야 한다.
  86. 86. 12. HTML5 웹 스토리지if(typeof(Storage)!=="undefined") { // Yes! localStorage and sessionStorage support! // Some code.....}else { // Sorry! No web storage support..}4. 로컬저장소(loalStorage) 객체 – 로컬저장소 객체는 만료일 없는 데이터를 저장한다. 데이터는 브라우저가 닫혀도 삭제되지 않 고 다음날, 다음주 또는 1년 뒤에도 이용이 가능할 것이다. – 예제코드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).";
  87. 87. 12. HTML5 웹 스토리지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.";
  88. 88. HTML5 응용 프로그램 캐시
  89. 89. 12. HTML5 웹 스토리지 – HTML5로 캐시 매니페스트 파일을 생성하는 것만으로 하나의 웹 응용 프로그램 오프라인 버 전을 만들기가 쉽다.1. 응용 프로그램 캐시란 무엇인가? – 응용 프로그램 캐시는 3가지 이점을 응용 프로그램에 제공한다. • 오프라인 브라우징 - 사용자는 오프라인에서도 응용 프로그램을 사용할 수 있다. • 속도 - 캐시된 리소스는 빠르게 읽을 수 있다. • 줄어든 서버 로드 - 브라우저는 서버로 부터 업데이트 되거나/변경된 것만 다운로드 할 것이다.2. 브라우저 지원 – FF, Opera, Chrome, Safari3. HTML5 캐시 매니페스트 예제 – 예제는 하나의 캐시 매니페스트와 함께 HTML 문서를 보여준다.(오프라인 브라우징)
  90. 90. 12. HTML5 웹 스토리지<!DOCTYPE HTML><html manifest="demo.appcache"><body> The content of the document......</body></html>4. 캐시 매니페이스 기본 – 응용 프로그램 캐시 활성화를 위해 문서의 <html>테그에 매니페스트 어트리뷰트를 포함한다.<!DOCTYPE HTML><html manifest="demo.appcache">...</html> – 사용자가 방문할 때 모든 페이지에 지정된 매니페스트 어트리뷰트에 캐시될 것이다. 만약에 매니페스트 어트 리뷰트가 지정되지 않았다면 페이지는 캐시되지 않을 것이다. – 매니페스트 파일에 대한 추천되는 확장자는 .appcache 이다. – 매니페스트 파일은 올바른 MIME-type과 함께 사용되야 한다. 그래서 웹 서버상에 "text/cache-manifest"가 설 정되어야만 한다.
  91. 91. 12. HTML5 웹 스토리지5. 매니페스트 파일 – 매니페스트 파일은 캐시가 무엇인지 브라우저에게 말하는 간단한 텍스트 파일이다. – 매니페스트 파일은 3개의 영역을 가진다. 1. CACHE MANIFEST - 헤더 아래 기재된 파일은 처음으로 다운로드된 후에 캐시될 것이다. 2. NETWORK - 헤더 아래 기재된 파일은 서버로 하나의 연결을 요구한다. 그리고 캐시될 것이다. 3. FALLBACK - 헤더 아래 기재된 파일이 만약 하나의 페이지에 접근이 어렵다면 대체(fallback )할 페이 지를 지정한다. – 캐시 매니페스트 • 첫번째 라인에 CACHE MANIFEST라고 표시한다. – CACHE MANIFEST /theme.css /logo.gif /main.js • 매니페스트 파일은 3개의 자원을 표시한다.(CSS 파일, GIF 이미지 그리고 자바스크립트) • 매니페스트 파일이 로드될 때 브라우저는 웹 사이트의 루트에서 3개의 파일을 다운로드할 것이다. • 사용자가 인터넷에 연결되어 있지 않아도 언제든 리소스 이용이 가능할 것이다.
  92. 92. 12. HTML5 웹 스토리지– NETWORK • NETWORK 영역 아래에 지정한다. 파일 login.asp"는 캐시되어져야만 한다. 그리고 오프라인에 서 이용하지 못할 것이다. – NETWORK: login.asp • 애스터리스크는 모든 다른 리소스에 대한 인터넷 연결 요구를 지시할 때 사용한다. – NETWORK: *– FALLBACK • FALLBACK 영역은 인터넷이 연결되어 있지 않을 때 /html/ 목록 안에 있는 모든 파일을 대신해 "offline.html"로 대체되게 된다. – FALLBACK: /html/ /offline.html • Note: 첫번째 URI는 자원이고 두번째가 fallback 이다.
  93. 93. 12. HTML5 웹 스토리지 6. 캐시 업데이트 – 응용 프로그램이 캐시했을 때 이것은 다음의 일중 하나가 발생할 때 까지 캐시되어 남는다. • 사용자가 브라우저의 캐시를 제거했다. • 매니페스트 파일이 수정되었다. • 응용 프로그램 캐시가 프로그램으로 수정되었다. – 예제 - 완전한 캐시 매니페스트 파일CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsNETWORK:login.aspFALLBACK:/html/ /offline.html
  94. 94. 12. HTML5 웹 스토리지 • Tip: 위에서 "#" 라인은 코멘트를 위한 라인이다. 하지만 이것은 또 다른 목적을 가진다. 응용 프 로그램의 캐시가 매니페스트 파일 변경으로 인해 수정되었을 때 이다. 만약 당신이 이미지나 자 바스크립트 함수를 수정했다면 이러한 변경에 대해 다시 캐시되지 않는다. 코멘트 라인에 수정 날짜나 버전을 수정하는 것으로 브라우저가 당신의 파일을 다시 캐시할 수 있도록 만드는 하나 의 방법이다.– 응용 프로그램 캐시 주의하기 • 여러분의 캐시는 무엇을 주의해야 하는가? – 하나의 파일이 캐시된 브라우저는 서버상의 파일이 변경되었더라도 캐시된 버전을 보여주기를 계속할 것이다. 브라우저가 업데이트 캐시를 활성화 하기 위해 매니페스트 파일을 변경하는 것 이 필요하다. • Note: 브라우저들은 캐시된 데이터에 대해 제한된 크기를 가질 것이다.(어떤 브라우저는 하나의 사이트에 대해 5MB 제한을 가진다.)
  95. 95. HTML5 웹 워커
  96. 96. 12. HTML5 웹 워커 – 웹 워커는 페이지의 퍼포먼스에 관계없이 배경에서 실행되는 하나의 자바스크립트 이다.1. 웹 워커는 무엇인가? – HTML 페이지에서 스크립트가 실행될 때 페이지는 스크립트가 종료될 때까지 응답을 하지 않 는다. – 웹 워커는 페이지 퍼포먼스와 관계없이 다른 스크립트와 독립적으로 배경에서 실행되는 하나 의 자바스크립트 이다. – 여러분은 클릭이나 선택과 같은 것들에 대해 원하는대로 액션이 가능하다.(배경에서 웹 워커 가 실행되기 때문에...)2. 지원 브라우저 – IE를 제외한 대부분의 메이저 브라우저를 지원한다.(FF, Chrome, Safari, Opera) – 사용자의 브라우저에서 웹 워커를 지원하는지 반드시 체크해야 한다. • 웹 워커 지원 체크
  97. 97. 12. HTML5 웹 워커if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... }else { // Sorry! No Web Worker support.. } • 웹 워커 파일 생성 1. 외부 자바스크립트에 웹 워커를 생성 2. "demo_workers.js"라는 파일에 하나의 스크립트 카운트를 생성하고 저장.var i=0;function timedCount() { i=i+1; postMessage(i); setTimeout("timedCount()",500);}timedCount();
  98. 98. 12. HTML5 웹 워커 3. 위의 코드에서 중요한 부분은 postMessage() 메서드 이다. (HTML 페이지에 메세지를 돌려준 다.) • 하나의 웹 워커 객체 생성 1. HTML 페이지에서 웹 워커 파일을 호출한다. 2. 아래의 코드 처럼 웹 워커가 이미 존재하는지 아닌지를 판단하는 로직을 이용하고 "demo_workers.js"를 실행한다.if(typeof(w)=="undefined") { w=new Worker("demo_workers.js");} 3. 이것을 통해 우리는 웹 워커에 메세지를 보내거나 받거나 할 수 있다. 4. 웹 워커에 "onmessage" 이벤트 리스너를 추가하자.w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data;}; 5. 웹 워커가 하나의 메세지를 배달할 때 이벤트 리스너 내 코드가 실행된다. 웹 워커로 부터의 데이 터는 event.data 안에 저장된다.
  99. 99. 12. HTML5 웹 워커 – 웹 워커는 페이지의 퍼포먼스에 관계없이 배경에서 실행되는 하나의 자바스크립트 이다.3. 웹 워커 끝내기 – 웹 워커 객체가 생성될 때 웹 워커가 종료될 때까지 메세지 듣기를 계속할 것이다. – 웹 워커가 종료되기 위해 브라우저/컴퓨터 자원은 teminate() 메서드를 사용한다.4. 전체 웹 워커 예제 코드 – 다음 장에 코드 제시.
  100. 100. 12. HTML5 웹 워커<!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 Workers..."; }}function stopWorker() { w.terminate();}</script></body></html>
  101. 101. 12. HTML5 웹 워커5. 웹 워커와 DOM – 웹 워커는 외부 파일에 있기 때문에 다음의 자바스크립트 객체에 접근할 수 없다. • window object • document object • parent object
  102. 102. HTML5 Server-Sent Event(SSE)
  103. 103. 13. HTML5 Server-Sent Event(SSE) – HTML5 Server-Sent Event는 서버로 부터 업데이트를 가져오기 위한 웹 페이지를 인정한다.1. Server-Sent Event - 단방향 메세지 – server-sent 이벤트는 하나의 웹 페이지가 서버의 업데이트를 자동으로 가져오는 이벤트 이다. – 이것은 전에도 가능했다. 그러나 웹 페이지가 업데이트 될 것인지 물어야 했다. 하지만 server- sent 이벤트는 자동으로 업데이트를 해줍니다. – 예: 페이스북/트위터 업데이트, 주식값 업데이트, 뉴스피드, 스포츠 결과 등2. 지원 브라우저 – FF, Chrome, Safari, Opera (IE제외)
  104. 104. 13. HTML5 Server-Sent Event(SSE)3. Server-Sent 이벤트 알림 받기 – EventSource 객체는 server-side 이벤트 알림을 받기 위해 사용된다.var source=new EventSource("demo_sse.php");source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>";}; – 예제 설명 • EventSource 객체를 생성한다. 그리고 업데이트를 보내기 위해 특정 URL을 지정한다.(이 예제 에서는 "demo_sse.php") • 업데이트를 받을 때 마다 onmessage 이벤트가 발생한다. • onmessage 이벤트가 발생할 때 엘리먼트 id="result"로 데이터를 받는다.
  105. 105. 13. HTML5 Server-Sent Event(SSE)4. Server-Sent 이벤트 지원 체크 – Server-Sent 이벤트를 지원하는 브라우저를 체크하기 위해 아래의 코드를 참고한다.if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code.....}else { // Sorry! No server-sent events support..} – Server-Side 코드 예제 • 위의 예제를 위해 서버에 데이터를 업데이트 하거나 보낼 수 있는 능력이 필요하다.(PHP나 ASP 같은 것) • server-side 이벤트 스트림 문법은 간단하다. 헤더의 "Content-Type"에 "text/event-stream"을 설 정한다. • 이제 이벤트 스트림 보내기를 사용할 수 있다. • PHP 내 코드(demo_sse.php)는 아래와 같다.
  106. 106. 13. HTML5 Server-Sent Event(SSE)<?php header(Content-Type: text/event-stream); header(Cache-Control: no-cache); $time = date(r); echo "data: The server time is: {$time}nn"; flush();?> • ASP 안에서 코드는 아래와 같다.(demo_sse.asp)<%Response.ContentType="text/event-stream"Response.Expires=-1Response.Write("data: " & now())Response.Flush()%> – 코드에 대한 설명 • 헤더의 "Content-type"에 "text/evnet-stream"을 설정 • page가 cache 되지 않도록 지정 • 데이터가 보내질 수 있도록 출력한다.(항상 시작은 "data:"로 한다.) • 웹 페이지에 데이터가 출력될 수 있게 Flush 한다.
  107. 107. 13. HTML5 Server-Sent Event(SSE)5. EventSource 객체 – 위의 예제에서 메세지를 가져오기 위해 onmessage 이벤트를 사용한다. 하지만 이것 말고도 다른 이벤트도 사용이 가능하다. 이벤트 정의onopen 서버가 오픈되고 연결될 때onmessage 메세지를 받을 때onerror 오류가 발생했을 때

×