출처 :
http://kimstar.pe.kr/blog/249
개요
새로운 마크업
- 문서 구조 : header, footer, nav, section
- 의미 기반 : progress, time, mark, meter
- http://html5doctor.com/designing-a-blog-with-html5/
- 삭제된 놈들
- CSS로 대체 가능한 것들 : big, center, font, s, strike
- 부정적인 것들 : frame, applet, acronym
편리한 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
>
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
>
04.
<
section
>
05.
<
h1
>HTML5 오픈 컨퍼런스!</
h1
>
06.
<
p
>차세대 웹 서비스를 위한 새로운 웹 표준!</
p
>
07.
</
section
>
08.
</
a
>
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
>
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
>
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
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
@font-face
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(
90
deg);-o-transform-origin:
0
100%
;
2.
-moz-transform:rotate(
90
deg);-moz-transform-origin:
0
100%
;
3.
-webkit-transform:rotate(
90
deg);-webkit-transform-origin:
0
100%
;
4.
filter:progid:DXImageTransform.Microsoft.Matrix(M
11
=
6.123031769111886
5.
e
-17
, M
12
=
-1
, M
21
=
1
, M
22
=
6.123031769111886
e
-17
, sizingmethod=
'autoexpand'
);
transition
1.
a{
padding
:
10px
15px
;
margin
:
0
;
2.
-o-transition:
0.2
s;
3.
-webkit-transition:
0.2
s;
4.
}
5.
a:hover{
padding
:
15px
20px
;
margin
:
-6px
; opacity:
0.8
;}
animation
- 'webkitFire'라는 사용자 정의 에니메이션 실행
1.
.ani { -webkit-animation:webkitFire infinite
1
s linear;}
2.
@-webkit-keyframes
'webkitFire'
{
3.
from{ -webkit-transform:rotate(
0
deg);}
4.
to{-webkit-transform:rotate(
360
deg);}
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) 요소
2.
<
rect
x
=
"10"
y
=
"10"
height
=
"100"
width
=
"100"
style
=
"stroke:#ff0000; fill: #0000ff"
/>
3.
</
svg
>
Offline Application Cache
- 리소스를 로컬에 저장하면 ==> 오프라인 브라우징, 속도 향상, 서버 부하 감소(브라우저는 변경된 리소스만 다운로드)
- 캐시파일 목록 지정
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
13.
# static.html 파일은 main.py 파일에 접근할 수 없을 때 보여짐
14.
FALLBACK:
15.
/main.py /static.html
16.
/ /offline.html // 오프라인되면 offline.html 이 보여짐
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
Web Sockets
- Server & Client 사이의 full-duplex 통신채널. Comet의 대안으로 고안됨
- 서버에서 Web Sockets 프로토콜을 지원해야 함.
- XHR1보다 적은 대역폭, 빠른 송/수신
- 클라이언트 예제
01.
<!DOCTYPE html>
03.
<
head
>
04.
<
title
>Web Socket Example</
title
>
05.
<
meta
charset
=
"UTF-8"
>
06.
<
script
>
07.
window.onload = function() {
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.
};
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"
/>
개발 & 테스트