HTML5 가이드

PP/HTML5
posted by 방랑군 2012. 1. 4. 13:02
출처 : http://kimstar.pe.kr/blog/249

개요

새로운 마크업

편리한 Form 속성

  • datetime (달력)
  • range (스크롤바)
  • url(웹사이트 목록)
  • email(메일 주소 유효확인)
  • color (색상표)

API 제공

  • canvas
  • video
  • audio
  • AppCache
  • Key/Value 기반 데이터 저장소 (DOM Storage, IndexedDB)
  • SQL 기반 데이터베이스 (Web Database)
  • Web Stocket
  • 문서간 알림 기능 (Server-sent Event)
  • contenteditable (사용자 경험 증대????)
  • draggable (드래그 앤 드롭)
  • Geolocation
  • ...

마크업

구조와 문법






01.<!doctype html>



02.<html>



03.<head>



04.<meta charset="UTF-8">



05.<title>HTML5 마크업</title>



06.</head>



07.<body>



08.<p>차세대 웹표준으로서 HTML5



09.</body>



10.</html>

문자 인코딩

  • HTTP 헤더에서 선언
  • 유니코드 BOM에서 선언
  • meta 태그 사용





1.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">



2.<meta charset="UTF-8">

MathML와 SVG






1.<title>SVG in text/html</title>



2.<p>



3.A green circle:



4.<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>



5.</p>

문법 검사

구조






01.<article>



02.<hgroup>



03.<h1>Apples</h1>



04.<h2>Tasty, delicious fruit!</h2>



05.</hgroup>



06.<p>The apple is the pomaceous fruit of the apple tree.</p>



07.<section> // ==> 예를 들면 탭의 요소로 사용, 의미가 없는 요소라면 div를 써라



08.<h1>Red Delicious</h1> // ==> 각 section에서 전체 문서와 상관없는 h1 사용



09.<p>These bright red apples are the most common found in many supermarkets.</p>



10.</section>



11.<section>



12.<h1>Granny Smith</h1>



13.<p>These juicy, green apples make a great filling for apple pies.</p>



14.</section>



15.</article>
  • nav : 네비게이션을 위한 섹션
  • article : 독립적인 글 (블로그 글, 뉴스 본문), article 중첩시 안쪽것(블로그 글)은 바깥것(댓글)과 관련 있다.
  • aside : 본문과 관계없는 내용 (광고, 링크)
  • hgroup : 섹션의 제목이 여러단계일때 사용 (Heading Group)
  • header : 소개(목차, 검색창, 로고 등이 배치), 문서구조상 섹션으로 간주안함.
  • footer : 가까운 섹션의 푸터 (저자, 저작권 등 배치), 문서구조상 섹션으로 간주안함.
  • figure : 그래픽/비디오의 캡션을 표시





1.<figure>



2.<video src="ogg"></video>



3.<figcaption>Example</figcaption>



4.</figure>

헤딩과 섹션

  • 헤딩 : h1, h2, h3, h4, h5, h6, hgroup
  • 섹셔닝 루트 (상위/다른 아웃라인과 무관) : blockquote, body, details, fieldset, figure, td
  • 예제 #1





01.<body>



02.<h1>Foo</h1>        // 1. Foo (Grunt 문단을 가지고 있는 body 섹션의 헤딩)



03.<h2>Bar</h2>        // 1-1. Bar (Baz 문단과 blockquote 요소 포함한 섹션의 헤딩)



04.<blockquote>



05.<h3>Bla</h3>



06.</blockquote>



07.<p>Baz</p>



08.<h2>Quux</h2>       // 1-2. Quux (내용이 없고 헤딩만 있는 섹션의 헤딩)



09.<section>           // 1-3. Thud (section 요소로 표시된 섹션의 헤딩)



10.<h3>Thud</h3>



11.</section>



12.<p>Grunt</p>



13.</body>
  • 예제 #2





1.<body>              // body 요소로부터 하나의 섹션이 만들어지고



2.<h1>A</h1>      // 이 섹션은 헤딩 A와 문단B를 갖는다



3.<p>B</p>



4.<h2>C</h2>      // 이 섹션은 다은 두개의 섹션을 포함한다. h2 요소로부터 하나의 섹션이 만들어지고 헤딩 C와 문단 D를 갖는다.



5.<p>D</p>



6.<h2>E</h2>      // 그 다음 h2 요소로부터 하나의 섹션이 또 만들어지고 헤딩 E와 문단 F를 갖는다.



7.<p>F</p>



8.</body>

그 밖의 요소

  • video, audio : 비디오/오디오 콘텐츠, 스크립트로 제어, source요소에 여러개 미디어 사용가능
  • embed : 플러그인 콘텐츠 사용
  • mark : 중요하다고 생각되는 텍스트에 표기
  • progress : 진행상황
  • meter : 분량,수량을 나타냄
  • time : 날짜,시간
  • ruby, rt, rp : 루비 주석 (일본어에서 한문에 음을 달때), < ruby >기준 텍스트 < rt > 또는 < rp >에 루비주석
  • canvas : 동적인 비트맵 이미지 구현시
  • command : 사용자가 수행할 수 있는 명령
  • details : 추가정보, summary를 통해 요약,제목,캡션등을 표시





01.<section class="progress window">



02.<h1>"Really Achieving Your Childhood Dreams" 복사중...</h1>



03.<details>



04.<summary>복사중...



05.<progress max="375505392" value="97543282"></progress> 25%



06.</summary>



07.<dl>



08.<dt>초당 전송량:</dt> <dd>452KB/s</dd>



09.<dt>복사할 파일명:</dt> <dd>/home/rpausch/raycd.m4v</dd>



10.<dt>걸린시간:</dt> <dd>01:16:27</dd>



11.</dl>



12.</details>



13.</section>
  • datalist : option의 묶음을 나타낸다. input의 list, datalist의 id로 서로 연결된다.
  • keygen : 서버로 공개키 보내고, 로컬에 개인키 저장
  • output : 생성된 결과물
  • style, script : "text/css"와 "text/javascript" 같은 type 속성이 생략 가능해짐





01.<style>



02.#myelement {



03.width: 100px;



04.}



05.</style>



06.<script>



07.function myfunction() {



08.return 'Hello world';



09.}



10.</script>
  • input : type속성에 따라 다양한 형식으로 사용됨
    • hidden(감춰짐), text(텍스트), search(검색), tel(전화번호), url(URL), email(이메일), password(비밀번호)
    • datetime(날짜와 시각), date(날짜), month(달), week(주), time(시각), datetimelocal(로컬 날짜와 시각)
    • number(숫자), range(범위), color(색), checkbox(체크박스), radio(라디오 버튼), file(파일), submit(전송)
    • image(이미지), reset(리셋 버튼), button(버튼),

새로운 속성

  • media : a, area의 미디어 속성
  • ping : a, area의 ping 속성(클릭정보 수집 등)
  • hreflang, rel : area의 속성 ???????????????????????
  • target : base에 target 속성 (a에서와 비슷)
  • charset : meta의 charater set속성
  • autofocus : input(hidden일때 빼고) / textarea / button에 문서 로드시 자동 포커스되는 속성
  • placeholder : input/textarea 에 힌트(예:아이디 입력) 속성. 긴 힌트는 title 속성을 사용해야함.
  • form : input/output/select/textarea/button/fieldset 요소에 사용되는 속성. form 밖에 위치할 수 있게함.
  • required : input(hidden/image 제외) / button(submit 제외)의 유효성 검사 속성. 반드시 사용자가 입력해야함.





01.<h1>회원 등록</h1>



02.<form action="/newaccount" method=post>



03.<p>



04.<label for="username">이메일 주소:</label>



05.<input id="username" type=email required name=un>       // 입력 필수요소



06.<p>



07.<label for="password1">비밀번호:</label>



08.<input id="password1" type=password required name=up>   // 입력 필수요소



09.<p>



10.<label for="password2">비밀번호 확인:</label>



11.<input id="password2" type=password onforminput="setCustomValidity(value != password1.value ? '비밀번호가 불일치' : '')">



12.<p>



13.<input type=submit value="계정 생성">



14.</form>
  • disable : fieldset을 비활성화
  • autocomplete, min, max, multiple, pattern, step : input의 속성
  • type, label : menu요소에 지정하여 컨텍스트 메뉴 제작
  • scoped : style 요소에 지정하여 특정부분만 스타일 적용
  • async : style요소에 지정하여 스크립트 로딩/실행 타이밍 조절
  • manifest : html요소에 지정. API에서 캐시정보 사용가능.
  • sizes : link에 아이콘 기본 크기정보 표시
  • reversed : ol에 지정하여 번호순서 변경
  • sandbox, seamless, srcdoc : iframe를 샌드박스로 사용.

글로벌 속성

  • 글로벌 속성(class, dir, id, lang, style, tabindex, title)을 모든 요소에 지정할 수 있음.
  • contenteditable : content를 edit할 수 있다.
  • contextmenu : context menu를 지정할 수 있음.
  • data-* : 저작자가 새로운 속성을 지정
  • draggable : drag & drop API를 사용할 수 있음
  • hidden : 문서상에 존재하지 않도록 함. CSS로 화면에 안보이는것과 다름.
  • role, aria-* : 보조기기에서 접근성 향상
  • spellcheck : 맞춤법 검사.
  • onclick, onfocus.. : HTML4의 on{이벤트이름} 사용가능

변경된 요소

  • a : 버튼처럼 상호작용 요소 없으면 문단/리스트/표/섹션등 포함 가능





01.<aside class="advertising">



02.<h1>광고</h1>



03.<a href="http://naver.com">



04.<section>



05.<h1>HTML5 오픈 컨퍼런스!</h1>



06.<p>차세대 웹 서비스를 위한 새로운 웹 표준!</p>



07.</section>



08.</a>



09.<a href="http://daum.net">



10.<section>



11.<h1>HTML5 가이드 북!</h1>



12.<p>가이드 북을 함께 나눠드립니다.</p>



13.</section>



14.</a>



15.</aside>
  • address : 문서구조에서 특정범위에 적용
  • b : 다르게 나타내야 하는 텍스트 (상품이름, 키워드..)
  • hr : 문단 수준의 나눔을 의미함
  • i : 다른 텍스트와 구분할 텍스트를 표시 (기술용어, 다른표현, 생각..)
  • label : 포커스를 이동하지 않음
  • menu : 툴바/컨텍스트메뉴를 위해 개선됨
  • small : 작게 출력 (추가적 코멘트, 법적 표현 등..)
  • string : 중요함 (강한강조 X)

변경된 속성

  • border : border는 0을 지정해야 함. 대신 CSS를 권장.
  • language : 왠만하면 생략
  • name : a요소의 name속성보다 id속성을 권장
  • summary : table요소의 summary속성은 HTML5의 다른걸로 권장

빠진 요소

  • basefont, big, center, font, s, strike, tt, u : 표현과 관련하여 빠짐
  • frame, frameset, noframes : 컨텐츠 네비게이션할때 영향 미치는 것
  • acronym : 많이 안씀. abbr 사용할것
  • applet : object로 대체
  • isindex : 다른 콘트롤 요소로 대체
  • dir : ul로 대체

빠진 속성

  • HTML5 에서 빠진 놈들

    • version : html 요소
    • name(id 사용 권장) : img 요소

  • 표현과 관련된 놈들 (CSS로 대체해라)

    • align : caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • alink, link, text, vlink : body 요소
    • background : body요소
    • bgcolor : body요소
    • border : table, object 요소
    • cellpadding, cellspacing : table 요소
    • frame : table 요소
    • frameborder : iframe 요소
    • height : td, th 요소
    • scrolling : iframe 요소
    • valign : col, colgroup, tbody, td, tfoot, th, thead, tr 요소
    • width : hr, table, td, th, col, colgroup, pre 요소

예제






01.<body>



02.<header>



03.<h1>HTML5 의 세계로!</h1>



04.<nav>



05.<ul>



06.<li><a href="news.html">새소식</a></li>



07.<li><a href="blog.html">블로그</a></li>



08.<li><a href="example.html">예제</a></li>



09.</ul>



10.</nav>



11.</header>



12.<div> <!-- 여러개의 주제라서 div로 묶음. 하나의 주제라면 section이 좋다. -->



13.<article>



14.<header>



15.<h1>HTML5 오픈 컨퍼런스가 열립니다.</h1>



16.</header>



17.<p>2010 년 7 월 2 일 ...</p>



18.<!-- 블로그 글 내용 -->



19.<footer>



20.<p>



21.<time pubdate datetime="2010-06-20T14:36-08:00">어제</time> 작성 되었음



22.</p>



23.</footer>



24.</article>



25.<article> <!-- 생략 -->



26.</article>



27.<article> <!-- 생략 -->



28.</article>



29.</div>



30.<footer>



31.<p> <!-- 푸터임을 알기에 nav를 쓰지 않고 그냥 p  -->



32.<a href="about.html">이 블로그에 관하여</a>



33.| <a href="policy.html">개인정보 보호정책</a>



34.| <a href="contact.html">연락처</a>



35.</p>



36.</footer>



37.</body>

CSS3

text-shadow

  • 그림자 효과
  • blur 생략시 0





1.text-shadow:5px 5px 0 #ccc;



2.filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5,



3.Color=#cccccc, Positive=true);



4.display:inline-block; zoom:1; text-shadow:x_offset y_offset



5.blur_radius color

text-overflow

  • 글이 넘칠때 말줄임표(...)





1.text-overflow:ellipsis;



2.-o-text-overflow:ellipsis;

word-wrap

  • 워드랩 (강제 개행)





1.word-wrap:break-word;

@font-face

  • ttf (비 IE지원)
  • eot (IE 지원)





1.@font-face{ font-family:ngttf; src:url(NanumGothic.ttf);}



2.@font-face{ font-family:ngeot; src:url(NanumGothic.eot);}



3.body, input, textarea, select, button{ font-family:NanumGothic, 맑은고딕, ngttf, ngeot;}

opacity

  • 투명도





1.opacity:0.5;



2.filter:alpha(opacity=50);

box-shadow

  • 박스형 테두리 그림자
  • 순서 : X좌표, Y좌표, blur값, 그림자색





1.box-shadow:10px 10px 10px silver;



2.-moz-box-shadow:10px 10px 10px silver;



3.-webkit-box-shadow:10px 10px 10px silver;



4.filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=10); box-shadow:x_offset y_offset blur_radius color

border-radius

  • 둥근 테두리





1.border-radius:30px;



2.-moz-border-radius:30px;



3.-webkit-border-radius:30px;

background(s)






1.background:



2.url(bg.gif) no-repeat left top,



3.url(bg.gif) no-repeat right top,



4.url(bg.gif) no-repeat left bottom,



5.url(bg.gif) no-repeat right bottom;

gradient






1.background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%,



2.from(#3EAF0E), to(#fff));



3.background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);



4.filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

transform

  • 회전, 이동, 크기, 비틀기





1.-o-transform:rotate(90deg);-o-transform-origin:0 100%;



2.-moz-transform:rotate(90deg);-moz-transform-origin:0 100%;



3.-webkit-transform:rotate(90deg);-webkit-transform-origin:0 100%;



4.filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886



5.e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingmethod='autoexpand');

transition

  • 메뉴에 마우스 올리면 부드럽게 움직이는 효과





1.a{padding:10px 15px; margin:0;



2.-o-transition:0.2s;



3.-webkit-transition:0.2s;



4.}



5.a:hover{padding:15px 20px; margin:-6px; opacity:0.8;}

animation

  • 'webkitFire'라는 사용자 정의 에니메이션 실행





1..ani { -webkit-animation:webkitFire infinite 1s linear;}



2.@-webkit-keyframes 'webkitFire'{



3.from{ -webkit-transform:rotate(0deg);}



4.to{-webkit-transform:rotate(360deg);}



5.}

HTML5 API

미디어 요소 - Audio와 Video 요소






01.<video autoplay>



02.<source src="foo.ogg" type="video/ogg">



03.<source src="foo.mp4" type="video/mp4">



04.<source src="foo.webm" type="video/webm">



05.당신의 브라우저는 <pre><video></pre> 요소를 지원하지 않습니다.



06.</video>



07.<input type="button" onclick="playPause()" value="Play/Pause">



08. 



09.function playPause() {



10.var myVideo = document.getElementsByTagName('video')<0>;



11.if (myVideo.paused)



12.myVideo.play();



13.else



14.myVideo.pause();



15.}

미디어 요소 - Canvas 요소






1.<canvas id="example" width="200" height="200">



2.이 메시지는 사용자의 브라우저에서 HTML5 캔버스를 지원하지 않는 경우 표시 됨



3.</canvas>



4. 



5.var example = document.getElementById('example');



6.var context = example.getContext('2d');



7.context.fillStyle = "rgb(255,0,0)";



8.context.fillRect(30, 30, 50, 50);

미디어 요소 - SVG(Scalable Vector Graphics) 요소






1.<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">



2.<rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>



3.</svg>

Offline Application Cache

  • 리소스를 로컬에 저장하면 ==> 오프라인 브라우징, 속도 향상, 서버 부하 감소(브라우저는 변경된 리소스만 다운로드)
  • 캐시파일 목록 지정





1.<html manifest="http://foo.example.com/example.manifest">  // mime-type은 "text/cache-manifest"
  • manifest 예제





01.CACHE MANIFEST              // 첫줄에 항상 위치



02.# 명시적으로 캐시된 항목  // 주석은 #으로 시작



03.CACHE:



04.index.html



05.stylesheet.css



06.images/logo.png



07.scripts/main.js



08.# 사용자가 온라인 상태가 되었을 때 필요한 리소스들



09.NETWORK:



10.login.php



11./myapi



12.http://api.twitter.com



13.# static.html 파일은 main.py 파일에 접근할 수 없을 때 보여짐



14.FALLBACK:



15./main.py /static.html



16./ /offline.html             // 오프라인되면 offline.html 이 보여짐

  • window.applicationCache 개체

    • status 프로퍼티 : 캐시 상태 확인 - appCache.UNCACHED, appCache.IDLE, appCache.CHECKING, appCache.DOWNLOADING, appCache.UPDATEREADY, appCache.OBSOLETE
    • upate() : 캐시를 갱신하도록 시도
    • swapCache() : 오래된 캐시를 새로운 파일로 교체
    • addEventListener() : 이벤트 리스너 등록

  • window.applicationCache 개체 예제






01.var appCache = window.applicationCache;



02.appCache.update(); // 사용자의 캐시를 갱신하도록 시도함



03....



04.if (appCache.status == window.applicationCache.UPDATEREADY) {



05.appCache.swapCache(); // 가져오기에 성공한 경우 새로운 캐시로 교체



06.}



07. 



08.function handleCacheEvent(e) {



09.//...



10.}



11.function handleCacheError(e) {



12.alert('Error: 젠장! 캐시 갱신을 실패하였습니다.');



13.};



14. 



15.// 최초 manifest 의 캐시가 완료된 경우 이밴트 발생



16.appCache.addEventListener('cached', handleCacheEvent, false);

Web Storage

  • Client-Side Database
  • Key-value 형식, 보관/갱신/호출
  • 브라우저에서 제공하는 저장공간 사용 (다른 브라우저간 호환 안됨)
  • 종류 : localStorage / sessionStorage (브라우저 종료 후 데이터 유지 여부에 따라)
  • 예제





01.if (typeof(localStorage) == 'undefined' ) {



02.alert('당신의 브라우저는 HTML5 localStorage 를 지원하지 않습니다. 브라우저를 업그레이드하세요.');



03.} else {



04.try {



05.localStorage.setItem("name", "Hello World!"); // key-value 형식으로 저장



06.} catch (e) {



07.if (e == QUOTA_EXCEEDED_ERR) {



08.alert('할당량 초과!'); // 할당량 초과로 인하여 데이터를 저장할 수 없음



09.}



10.}



11.document.write(localStorage.getItem("name")); // 저장된 값 호출



12.localStorage.removeItem("name"); // 스토리지로 부터 일치하는 아이템 삭제



13.}
  • 쿠키는 HTTP 요청헤더에 포함됨 --> 응답시간에 나쁜 영향 --> Web Storage로 대체하라





1.if (('localStorage' in window) && window.localStorage !== null){



2.// Web Storage  사용



3.} else {



4.// document.cookie 사용



5.}

Web SQL Database

  • client 저장소에 영구 보존 가능, 덩치큰 데이터 체계적 관리 가능
  • 비동기 API : non-blocking 이므로 리턴값 사용X, 정의된 콜백함수에 데이터 전달됨
  • HTML을 통한 트랜젝션 : transaction(읽고 쓰기), readTransaction(읽기전용)
  • 데모 : http://html5.firejune.com/demo/webdb.html 

Web Sockets

  • Server & Client 사이의 full-duplex 통신채널. Comet의 대안으로 고안됨
  • 서버에서 Web Sockets 프로토콜을 지원해야 함.
  • XHR1보다 적은 대역폭, 빠른 송/수신
  • 클라이언트 예제





01.<!DOCTYPE html>



02.<html xmlns="http://www.w3.org/1999/xhtml">



03.<head>



04.<title>Web Socket Example</title>



05.<meta charset="UTF-8">



06.<script>



07.window.onload = function() {



08.var s = new WebSocket("ws://localhost:9876/");



09.s.onopen = function(e) { alert("opened"); }



10.s.onclose = function(e) { alert("closed"); }



11.s.onmessage = function(e) { alert("got: " + e.data); }



12.};



13.</script>



14.</head>



15.<body>



16.<div id="holder" style="width:600px; height:300px"></div>



17.</body>



18.</html>

Web Workers






01.<!DOCTYPE html>



02.<html>



03.<title>Test threads fibonacci</title>



04.<body>



05.<div id="result"></div>



06.<script language="javascript">



07.// 워커 생성, 할일은 js에 있음



08.var worker = new Worker("fibonacci.js");



09. 



10.// 워커의 작업결과



11.worker.onmessage = function(event) {



12.document.getElementById("result").textContent = event.data;



13.console.log("Got: " + event.data + "\n");



14.};



15. 



16.// 오류처리



17.worker.onerror = function(error) {



18.console.log("Worker error: " + error.message + "\n");



19.throw error;



20.};



21. 



22.// 작업 지시



23.worker.postMessage("5");



24.</script>



25.</body>



26.</html>

Server-Sent Event

  • 일종의 푸시 기술, 서버에서 이벤트 발생시 클라이언트로 즉시 전달
  • Client 코드





1.var source = new EventSource('event.php');



2.source.onmessage = function (event) {



3.alert(event.data);



4.};
  • Server 코드 (PHP)





1.<?php



2.header("Content-Type: text/event-stream");



3.echo "data: " . time() . "\n";



4.?>

Rich Web API

Selector API

  • querySelector() : 노드를 발견하지 못하면 null
  • querySelectorAll() : 노드를 발견하지 못하면 빈 목록
  • 예제





01.// 클래스 이름이 'warning', 또는 'note'인 단락 요소(<p>)를 모두 찾음



02.var special = document.querySelectorAll("p.warning, p.note");



03. 



04.// id 가 'main', 'basic', 'exclamation'인 요소들 중 첫 번째 발견된 요소를 찾음



05.var el = document.querySelector("#main, #basic, #exclamation");



06. 



07.// HTML 문서의 <body>에 속한 <style> 요소들 중 'type' 속성이 없거나, 'text/css'인 첫 번째 발견된 요소를 찾음



08.var style = document.body.querySelector("style<type='text/css'>, style:not(<type>)");



09. 



10.// id 가 'fruits'인 요소의 <input> 요소(체크박스)들 중 선택된(checked) 요소를 찾음



11.var list = document.querySelectorAll("#fruits input:checked");



12. 



13.// 또는



14.var list = document.getElementByID('fruits').querySelectorAll("input:checked");

Drag and Drop

Geolocation






01.// Geolocation 지원여부 확인



02.if (navigator.geolocation) {



03.console.log('Geolocation 을 지원합니다.');



04.}



05.else {



06.console.log('이 브라우저또는 OS 는 Geolocation 을 지원하지 않습니다.');



07.}



08. 



09.// 페이지 로드시 위치정보 표시



10.window.onload = function() {



11.var startPos;



12.navigator.geolocation.getCurrentPosition(function(position) {



13.startPos = position;



14.document.getElementById('startLat').innerHTML = startPos.coords.latitude;



15.document.getElementById('startLon').innerHTML = startPos.coords.longitude;



16.}, function(error) {



17.alert('오류 발생. 오류 코드: ' + error.code);



18.// error.code 는 다음을 의미함:



19.// 0: 알 수 없는 오류



20.// 1: 권한 거부



21.// 2: 위치를 사용할 수 없음 (이 오류는 위치 정보 공급자가 응답)



22.// 3: 시간 초과



23.});



24.};

IndexedDB

  • on/offline 저장 가능, Client-side Database
  • Web Database 와 비교시..
    • 스크립트로 다루기에 최적화된 인터페이스
    • 알고리즘 방식의 입/출력
    • 동기/비동기 지원
    • 커서 지원하여 RDB 형식으로 설계가능
  • 예제





01.var db = indexedDB.open('books', 'Book store', false);



02.if (db.version !== '1.0') {



03.var olddb = indexedDB.open('books', 'Book store');



04.olddb.createObjectStore('books', 'isbn');



05.olddb.createIndex('BookAuthor', 'books', 'author', false);



06.olddb.setVersion("1.0");



07.}



08.// db.version === "1.0";



09.var index = db.openIndex('BookAuthor');



10.var matching = index.get('fred');



11.if (matching)



12.report(matching.isbn, matching.name, matching.author);



13.else



14.report(null);

Notifications

File API

WebGL

아이폰 기반 HTML5 앱 개발

개요






01.// 등록되는 아이콘, iPhone : 57x57 ,iPad : 72x72 사이즈의 png



02.// 자동으로 모서리 둥글게 처리됨 (싫으면 파일이름을 apple-touch-icon-precomposed.png 로 하라)



03.<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>



04.// 로딩시 StartUp 이미지



05.<link rel="apple-touch-startup-image" href="/startup.png">



06.// 브라우저 UI를 안보이게 함(마치 native app 처럼)



07.<meta name="apple-mobile-web-app-capable" content="yes" />



08.// 상태바의 색상을 지정 (default:회색, black , black-translucent:반투명)



09.<meta name="apple-mobile-web-app-status-bar-style" content="black" />

개발 & 테스트

 
저작자표시

'PP > HTML5' 카테고리의 다른 글

VIDEO  (0) 2012.01.05
HTML5 가이드  (0) 2012.01.04

티스토리툴바