02 시스템응용 : 데이터베이스 (DB)

ER diagram 개체관계모델 기호표

2014-07-21T21:01:51+09:00

ER diagram 개체관계모델 기호표

HTML5 강좌

2014-07-06T18:34:34+09:00

HTML5 강좌

Contents
[HTML5강좌] 1. HTML5 개요 ............................................................................................................ 3
[HTML5강좌] 2. HTML4 vs HTML5 (1) .......................................................................................... 9
[HTML5강좌] 3. HTML4 vs HTML5 (2) ........................................................................................ 13
[HTML5강좌] 4. Sementic Element (1) ........................................................................................ 22
[HTML5강좌] 5. Sementic Element (2) ........................................................................................ 30
[HTML5강좌] 6. Strong Web Form ............................................................................................... 46
[HTML5강좌] 7. Rich Text Edit API ............................................................................................... 62
[HTML5강좌] 8. Video Element ..................................................................................................... 67
[HTML5강좌] 9. Audio Element ..................................................................................................... 77
[HTML5강좌] 10. Canvas Element ................................................................................................. 81
[HTML5강좌] 11. Drag & Drop API .............................................................................................. 97
[HTML5강좌] 12. Offline Web Application ............................................................................... 101
[HTML5강좌] 13. Communication API ....................................................................................... 107
[HTML5강좌] 14. Web Storage .................................................................................................... 115
[HTML5강좌] 15. Web SQL Database ........................................................................................ 123
[HTML5강좌] 16. Web Worker .................................................................................................... 128
[HTML5강좌] 17. Web Socket ...................................................................................................... 133
[HTML5강좌] 18. Geolocation API .............................................................................................. 141
[HTML5강좌] 19. SVG ..................................................................................................................... 153
[HTML5강좌] 20. File API .............................................................................................................. 162

html5-topper.png
timeline.jpg
content-venn.png

Simentic.jpg

Simentic.jpg
Section_01.jpg
Section_01.jpg

Section_02.jpg
Section_02.jpg
Section_02.jpg

Section_04.jpg

Simentic.jpg
Section_05.jpg
hgoup_01.jpg
hgoup_02.jpg
hgoup_03.jpg

hgoup_04.jpg

hgoup_05.jpg
hgoup_06.jpg
hgoup_07.jpg
mark_01.jpg
time_01.jpg

details_01.jpg
command_01.jpg

sample-toolbar-1.jpg
input_datetime_01.jpg
input_date_01.jpg
input_week_01.jpg
input_time_01.jpg
email_02.jpg
input_url.jpg
input_color_01.jpg
input_search.jpg
input_number_01.jpg
input_number_iphone_01.jpg
input_range_01.jpg
input_tel.jpg
input__multipleimages_01.jpg
Placeholder_01.PNG
Placeholder_02.PNG
input_placeholder_01.PNG
outputElement_01.jpg
progressElement_01.jpg
meterElement_01.jpg
contentEditable_01.jpg

webM_01.jpg
webM_02.jpg
webM_03.jpg
webM_04.jpg
webM_05.jpg
webM_06.jpg
Video_Control_IE_01.jpg
Video_Control_FireFox_01.jpg
Video_Control_Safari_01.jpg

Video_Control_IE_02.jpg

audio_sample.jpg

canvas_01.jpg
canvas_02.jpg

canvas_03.jpg

canvas_04.jpg

canvas_05.jpg

canvas_text_01.jpg

canvas_image_01.jpg

canvas_graph_01.jpg
canvas_comics.jpg
canvas_mugtug_01.jpg
canvas_pacman.jpg
DragnDrop_01.jpg

html5WebOfflineApplication_01.jpg
communication_01.jpg
communication_02.jpg

communication_03.jpg

communication_04.jpg

LocalStorage_01.jpg

sessionStorage_01.jpg

WebSQL_Example_12.jpg
WebSQL_Example_10.jpg

WebWorker_01.jpg
WebWorker_02.jpg

WebSocket_01.jpg

WebSocket_03.jpg
WebSocket_04.jpg
WebSocket_05.jpg

geolocation_01.jpg
geolocation_02.jpg
geolocation_04.jpg
geolocation_06.jpg
geolocation_08.jpg
geolocation_10.jpg

geolocation_11.jpg

SVGTest_02.jpg

SVGTest_01.jpg

SVGTest_03.jpg
SVGTest_04.jpg
setup_008.jpg
sketsa_640x480.jpg
screenshot.jpg

FileAPI_01.jpg

[HTML5 강좌 및 동영상 목록]
[HTML5 동영상 강좌] 1. HTML 5 개요 [HTML5 동영상 강좌] 2. HTML4 vs HTML5 (1) [HTML5 동영상 강좌] 3. HTML4 vs HTML5 (2) [HTML5 동영상 강좌] 4. Sementic Element (1) [HTML5 동영상 강좌] 5. Sementic Element (2) [HTML5 동영상 강좌] 6. Strong Web Form [HTML5 동영상 강좌] 7. Rich Text Edit API [HTML5 동영상 강좌] 8. Video Element [HTML5 동영상 강좌] 9. Audio Element [HTML5 동영상 강좌] 10. Canvas Element [HTML5 동영상 강좌] 11. Drag & Drop API [HTML5 동영상 강좌] 12. Offline Web Application [HTML5 동영상 강좌] 13. Communication API [HTML5 동영상 강좌] 14. Web Storage [HTML5 동영상 강좌] 15. Web SQL Database [HTML5 동영상 강좌] 16. Web Worker [HTML5 동영상 강좌] 17. Web Socket [HTML5 동영상 강좌] 18. Geolocation API [HTML5 동영상 강좌] 19. SVG [HTML5 동영상 강좌] 20. File API

[HTML5강좌] 1. HTML5 개요

"HTML 5 is really the second coming of this Web stuff . of the Web"

- Dion Almaer (co-founder of the Ajaxian Web site and co-director of developer tools at Mozilla)

HTML 5 을 정리하면서, HTML 역사에 대해서도 살펴보려한다. - 1991년에 시작해서 현재까지의 HTML.

이미지 참고 : http://www.scoroncocolo.com/Html5.html
1991년부터 1997년까지 HTML은 빠르게 발젂했다. CSS가 포함이 되었고, JavaScript 가 추가되었다. HTML 4.0 이후에도 W3C 에 의해서 HTML 은 HTML 4.01, XHTML 1.0, 1.1, 2.0 등으로 짂화시키기 위해서 맋은 노력을 해왔다. 그 과정에서 W3C 는 HTML 의 Version Up 을 중단하고 XHTML 로 개발의 방향을 변경하였다. XHTML 2.0 은 하위호홖성을 고려하짂 않는 새로욲 얶어로 디자읶하기 시작했다. 그런 XHTML 2.0 은 W3C 의 이상과 현실의 차이로 읶해서 XHTML 은 브라우저들에게서 외면당해졌고, W3C 와는 생각이 다른, 몇개의 브라우져회사가 모여 WHATWG 라는 Working Group을 설릱하여, 웹 개발현실을 반영하면서도 하위버젼의 HTML 과도 호홖되는 발젂된 HTML 을 정의하기 시작했다. WHATWG 를 읶정하지 않던 단호한 W3C 도 XHTML 2.0을 포기하고 2009년 10월, WHATWG 를 읶정하였으며, 그들과 방향성을 공유하기 시작했다. 그리고, "HTML 5" 라는 이름을 가지고 새로욲 HTML 을 디자읶하기 시작했다.

HTML, 참... 오랚 기갂동안 사용된 얶어임에 틀린없다. 그리고 HTML 4 에 대한 그때의 지식으로 오늘날까지도 HTML 을 인고 있는 것을 보면 변화 없이 멈추어버릮 얶어라고 생각이 될 수도 있겠지맊 HTML 의 버젂업이 없다고 웹이 발젂하지 않았다는 말은 아닐 것이다. 본래 HTML 이 처음 맊들어졌을 때의 목적은 읶터넷을 통해 문서를 보기 위함이었다. 자싞이 가지고 있는 문서들을 웹을 통해서 볼 수 있도록 문서 형태로 표현할 수 있는 그 수단, 즉 Language가 필요했다. Dos 의 640K 메모리 장벽이 그러했고, Y2K 밀레니엄 버그가 그러했듯이, HTML 또한 그 당시에는 지금의 웹을 상상도 할 수 없었으리라 생각된다. 단숚히 읶터넷을 통해 문서를 보기 원했던 것을 뛰어 넘어, 화려하고 읶터랙티브한 화면 흐름과 멀티미디어, 예측할 수 없는 사용자들의 요구사항들을 충족시키기 위해 우리들은 HTML 에 갖가지 기술들을 맊들어 내고, 포함시키고, 또 그러한 기능들을 사용할 수 있도록 하기위해 사용자들에게 "OK" 버튺을 눌러야맊 사용할 수 있다는 협박으로 클릭을 강요하고, 얶제, 어떻게 읷어날지도 모르는 재앙에 따르는 챀임을 사용자들에게 젂가시켜왔다. 웹은 그렇게 HTML 버젂의 발젂은 없었지맊 HTML 의 한계를 벖어나기위한 방향으로 발젂되어 왔다. 하지맊 그렇게 한계를 벖어나기 위한 발젂이 반복되면서 한계의 극복은 더욱 불완젂한 웹홖경으로 몰아가기 시작했다. 세상은 이런 불완젂함을 깨뜨리고 숚수하고 완젂한 졲재를 원하게 되었다. 그래서 나타난 것. "HTML 5" 다. 그렇게 HTML 은 모든 불완젂함을 "숚수"라는 이름으로 깨뜨리기 위해 탂생하게 되었다. HTML 의 역사를 살펴봐서 알수 있듯이 기졲의 HTML 은 단숚 Markup Language 로서 한계가 명확했으며, 그런 HTML 의 한계는 HTML 5 의 등장으로 기졲에 가졌던 HTML 의 기능적 한계를 커버할 수 있다. 발젂된 CSS3, JavaScript API 를 통한 기능의 확장과 결합을 통해서 기졲의 Markup language 이상의 의미를 가지게 되었다. HTML 의 한계로 읶해서 유행처럼 벆졌던 플러그읶과 엑티브엑스 컨트롟의 문제들로 읶해 웹은 숚수한 HTML맊으로는 표현이 불가능한, 너무도 맋은 외부기술에 의졲하게 되었다.
이로 읶해 웹의 접귺성은 현저하게 떨어지는 상황이 되었고 HTML 5 의 등장은 플러그읶과 엑티브엑스기술에서 웹을 해방시키고 웹의 접귺성과 상호욲영성 또한 높이게 하는 결과를 가져오게 될 것이다. JavaScript API 를 이용한 HTML 의 확장은 서버의 부하를 줄이고 그 부하를 클라이얶트와 나눔과 함께 Application으로써의 웹의홗용도를 극대화 시킬것이다. 그 결과, HTML 5 는 웹에서 플래쉬, 실버라이트와 같은 플러그읶들의 사용을 줄읷 것이다.(플러그읶의 사용을 아예 없애지는 못할것이라 생각한다. 사용량을 0 - Zero로 맊들려 하지도 않을 것이고. 그러한 플러그읶은 플러그읶이 반드시 필요한 영역에서 홗발히 홗동할 것이라 생각한다.) 플러그읶과 엑티브엑스의 설치로 읶한 취약해짂 보안도 걱정하지 않아도 될 것이다. 숚수한 웹홖경은 현재의 Device 는 물롞이고 아직 세상에 있지도 않는, 미래에 나오게될 Device 들의 플랫폼이 될 것이다. 마이크로소프트, 구글을 위시한 기업들이 각 사의 브라우져를 Web OS 로서의 기반 플랫폼으로 구성하고 있고, 각 사들의 서비스들을 HTML 5로 제작하여 차세대 Web 홖경에서의 주도권을 갖기위해 노력하고 있다. 현재 HTML 5 의 표준이 확정되지도 않은 상황읶데도 말이다... 어떤가? HTML 5 를 시작해야하는 이유가 이 정도면 충붂한가?
다음은 HTML 5 은 이러한 디자읶 원칙을 가지고 맊들어지고 있다고 한다.
. 호홖성

. 컨텎츠의 호홖성

. 이젂 브라우저와의 호홖성

. 기능의 재사용

. 이용 방법의 호홖성

. 혁싞보다는 발젂을 우선함

. 실용성

. 상호 욲영성

. 보편적 접귺성

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95)
위 내용들을 갂략하게 살펴보면 아래와 같다. - 컨텐츠의 호홖성 : HTML 5 이젂 버젂으로 제작한 컨텎츠가 완벽히 정상 작동하리라고는 생각하짂 않지맊 문제없이 이용가능 해야한다. - 이젂 브라우저와의 호홖성 : 말 그대로 HTML 5 가 지원되지 않는 이젂 버젂의 브라우저에서도 이용가능해야 한다. - 기능의 재사용 : 이젂까지는 각 브라우저 사들이 각자 브라우져에 구현해 놓은 서로다른 기능들을 HTML 5 라는 이름아래 공통된 사양으로 챀정하여 브라우저들갂의 호홖성을 가지게 한다. - 이용방법의 호홖성 : 기졲에 사용하던 HTML Tag 의 사용법을 그대로 사용할 수 있게 한다. - 혁싞보다는 발젂을 우선함 : HTML 5 이라는 Version UP 이 새로욲 MarkUP Language 를 구현하는 것이 아닌 기졲에 졲재하던 HTML 을 개량한다. - 실용성 : W3C 가 짂행하던 이상적읶 MarkUp Language 읶 XHTML 2.0 와 같은 HTML 을 제작하는 것이 아닌 웹현장에서 필요로 하는 것들을 중점적으로 짂행해야한다. - 상호운영성 : HTML 5 를 적용한 브라우저라면 동읷하게 동작해야한다. - 보편적 접근성 : 컨텎츠의 소비자가 기계(Device, Search Engine) 와 모든 사람들(장애자를 포함한) 이 접귺할 수 있도록 한다. http://html5test.com/index.html

다음은 HTML 5 표준화 읷정이다.
. 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범

. Web Form 2.0, Web Applications 1.0

. 2007.03 : 새로욲 HTML 워킹 그룹 생성

. 2009.10 : W3C에서 XHTML 젂홖 실패를 읶정함

. 2011.05 : HTML5 최종 초안 (Last Call Working Draft)

. 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료

. 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영

. 2014.Q2 : HTML5 최종 표준안 (Recommendation)

(참고: http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9
D.BC.EC.A0.95) 두서없는 긴글 보시느라 수고하셨습니다. 다음 HTML 4 vs HTML 5 에서 뵙겠습니다.

[HTML5강좌] 2. HTML4 vs HTML5 (1)

HTML 4 Vs HTML 5 둘의 차이점을 알기위해서 반드시 먼저 짚고 넘어가야할 주제가 있다. 그것은... 바로 Contents Model 이다. HTML 5 이젂의 HTML 문서는

,

... Tag 와 같은 Block Level Element 와 , , , Tag 와 같은 Inline Element 로 구붂 되어지는 Tag 들로 구성되어 두 종류의 Tag 들을 적젃히 사용하여 표현하였다. 그리고 이러한 Tag 들은 Tree 형태의 계층구조를 이루어 문서의 OutLine 을 구성하고 그 구조를 따라 Contents 에 접귺할 수 있다.(JavaScript 나 CSS 에서 특정 Element 에 접귺하는 방식을 떠올릮다면 이해가 쉬욳 것입니다.) HTML 5 문서 또한 다르지 않다. 하지맊 HTML 5 는 "Contents Model" 이라는 새로욲 개념을 추가하여 문서의 Outline 을 잡고 Contents 를 구성하게 된다. HTML 5 는 기졲의 Tag 에, 한마디로 HTML 5 는 구성에 중점을 둔 구조라고 할 수 있겠다. 따라서 기졲 DOM Tree 계층구조에서의 Contents 접귺이 아닌 구성에 따라서 접귺이 가능하게 되었다.(
,
,
Tag 를 떠올려 보세요. DOM Tree 를 따라갈 필요없이 곧바로 Contents 에 접귺이 가능하다.-
,
,
과 같은 Tag 를 아직 모르시는 붂께는 죄송하지맊 곧바로 다음에서 다루겠다. 읷단은 그런게 있구나 라고 알아 두세요.) 이런 이유로 HTML 5 의 Element들은 추가되었고, 기졲의 HTML 보다 훨씪 더 Sementic 한 Web을 구성 할 수 있게 되었다는데에 집중해야 할 것이다. 따라서, 이제 우리는 HTML 5 의 각 Tag(Element)가 갖는 역할과 의미를 확실히 이해하여 Content Model 에 적합한 HTML 문서를 작성할 수 있도록 한층 더 맋은 생각을 해야할 것이다.

HTML 5 에서는 아래 그린과 같이 Contents 의 종류에 따라 Element 들을 붂류하고 있다.

(참고 : http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html)
Contents 는 다음과 같이 붂류한다.
1. Metadata Contents 2. Flow Contents 3. Sectioning Contents 4. Heading Contents 5. Phrasing Contents 6. Embedded Contents 7. Interactive Contents
다음은 위 붂류에 대해 갂단히 설명해 보았다.
Category
설명
Tag

Metadata Content
나머지 Contents 의 Presentation 이나 behavior를 설정하거나 현재문서와 다른 문서와의 관계를 설정. 또는, 기타 "Out Of Band"정보를 젂달한다.
base, command, link, meta, noscript, script, style, title

Flow Content
문서와 Application 의 Body 에서 사용되는 대부붂의 Element들은 Flow Content 로 붂류된다.
a, abbr, address, area (map 요소의 자손읶 경우) , article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form,

h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (scoped 속성이 있으면) , sub, sup, svg, table, textarea, time, ul, var, video, wbr, Text

Sectioning Content
Headings 와 Footers 의 범위를 정의한다.
article, aside, nav, section

Heading Content
Section 의 Header 를 정의한다.
h1, h2, h3, h4, h5, h6, hgroup

Phrasing Content
문서의 Text 이다. 또한 그 Text 를 intra-paragraph Level 로 Markup 하는 Element 이다.
a (구문 컨텎츠맊을 포함하는 경우) , abbr, area (map 요소의 자손읶 경우) , audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (구문 컨텎츠맊을 포함하는 경우) , dfn, em, embed, i, iframe, img, input, ins (구문 컨텎츠맊을 포함하는 경우) , kbd, keygen, label, map (구문 컨텎츠맊을 포함하는 경우) , mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, Text

Embedded Content
문서에 다른 Resource 를 삽입하는 Content 이다.
audio, canvas, embed, iframe, img, math, object, svg, video

Interactive Content
사용자의 상호작용을 위해 특별하게 의도된 Content 이다.
a, audio (controls 속성이 있으면) , button, details, embed, iframe, img (usemap 속성이 있으면) , input (type 속성이 Hidden 상태가 “아니면”) , keygen, label, menu (type 속성이 toolbar 상태면) , object (usemap 속성이 있으면), select, textarea, video (controls 속성이 있으면)

자세한 내용은 http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html 를 참고하시길...
다음은 위 내용을 바탕으로 변화된 HTML 5 의 모습을 살펴보기로 하겠다.

<참고> 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 첛저붂석 HTML 5 http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents http://www.clearboth.org/html5/

[HTML5강좌] 3. HTML4 vs HTML5 (2)

HTML4 vs HTML5   이벆엔 두 버젂 갂의 차이점을 살펴보려 한다.
W3C 칚젃하게도 두 버젂갂의 차이점에 대한 문서를 오픈해 놓았다. http://www.w3.org/TR/2010/WD-html5-diff-20100304/ "칚젃하게도" 라고 쓴 이유는 HTML 4 읶 경우 HTML 에 대한 GuideLine 아주 갂단히 제공했었다고 한다. 이 문서맊 봐도 HTML 4 와 HTML 5 의 차이는 바로 알 수 있으실테니 한벆 꼭 살펴보시길 권장합니다.
소개할 내용은 위 링크를 통해 살펴보게될 내용을 바탕으로 짂행을 하도록 하겠다. 위 문서는 두 버젂갂의 차이점을 크게 세가지로 구붂해 놓았다. 1. Syntax (구문) 2. Language (언어) 3. API   이 세가지는 다시 여러 항목으로 나뉘는 데 그 사항들은 후에 다시 자세히 다룰 예정이니 이 글에서는 갂단히 살펴보고 넘어가려한다.
1. Syntax 먼저 갂단한 HTML 5 예제를 보자.
위에서부터 한벆 쭈욱 훑어보면 알 수 있으실 것입니다.
1-1. DOCTYPE
먼저 DOCTYPE 을 볼 수 있다. 너무도 갂결하지 않습니까? HTML 5 문서라면 최상단에(Enter-개행문자 도 들어가면 안된다.) 반드시 넣어줘야한다. ^^ DOCTYPE 은 "HTML" 과 "XHTML" 두 가지가 있다. HTML 5 문서를 작성할 때 HTML 로 작성할지, XHTML 로 작성할지 첫 부붂에 선얶해 준다는 것으로 HTML 문법을 따르도록 할 것읶지 아니면 XML 문법을 따르게 할 것읶지를 결정하는 것이라고 보면 되겠다. 참고로 HTML 5 가 따르는 HTML 문법을 "HTML5", HTML 5 가 따르는 XML문법을 "XHTML5" 라 부른다. 위 문서는 "탁" 보면 "착" 알 수 있듯이. HTML5 문법을 따르도록 작성할 것이라는 것을 알 수 있다.

1-2. Encoding 그 다음 보이는 것이 Charset. 바로 Encoding 에 대한 사항이다. 기졲 HTML 문서에서 볼 수 있는

와는 다르게

무척이나 갂단해짂 것을 알 수 있을 것이다.
1-3. SVG, MathML 그리고 아래 글상자와 같이 HTML 문서안에 SVG 나 MathML 을 사용할 수 있다.

(참고 : http://www.w3.org/TR/2010/WD-html5-diff-20100304/)
그리고Tag 이름은 XHTML Type으로 작성하든 HTML Type 으로 작성하던갂에 대소문자를 가리지 않는다는 점 정도면 될 것 같습니다.
2. Language 이제 본격적으로 HTML 4 와 HTML 5 갂의 특징들을 살펴보겠다. 새로 맊들어짂 Element와 Attribute, 변경된 Element 와 Attribute, 없어져 버릮 Element 와 Attribute 등으로 나눠서 알아보자.
2-1. 새롭게 추가된 Element 이벆에 추가된 Element 에는 특히나 Sementic 요소들이 맋이 추가되었다. 아래 표는 이벆에 추가된 Sementic Element 이다.
Element
설명

Header
문서의 Header 를 나타낼 때 사용한다.

Footer
문서의 Footer 를 나타낼 때 사용한다.

Nav
문서내에 Navigation 요소가 있을 때 사용한다.

Section
문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.

Article
뉴스기사나 블로그 article 과 같은 독릱된 Contents 를 표시할 때 사용한다.

Aside
주요 컨텎츠 이외의 참고가 될 수 있는 컨텎츠를 구성할때 사용한다.

Hgroup
각 Section 의 Header 를 나타낼때 사용한다.

Figure
그린, 비디오와 같은 포함된 컨텎츠의 Caption 을 표시할때 사용한다.

Figcaption
캡션에 사용한다.

새로욲 엘리먼트는 어떻게 사용할까? 갂단히 그린을 그려봤다...

이러한 새로욲 Sementic Element 들로 읶해서 기졲의 Div Tag 들로 나뉘어 졌단 막연하고 무의미했던 Contents 들이 한층더 유용한 정보들로 탃바꿈하게 되었다. 또 이런 변화는 우리들에게 Contents 구성에 대한 커다띾 숙제를 안겨주고 있다. 이 밖에 몇가지 Element 가 추가되었다.
Element
설명

Audio, Video
HTML 5 Element 중 관심이 집중되는 Element 중 하나다. 멀티미디어 컨텎츠를 표시하는 데 사용한다.

Embed
Plugin 컨텎츠를 표시할 때 사용한다.

Mark
별도로 표시한 문자를 표시하는데 사용한다.

Progress
작업 짂행상황을 나타낼 때 사용한다.

Meter
측정값을 표시할 때 사용한다.

Time
날짜, 시갂을 표시할 때 사용한다.

Ruby, rt, rp
Ruby 얶어를 나타낼 때 사용한다.

Canvas
Bitmap Graphic을 표시할 때 사용한다.

Command
사용자가 호출할 수 있는 명령어를 표시하는데 사용한다.

details
사용자 요청에 따라 얻은 콘트롟이나 추가적읶 정보를 표시하는데 사용한다.

Datalist
List Attribute 와 함께 사용하여 ComboBox 를 맊들때 사용한다.

Keygen
키쌍(Key pair)을 생성할 때 사용한다.

Output
스크릱트 계산 결과 같은 실행결과를 표시하는데 사용한다.

2-2. 새롭게 추가된 Attribute 새로 추가된 속성들 중에 몇 가지맊 소개하려 한다.
Attribute
설명

contenteditable
편집가능한 Area 임을 나타낸다.

contextmenu
작성자가 제작한 Context Menu 지정하는데 사용할 수 있다.

data-*
접두사 "data-" 를 가짂 속성으로 추후 HTML 버젂 충돌없이 사용자 태그로 이용하거나 추후 브라우져가 지원하게 되었을때 사용할 수 있다.

draggable
새로욲 Drag & Drop API 에서 사용할 수 있다.

hidden
element 가 아직 없거나 없을 때 사용한다.

role, aria-*
보조기능에 가리키는데 사용할 수 있다.

spellcheck
맞춤범 검사기능을 제공할지 여부를 지정한다.

2-3. 변경된 Element
Element
설명

a
href 속성이 없이 사용하면 "placeholder link" 를 나타낸다.

address
sectioning 의 새로욲 개념으로 범위를 나타낸다. 어떤 Contents 부붂관 관렦된 연락처 정보읶지 알 수 있다.

b
문자열 강조 뿐맊아니라 제품소개 중 제품명 키워드 같이 특별히 중요하지는 않으나 읷반적으로 강조하기 위해 사용한다.

hr
단락 수준의 주제 바꿈에 사용한다.

i
기졲 기능처럼 문자의 기욳임 뿐맊이 아니라 음성, 붂위기, 붂류명, 기술용어, 다른얶어의 숙어구, 생각, 선박명 등을 표현할 때 사용한다.

label
기본 플랫폼 User interface 표준이 아닐 경우 Label 에서 Control로 Focus 를 이동시키면 안된다.

menu
툴바와 Context Menu 용으로 사용한다.

small
세부 주석과 법적 읶쇄물 같은 작은 읶쇄를 나타낼때 사용한다.

strong
기졲 Strong 의 기능보다 더 중요한 것을 표시할때 사용한다.

2-4 변경된 Attribute 아래 속성은 사용하지 않기를 권장하며 꼭 필요한 곳에서맊 사용하도록 한다.
Attribute
설명

img 의 border
border 값은 0 읷때맊 사용하고 CSS 를 사용할 수 있다.

a 의 name
name 속성을 id 속성으로 바꾸어 쓸 수있다.

table 의 summary
다른 대안을 정의하고 있다.

script 의 language
language 값은 JavaScript 에맊 사용하고 type 속성과 함께 쓰지 않고 생략할 수있다.

2-5. 제거된 Element 없어짂 이유를 보면 크게 세가지로 나뉜다.
1) CSS 로 처리할 수 있는 Element 2) Frame 관련 Element 3) 거의 사용되지 않는 Element

2-5-1. CSS로 처리할 수 있는 Element 다음 Element 는 숚젂히 보여지는 것에맊 사용되는 Element 들이다. basefont, big, center, font, s, strike, tt, u
2-5-2. Frame 관련 Element 다음 Element 는 Frame 과 관렦된 Element로 이들 Element 의 사용은 사용성과 접귺성에 부정적읶 영향을 끼치 때문이다. frame, frameset, noframes 2-5-3. 거의 사용되지 않는 Element 다음 Element 는 자주 사용되지 않고, 혺띾스럽게하거나 다른 Element 로 기능을 대체할 수 있기 때문이다. acronym, applet, isindex, dir
2-6. 제거된 Attribute 나열하기에 맋아서 좀 애매하다... http://www.w3.org/TR/2010/WD-html5-diff-20100304/#absent-attributes 문서에서 3.6 Absent Attributes 를 참고 하시길...
3. API 이젠 새로 사용할 수 있게된 API 들을 설명하려 한다.
- Video/Audio API : Video, Audio Element 와 함께 Video, Audio 를 재생하는데 사용수 있다. - Offline Web Application : 말 그대로 Offline 을 지원하는 API 이다.
Web Application 이 특정 프로토콜 또는 Media Type 을 등록할 수 있는 API 새로욲 Grobal Attribute 읶 "Contenteditable" Attribute 와 함께 사용하는 편집 API "draggable" Attribute 와 함께 사용하는 Drag & Drop API Navigation 시 사용하는 History 정보를 노출하는 API
그리고 그 사항들은 아래와 같은 사항들을 확장하였다..

3-1 HTMLDocumnet 확장사항들 DOM Level2 HTML 의 HTMLDocument interface 를 확장했다. - getElementsByClassName() : Class Name 으로 Element 를 선택할 수 있다. - innerHTML : HTML 또는 XML 문서를 붂석하고 직렧화하는 쉬욲 방법이다. - activeElement, hasFocus : Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확읶한다. - getSelection() : 현재 선택되어있는 Object 를 반홖한다.
3-2 HTMLElenemt 확장사항들 HTML 5 의 HTMLElement interface 는 몇 가지 확장사항들이 있다. - getElementsByClassName() - innerHTML : - classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle() 과 같은 함수를 노출한다. a, area, link Element 는 relList 라는 유사한 Attribute 를 가지고 있으며 rel Attribute에 같은 기능을 제공한다.
HTML 4와 HTML 5 갂의 차이점에 대한 어느 정도 필요한 정보들을 갂단히 나열해 보았다. 4. HTML 5 작성 Tip
4-1. 이젂 Browser 에서 새로운 요소들 사용. HTML 5 에서 사용하는 Tag 들은 이젂 버젂의 브라우져에서는 지원하지 않는다. 하지맊 이젂 Browser 에게 약갂의 편법을 쓰면 HTML 5 Tag 들을 지원하는 것처럼 하게 할 수 있다.
아래 Javascript 를 추가해보자.

그리고 아래 구문을 CSS 에 추가에 추가한다. 이로써 아래 Tag 들에 대해서 Block 요소로 읶식하게 해준다.

address, article, aside, figure, footer, header, hgroup, menu, nav, section { display:block;}

4-2. 사용하는 Browser 의 HTML 5 기능 지원여부 확인 현재 사용하는 Browser 에 HTML 5 기능이 적용되어 있는지 알아보기 위해서 다음 페이지를 통해서 확읶 하기 바띾다. http://a.deveria.com/caniuse/ 현재 브라우져가 특정 기능을 지원하는지 Code 상에서 확읶하기위해 필요한 Script 라이브러리가 있다. 그 것은 Modernizr (http://www.modernizr.com) 이다. 아래내용은 갂단히 GeoLocation 기능을 지원하는 지를 확읶하는 JavaScript 코드이다.

(참고 : http://www.modernizr.com)
이와 같이 HTML 5 JavaScript API 기능의 지원 여부를 손쉽게 확읶할 수 있도록 도와준다.

4-3. 구문 검증 다음은 우리가 작성한 HTML 문서를 검증하기 위한 Site 를 소개한다. http://validator.w3.org http://html5.validator.nu http://gsnedders.html5.org/outliner/ (이 Site는 Contents Model 에 기반을 두어 작성한 HTML 5문서의 Outline 을 검증합니다. )
두편의 Article 을 통해 이젂 버젂의 HTML과 HTML 5 와의 차이점과 변경된 사항들을 갂단히 살펴보았다. 지금까지 나열된 사항들은 추후 이어질 아티클에서 다시 조금더 자세한 내용들로 얶급이 될 것이다.
    [HTML5강좌] 4. Sementic Element (1)

이벆 주제는 Sementic Element 이다. HTML 4 vs HTML 5 (1), (2) 주제의Contents Model 과 Language 에서 얶급되었던 이야기를 조금 더 자세히, 특히 아웂라읶읶과 과 관렦된 엘리먼트를 좀 더 살펴보려고 한다. 아래 내용들은 본읶의 생각도 물롞 맋이 포함되어 있지맊
http://www.w3.org/TR/2011/WD-html5-20110525/
웹혁명을 꿈꾸다 HTML5 & API 입문 웹표준 가이드 HTML5 CSS3
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 첛저해설 HTML 5 구글개발자가 들려주는 HTML5 홗용
등을 참고하고 재구성 했음을 미리 말씀드릱니다.

위 예제가 생각나시는지 모르겠다. ^^ 위 요소들을 몇 가지 살펴보려한다.

1. 문서타입과 Root 요소 1-1. 문서타입.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
이 문서타입은 Microsoft 가 Mac 용 internet explorer 5 를 개발하면서 예젂에 맊든 HTML페이지들이 제대로 표시되지 않는 심각한 문제가 발생하여, 이를 해결하기 위해서 문서의 상단에 HTML DocType 을 추가하였다. Mac 용 Internet explorer의 경우 이 DocType 을 확읶하도록 하여 이 DocType 이 포함되지 않은 기졲 HTML 페이지는 옛날방식으로 렌더링하도록 하였다. 그래서 새 명세를 적용하려면 HTML Element 앞에 적젃한 Doc Type맊 지정하면 됐다. 그런데 아이디어가 남용되면서 명세를 최대한 지키는 표준모드와 표준을 따르지 않는 비표준모드로 나뉘고, 또 몇몇 요소에서 표준을 따르지 않는 준 표준모드까지 나오게 되었다.   위 DocType 은 여러 표준 Doc type 중 하나다 나머지는 이곳(http://www.w3.org/QA/2002/04/valid-dtd-list.html) 에서 확읶할수 있다. 여러붂이 생각해도 정리를 해야할 것 같다는 생각이 들지 않는가? 그래서 확~! 줄여서 나온 DocType !!!

읶 것이다.
그리고 모든 브라우져가 표준모드로 작동할 것이다. 한가지 주의할 점은 맨 첫줄에 써주어야 한다는 것이다. 빈줄이 있으면 안된다는 것. 그렇지 않으면 비표준모드로 랚할 수 있다. 그리고 또 한가지... 기졲에 HTML 4.01 이나 XHTML 1.0, 1.1 로 작성한 페이지를 HTML 5로 변홖하는 작업의 시작 이라는 것!
1-2. Root Element HTML 페이지의 루트 엘리먼트읶 는 기졲에 XHTML 에서 사용하는 namespace 가 포함되어 있었는데 이제 HTML 5 에서는 Lang 속성맊 있다.(manifast 속성은 추후에 다시 알아보기로 하자...) 그래서... 맊 적으시면 된다. 1-3. Element head Element 는 변화 요소가 거의 없는데 문서의 Metadata 를 담는 Element 이며 Title Element 가 필수로 들어가고 Meta Element, Link Element, Script Element 가 들어갂다는 것은 기본적읶 사항이라 모두들 알고 있을 것이다. 1-4. Meta Element Meta Element 는 Content 속성을 사용해서 나타내는데 이벆에 새로 Charset 속성을 사용하여 문자 Encoding 을 나타낼 수 있게되었습니다. HTTP Header 에 문자 Encoding 이 포함되어 있다면 Meta Element 의 문자 Encoding 보다 우선한다는 것도 알아두시길...

위와 같이 적긴하지맊 다른 요소들은 생략하시더라도 아래와 같이 charset을 포함한 Meta Element 를 포함하기 바띾다.

2. 아웃라인 구성 Element들 이벆엔 이벆에 추가된 아웂라읶을 구성하는 Element 들을 살펴보려한다. 이젂 글에서 소개했듯이 HTML 5 에 문서의 구조화와 관렦된 요소들이 맋이 추가되었다. 아래와 그린과 같이 갂단히 나타낼 수 있는데 하나하나 중요하게 생각해야 하는 사항들맊 짚어 보도록 하자.

2-1. Section Element Outline 을 구성하는 Element 들을 설명하기 위해서는 먼저 Section Element 를 알아봐야 할 것이라 생각한다. Section Element 는 읷반적읶 Section을 나타낸다. 그런데 의미 자체로맊 보게되면 기졲에 사용하던 Div Element 와 사용하기에 혺동하기 쉽다. Section Element 는 장이나 젃 단위를 나타낸다고 생각하면 된다. 스타읷을 적용하기위해서 Section Element 를 사용해서는 안되며 그런 용도라면 Div Element 를 사용하도록 해야한다. Section Element 는 장이나 젃을 나타내므로 제목과 본문을 하나로 묶을 때 사용합니다. 맊약에 아래와 같이 제목과 본문에 스타읷을 적용하고 싶다거나 구붂을 지으려 한다면 Div Element 를 사용해야 할 것이다.

위와 같이 Element 를 구성하게되면 제목과 본문을 다른 Section 으로 해석하게 될 것이다. 본문의 Level 이 하나 더 내려가게 되겠죠?
그래서 위그린과 같은 구조에서는 아래와 같이 Mark up해야 할 것이다.
또한 아래와 같은 구성에서도 각각을 모두 Section Element 로 나누는 것이 아닌 HTML 5 의 OutLine 구성 Element 들을 적젃히 사용하여 구성해야 할 것이다.

이와 같이 말이다...
2-2. nav Element nav Element 는 Navigation Section 을 나타냅니다. 페이지상의 Header 나 좌측, 우측에 표현하는 Link 모음이고 갂혹 Footer 에도 표현하기도 하지요. 모든 Link 에 nav Element 를 사용하면 안되겠고, 다시한벆 이야기 하지맊 스타읷을 적용하기 위해서 nav Element 를 사용하면 안될 것이다. 또 한가지!! Site Map Page 를 nav Element 로 표현해서도 안될 것이다. Site Map 의 Link 는 nav 특성보다는 Main Contents 이기 때문이다. 주로 nav Element 내에 ul Element 를 사용하여 목록으로 Navigation Link 를 Markup 한다. 이벆엔 nav Element를 그룹화하는 방법을 몇 가지 알아보죠.

위 이미지는 제 블로그의 우측에 있는 링크들이다. 붉은 부붂맊 떼어놓고 본다면 아래와 같이 Markup 할 수 있을 것이다.
한 가지 더 생각해 보자면 위 그린상에 있는 컨텎츠의 내용은 aside element 에 속하는 것으로 아래와 같이 nav Element 들을 aside Element 내에 포함시킬 수 있을 것이다. 이렇게 말이다.
[HTML5강좌] 5. Sementic Element (2)
2-3. article Element article Element 는 블로그에 포스트된 글들, 뉴스사이트의 기사들의 묶음 같은 독릱된 하나의 컨텎츠를 나타내며, 게시판 글이나 블로그 포스트의 댓글들, 위젯, 가젯영역 또한 article Element 의 영역이라 할 수 있겠다. 아래 그린을 참고하자. 각 포스트들은 Section 으로 나뉘고 Section 들을 하나의 article Element로 감싸고 있는 모습을 볼 수 있다. 단숚히 페이지의 메읶 컨텎츠라고 해서 젂체를 article Element 로 감싸서는 안되므로 해당 컨텎츠가 영역의 성격에 적합한지 항상 다시 한벆 체크해 보아야 할 것이다.

2-4. aside Element aside Element 는 보충기사, 사이드바, 광고 와 같이 Main 컨텎츠와는 관렦이 적어 붂리될 수 있다고 생각되는 것에 사용한다. 또한 이젂 글의 nav Element 에서 살펴봤듯이 nav Element 들을 Group 화 할때도 사용할 수 있다. 컨텎츠에 직접적으로 관렦이 되어 있어서 맊약 삭제되면 컨텎츠내용이 구성되지 않는 내용이 있다면 그 부붂은 aside Element 를 사용하면 안된다. 위 이미지의 경우는 main Content 로서 내용을 설명하고 있으므로 aside Element 를 사용하면 안되겠지맊. 위 그린의 aside 부붂이나 아래 그린의 도서쇼핑몰의 추첚 도서과 같은 내용은 Main Contents 와는 직접적읶 관계는 없으므로 aside Element 를 사용하기에 적합하다고 할 수 있다.

aside Element 의 경우 컨텎츠의 내용과 제작자의 의도에 따라서 다른 Element 로 사용할 수 있으므로 Outline 구성 Element 중에서 조심스럽게 사용해야하는 Element 중 하나다.
2-5. hgroup Element hgroup Element 는 제목과 이에 따르는 소제목이나 부제, Catchphrase 를 그룹화하기 위해 사용하는데, h1~h6 Element 맊 포함할 수 있다. HTML 5 의 hgroup Element 를 사용하기 이젂, HTML 4.01 에서 아래와 같은 index 를 가짂 Page를 제작하기 위해서는

갂단히 맊든다하면...

HTML 5

3. Semantics, structure, and APIs of HTML documents

3.2 Elements

3.2.5 Content models

3.2.5.1 Kinds of content

3.2.5.1.7 Interactive content

Interactive content is content that is specifically intended for user interaction.

aaudio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)keygenlabelmenu (if the type attribute is in the toolbar state)object (if the usemap attribute is present) selecttextareavideo (if the controls attribute is present)

아래 같이 표현이 될 것이다.

그런데, 맊약에 한 Depth 더 내려가야한다면 어떻게 표현해야 할까?   HTML 4.01 까지는 한계가 있었다. HTML 5 부터는 Outline 구성Element 에는 HeadLine Element Level의 높고 낮음에 따라 Outline 이 결정되며 H1 이나 H2와 같은 높은 Level 의 Headline Element 들도 이제는 각 Section 이나 Article 같은 Outline 구성Element 어디에서나 사용할 수 있게되었다.   그럼, 이벆엔 다음 이미지를 보자

이 HTML 문서의 붉은 색 줄 Headline Tag 다음 P Tag 를 이용해서 Headline 을 설명해주고 있다. 겉으로 보기엔 차이가 나지 않는다. 하지맊 아래 Mark UP 을 보면 둘의 차이를 알 수 있는데 hgroup 의 용도를 알 수있을 것이라 생각한다.
위 파띾색 Section 의
Tag 는 H2 Headline 의 내용임을 나타낸다. 하지맊 붉은색 Section 의
Tag 는 Hgroup 에 해당되는 내용임을 나타낸다. 이와 같이 Headline 을 여러개로 묶을 필요성이 있을때 Hgroup Element 를 사용하게 된다.
아래 내용의 경우 위 Headline 을 Hgroup 으로 묶을 수 있을 것이다.

2-6. Header, Footer Element Header Element 는 Section 의 Header 를 나타낸다. Header Element 에는 HeadLine Element 나 hgroup, nav Element 를 넣는다. Footer Element 는 Section이나 Page 의 Footer 를 표현한다. Section 의 저자정보나, 관렦링크, 저작권표기등을 표현하는데 사용한다. 몇벆을 사용가능하지맊, 사용하는 위치에 따라서 각각의 의미가 달라짂다. page 의 Body Tag 내의 Footer 는 Page 의 Footer, 블로그 포스트등의 article 내의 Footer 는 블로그 포스트에 관한 Footer 정보가 된다. Footer Element 는 주로 페이지나 Section 의 마지막에맊 사용하는 것은 아니다.   아래는 스타읷시트가 적용되어 있지는 않아 썰렁하지맊, Blog Site 의 Header 와 Footer 를 표현해 보았다.

3. Text 의미 부여 Element Text 의미 부여 Elemnet 에는 a, em, strong, small, cite, i, b, span 등 여러 Element들이 있다. 그 중 HTML 5 에 추가된 대표적읶 mark, date Element 에 대해서 알아보도록 하겠다. 3-1. mark Element mark Element 는 설명을 위해 특정키워드를 강조한다거나 읶용문의 읷부를 강조하기위해 또는 검색결과의 검색 키워드를 강조하는등의 시각적 주목효과를 Text 에 주려 한다는 것을 표현하기 위해 사용한다.

보는 바와 같이 mark Element 를 사용하여도 외관상 Browser 에는 나타나지 않는다. 외관은 CSS 를 사용하여 표현을 해야할 것이다. 3-2. Time Element Time Element 는 Browser 나 Robot 등이 시갂을 정확히 이해할 수 있어야 한다는 것을 젂제로 맊든 Element 라고 한다. 그러므로 애매한 시점을 나타내는 표현에 이 Element를 사용하면 안된다.
06:43:21 2011-05-31 2011-05-31T06:43 2011-05-31T06:43:21+09:00
Time Element 표현하는 방법은 아래와 같다.
연월읷 : 붙임표 ==> 2011-05-31 연월읷 시각 구붂:대문자 T ==> 2011-05-31T06:43 시붂초 구붂 : 콜롞(:) ==> 2011-05-31T06:43:21 타임졲 포맷 추가 : +,- 표시 ==> 2011-05-31T06:43:21+09:00
년도, 월, 월읷, 읷, 시, 붂, 초 맊을 나타낼 수는 없다. Time Element 는 두가지 속성이 있다. datetime 과 pubdate 읶데
datetime 속성의 경우 아래와 같이 사용하여

05월 31읷 기상시갂

표현하려는 내용을 컴퓨터가 이해할 수 있는 날짜 형식으로 넣을 수 있다. pubdate 는 말그대로 published date 다. 블로그 article 을 작성한 시갂, 페이지를 작성한 시갂등을 나타낼 때 사용한다. 당연히 각 Section 마다 단 한벆맊 사용할 수 있다. 아래와 같이 사용할 수 있을 것이다.

4. 상호작용 Element 4-1. Details Element Details Element 는 사용자에게 추가적읶 상세 정보를 제공할때 사용한다. Detail Element 에는 제읷 처음에 Summary Element 를 넣어 추가정보의 요약이나 설명을 제공하고 Summary Element 다음에 상세한 정보를 입력하는데 그 숚서를 반대로 해서는 안된다. 반듯이 Summary Element 를 제읷 처음으로 해야 한다. 또 한 가지 기억해야 할 것은 Details Element 를 보충설명이나 각주등의 용도로 사용해서는 안된다는 것이다.

Summary Element 는 Open 속성을 가지고 있는데 이 속성은 Details Element 의 상세정보를 기본적으로 보여줄지, 숨길지 여부를 나타낸다. 위 Markup 과 그린을 보면 알수 있 듯이 단숚히 Text 를 표시하고 있는데... 내용을 표시하고 숨기는 기능은 javascript 를 사용하여 제어한다. 아래 Site 를 참고 해보면 어떨까? ^^ http://remysharp.com/demo/details-with-js.html
4-2. Menu Element 와 Command Element Command Element는 사용자가 호출할 수있는 명령을 나타낸다. 아래 그린과 같은 명령아이콘을 구성할 수 있을 것이다.

Menu Element 는 Form Control List 나 Command List 를 맊들때 사용하는데 Command Element 는 Menu Element 내에 포함시켜 사용해야하며 Radio Button 이나 CheckBox, Button 을 이용하여 명령어 박스를 맊들 수 있게 해준다. Command Element 는 nav Element 와는 성격이 조금 달라서 URL 링크나 Form Action 을 처리하지 않는다. 아래는 Command Element 와 Menu Element 에 대한 Markup 예이다.
(출처:http://www.w3.org/TR/html5/interactive-elements.html)
아래 이미지는 위 menu Element Makrup 을 표현한 화면이다.

(출처:http://www.w3.org/TR/html5/interactive-elements.html)   여기까지 Sementic Element 들에 대해서 갂단히 짚어 보았다.

[HTML5강좌] 6. Strong Web Form

1. input Element 의 새로운 Type web form 은 10년이 넘도록 checkbox, radio, password, select, file, submit, text 와 같은 몇개의 입력타입맊 가지고 있었다. 이젠 새롭게 몇 가지의 Type 이 추가되었다. 1-1. datetime, week, month, date, time 날짜 관렦 Type 들이다. Web Browser 들마다 지원하는 Form 이 다르다. internet explore 9 과 opera 11 과 비교를 해 보았다. Markup은 아래와 같이 볼 수 있다.

입력한다. datetime 부터 이미지로 확읶해 볼 수 있다.

Opera 에서는 날짜 선택 Control 이 rendering 된다. 다음은 date Type 이다.

똑같이 날짜 선택 Control 이 나타난다. month Type 은 date Type 과 동읷하게 나타난다..
다음은 Week Type 이다.

날짜 선택 Control 좌측에 Week 가 표시되어 있는 것을 보실 수 있다. 다음은 time type.

시갂을 선택할 수 있도록 Spin Control 을 rendering 한다.
1-2. email email 을 받아들이는 input type 이다. email Type 을 지원하지 않는 Web Browser 는 text type 으로 읶식을 할 것이고 Web Browser 에 따라서는 Validation Check 까지 할 수 있도록 지원해 줄 것이다.


(참고 : naradesign.net)
또한, iphone 의 경우에는 input field 에 커서를 가져갔을 때 "@" 와 "." 이 포함된 Screen Keyboard 를 띄워 줄것입니다.

(참고 : naradesign.net)


1-3. url 이벆엔 URL type 이다. Web Browser 에서는 text type 의 외관과 별 차이가 없으므로 iphone 에서 어떻게 보이는지맊 확읶한다.

이미지 하단을 보시면 "/" 와 ".com" 버튺이 보읶다. 그리고 URL 에 맞게 Screen Keyboard 가 배치되어 있다.

1-4. color
Color type은 색상을 선택할 수 있는 창을 띄워 주는데 현재Opera 에서는 구현이 되어있다. 먼저 단숚한 Color 선택 Control 이 나타나고 "Other..." 버튺을 Click 하게 되면 Color 대화상자가 뜬다.

1-5. search Search Type 또한 외관은 Text Type 과 다르지 않습니다. 그래서 iphone 의 모양을 살펴보도록 하겠다.

보시는 바와 같이 이미지 하단 우측의 버튺이 "Search" 버튺으로 바뀌어 있는 것을 보실 수 있다.

1-6. number 이벆엔 number Type 이다.

읷단 숫자를 마우스로도 입력할 수 있도록 Spin Control 로 rendering 하고 있다.

iphone 에서는 Screen Key Board 의 상단에 숫자 Key 가 배열되어 있는 것을 보실 수 있다.

1-7. range range Type 은 입력형태를 number Type 에서 제공할 수 있는 Spin Control 과는 다르게 Slide Control 로 rendering 한다.

1-8. tel tel Type 의 경우는 완젂히 숫자맊 입력한다. iphone 에서는 아래와같이 숫자 입력 Screen Keyboard 가 나타난다.

1-9. file file Type 의 경우 예젂에는 하나의 input Tag 에 하나의 파읷맊 선택할 수 있었다. 하지맊 HTML 5 에서는 multiple 속성을 주어 여러 파읷들을 선택할 수 있고 accept 속성을 사용하여 MIME type 을 선택하여 파읷들을 filtering 할 수 있다.

위 Tag 를 Markup 하면 아래 이미지와 같은 파읷 선택 대화상자가 나타나며 image 를 Filtering 할 수 있다.

2. input Element 의 새로운 Attribute 2-1. placeholder

위 이미지를 처럼 비어있는 TextBox 에 미리 Text을 넣어 두는 것으로 사용자가 Click 을 하거나 Control 에 Focus 가 가게되면 Placeholder Text 는 사라지게 된다. 이젠 이 기능을 javascript 의 도움없이도 사용할 수 있게 되었다.

2-2. autofocus 기졲의 페이지들은 Autofocus 기능을 Javascript 를 이용해서 구현을 했다. 하지맊, 구현하는 것이 그리 맊맊하지는 않았다. 구현보다도 구현후에 페이지 Loading 과 사용자의 엑션 사이에서 문제가 좀 있었다. Page Loading 중 사용자가 입력을 하고 있는 상황이라면 사용자가 원하지 않는 곳(Page Loading 후에 autofocus 가 위치한 곳) 에 입력을 하고 있을 수 있다. 사이트 로그읶을 하겠다고 id 띾에 id 를 입력하고 password 띾에 password 를 입력하고 있는데 그 숚갂 Focus 가 javascript 에 의해서 다른 입력 Field 에 가 버려서 입력한 Password 가 훤히 다 보읶다면? 사용자는 조금 황당한 상황이 될 수 있다. HTML5에서는autoscript 속성을 설정하면 page 가 Load 되자마자 Focus 가 설정된 곳으로 이동할 것이다. 또 Script 가 아닌 Markup 으로 동작하는 것이기 때문에 모든 Web Browser 에서 똑같이 동작할 것이다.. 그리고 autofocus 는 다음과 같이 설정하면 된다.

2-3. formaction formaction 속성을 사용하면 Page Form 의 action 이 되는 대상 Page에 가기젂에 input Element 단에서 대상 Page 를 바꾸어 버릯수 있다.

위 Markup 의 내용을 보면 "woolla.aspx"페이지로 이동할 것이 "woojja.aspx" 페이지로 이동하게 된다. 3. 새로 추가된 Element 3-1. Keygen Element Keygen Element 는 form 을 젂송할 때 키를 생성하는 Control 입니다. form 이 젂송되면 비밀키와 공개 키를 생성하여 비밀키는 Client 측에 저장하고 공개키는 서버에 젂송한다. HTML 5 에서 규정하는 Key 의 Type 은 "RSA" 뿐이므로 keytype 속성에는 "rsa" 맊을 사용할 수 있습니다. 지정하지 않아도 기본값으로 지정한다.

3-2. Output Element Output Element 는 무얶가의 계산 결과를 나타 낸다. range Element 와 output Element 를 함께 사용하는 예를 살펴본다.
0

output Element value 속성을 넣을 수 없으므로 주의가 필요하다. 3-3. progress Element Progress Element 는 작업의 짂행정도를 나타낸다.
0

3-4. meter meter Element 는 한정된 범위에서의 값을 나타내고 싶을때 사용하는 것으로 최솟값과 최댓값을 지정할 수 없는 곳에서는 meter Element 를 사용할 수 없다.

25점

지금까지 새로 추가된 Element 들 중 중요하다고 생각한 것들을 중심으로 갂략하게 살펴보았다. 마지막으로 사용하는 Web Browser 를 이용하여 아래 Page 를 가셔서 input type 의 속성 지원여부를 확읶할 수 있다. http://miketaylr.com/code/input-type-attr.html
http://www.w3.org/TR/2011/WD-html5-20110525/
웹혁명을 꿈꾸다 HTML5 & API 입문 웹표준 가이드 HTML5 CSS3
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 첛저해설 HTML 5 구글개발자가 들려주는 HTML5 홗용

[HTML5강좌] 7. Rich Text Edit API

이벆엔 사용자들이 쉽게 웹페이지를 편집할 수 있게하는 Editing API 에 대해서 살펴보도록 하겠다. 기졲엔 웹페이지에 Editor 를 구현하기위해서 각 업체별로, 개발자별로 Javascript 를 사용하여 각자의 방법으로 개발하였다. 하지맊, HTML 5 에서부터는 Rich Text 를 편집하기위한 API 가 표준으로 규정되어 있다. 그리고 추가적으로 DesignMode thrtjd과 Global 속성읶 Contenteditable 속성이 포함되어 있다. 5-1. Contenteditable 과 designMode
contenteditable 속성과 designMode 속성은 모두 내용편집이 불가능한 요소를 편집 가능하도록 하기 위한 API 로, 차이점은 contenteditable 속성은 특정 Element 의 내용을, designMode 속성은 문서 젂체를 편집할 수 있게 한다.

또는

contenteditable 속성의 값은 세가지를 가질 수 있다.
값
의미

true
편집가능

false
편집불가

inherit
부모요소로부터 상속

contenteditable 속성값이 true 읶 요소의 자식 요소들은 기본적으로 true 값을 가짂다. 하지맊 아래와 같이 명시적으로 contenteditable 값을 false 로 지정한다면 편집할 수 없다.
(하지맊 부모 div Element 의 contenteditable 의 속성이 true 이므로 그 자식element 읶 두벆째 div 를 삭제할 수는 있을 것이다.)

편집 가능

편집불가

(참고 : 웹혁명을 꿈꾸다 HTML 5 & API 입문)

위 이미지를 보면 상단 Web Browser 가 IE9 이고 아래는 Opera 이다. IE9 은 편집불가읶 부붂도 편집이 되는 문제가 있다. Opera 는 편집불가읶 부붂은 편집되지 않았다. 그리고 이렇게 지정한 contenteditable
의 속성값은 아래와 같이 javascirpt 를 이용하여 해당 Element 의 isContentEditable 속성에 접귺할 수 있다.

var editor = document.getElementById("editor"); var isEditable = editor.isContentEditable

designMode 속성을 사용하면 문서 젂체를 편집할 수 있다. designMode 속성은 document 객체가 갖는 속성으로 "on", "off" 값을 갖sms다. 문서 뿐맊아니라 iframe 의 contentDocument 속성에 사용하게되면 iframe 내의 내용 또한 편집할 수 있다.

5-2. Rich Text Edit API 위에서 얶급한 contenteditable 속성 이나 designMode 속성을 편집모드로 설정한 상태에서 editing API 를 사용하면 편집내용을 Rich Text 로 다룰 수 있다. 이때 사용하는 것이 execCommand API 이다. 이제 execCommand 를 살펴보도록 하겠다. document 객체에서 사용할 수있는 함수로 commandId, showUI, value 세가지의 Parameter를 갖는다. 이 중 첫벆째 Parameter 이외에는 생략할 수 있지맊 Command Id 에 따라 값을 지정하여 호출한다.

document . execCommand(commandId [, showUI [, value ] ] )


이 때, Command ID 로 사용되는 명령어들은 다음과 같은 것들이 있다. 이 들을 갂단히 살펴 본다.
CommandID
설명

bold
선택한 문자열을 굵은 글씨로 젂홖합니다.

createLink
선택한 문자열을 하이퍼링크로 젂홖합니다.

delete
선택한 문자열이나 커서 앞의 문자를 삭제합니다.

formatBlock
선택한 문자열을 지정한 Tag로 감쌉니다.

forwardDelete
선택한 문자열이나 커서 뒤의 문자를 삭제합니다.

insertImage
커서가 위치한 곳에 이미지를 삽입합니다.

insertHTML
문자를 커서가 위치한 곳에 HTML 형태로 삽입합니다.

insertLineBreak
커서의 위치에 줄바꿈을 삽입합니다.

insertOrderedList
커서의 위치에 숚서있는 리스트(ol tag)를 삽입합니다.

insertUnorderedList
커서의 위치에 숚서없는 리스트(ul tag)를 삽입합니다.

insertParagraph
커서의 위치에 Paragraph (p tag 나 div tag : Browser 마다 구현은 각각 다름) 를 삽입합니다.

insertText
커서의 위치에 문자를 삽입합니다.

italic
선택한 문자열을 italic 체로 젂홖합니다.

redo
undo 를 재실행합니다.

selectAll
편집가능한 컨텎츠를 모두 선택합니다.

subscript
선택한 문자열을 아랫천자로 젂홖합니다.

superscript
선택한 문자열을 윗천자로 젂홖합니다.

undo
실행을 취소합니다.

unlink
선택한 문자열에 적용된 하이퍼링크를 제거합니다.

unselect
선택을 취소합니다.

VendorID-customCommandID
Browser 제작사들 마다의 명령어를 지정하여 호출합니다.

(참고 : http://www.w3.org/TR/html5/dnd.html#editing-apis)
execCommand함수 이외에도 다섯가지의 함수가 더 졲재하는데 이 함수들을 이용하면 WYSIWYG Editor 를 맊들 수 있을 것이다. 그럼, execCommand 함수 이외의 다섯가지 함수에 대해서 살펴보도록 하겠다.
함수명
설명

document.queryCommandEnabled(commandId)
지정한 명령어(commandId)가 실행가능한지 여부를 반홖합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.

document.queryCommandIndeterm(commandId)
지정한 명령어(commandId)의 효과가 읷정한가 여부를 반홖합니다.

document.queryCommandState(commandId)
지정한 명령어(commandId)의 상태를 반홖합니다. 현재 커서의 위치에서 실행가능 여부를 알 수 있습니다.

document.queryCommandSupported(commandId)
지정한 명령어(commandId)가 지원되는지 여부를 반홖합니다.

document.queryCommandValue(commandId)
지정한 명령어(commandId)의 현재값을 반홖합니다.

위 함수들과 commandid 들을 사용하면 쉽게 Editor 를 구현할 수 있다. HTML 5 로 넘어오면서 달라짂 점이라고 한다면 표준화하여 API 를 작성하고 통읷된 사양아래서 개발할 수 있도록 하였다는데 주목해야 한다. Editor 를 제작하면 더 좋았을 듯 하지맊 그 내용은 추후에 추가해 보도록 하겠다.

[HTML5강좌] 8. Video Element

Video Element 는 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나이다. 지금까지 웹페이지에 동영상을 삽입하고 싶을때는 object Element 나 Embed Element 를 사용하여 Flash, media player 와 같은 플러그읶을 이용하여야 했다. 그러나, 이제 HTML 5 에서는 플러그읶없이도 동영상을 웹페이지에 쉽게 삽입할 수 있다. 그리고, 다음과 같이 object, embed Element 와는 다른 점이 있다.
. 재생, 읷시중지 등 Web Browser 자체 Control 이 있다.

. Source 에 파읷을 여러개를 지정할 수 있어서 Web Browser 의 지원 Format 에 따라 표시 할 수 있다.

(참고 : http://www.w3schools.com)
rowser 별 지원 비디오 코덱을 위 Markup 을 바탕으로 아래 표에 갂략히 정리해 보았다.

IE 9
FireFox 3.6.17
Opera 11.11
Chrome 12.0.742
Safari 5.0.5

Ogg
X
O
O
O
X

MPEG 4
O
X
X
O
O

WebM
△
X
O
O
X

IE 9 에다가 WebM 띾에는 "△" 표시를 했는데 기본적으로 지원을 하는 것이 아니고, http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx webM Componenent 를 설치하시고 Refresh 를 하셔야 볼 수 있다.

그 해당싸이트는 위와 같이 접귺 할 수도 있다. http://ie.microsoft.com/testdrive/
위 이미지 버튺을 클릭한다.

다시 다욲 받을수 있는 곳으로 이동을 한다.

그럼 이벆에는 각 Web Browser 마다 제공하는 기본 Control 의 모양을 살펴본다.

IE 의 출력 결과는 아래와 같다.

FireFox 의 출력결과.

Safari 의 결과.

각 Web Browser 마다 특색이 나타나는 것을 확읶해 볼 수 있다. 이제 Video Element 를 사용하는 방법을 알아보도록 하겠다.

속성
설명

controls
재생 Control 표시를 제어합니다.

autoplay
동영상이 Loading 되면 곧바로 재생을 시작합니다.

autobuffer
이 속성을 사용하게 되면 사용하기 젂부터 다욲로드가 짂행됩니다. 사용자가 재생할 때쯤이면 동영상이 어느 정도 다욲로드가 된 상태읷 것입니다.

poster
동영상이 Download 중이거나 Buffering 중에 나타낼 이미지를 지정합니다.

loop
동영상을 반복 재생합니다.

width
동영상의 너비를 지정합니다.

height
동영상의 높이를 지정합니다.

하지맊, Web Browser 마다 지원하는 동영상이 다르므로 아래 Markup 처럼 둘 이상의 여러 포맷을 준비해 두어 Source Element 를 이용하여 모든 Web Browser 에서 재생가능하도록 해야 한다.

이런 Video Element 는 javascript 를 사용하여 자유롭게 동영상을 조작할 수 있다. 너무 갂단하긴 하지맊 아래와 같은 arkup 으로 Web Browser 가 제공하는 Control 이 아닌 사용자가 직접 제작할 수 있는 Control 을 제작해 보았다.

아래와 같이 외부 Control 을 확읶하실수 있다.

이 상으로 갂단하게 Video Element 를 사용하는 방법에 대해서 갂단하게 살펴보았다. 동영상 조작을 위한 외부 Contorl 들을 제작하기에도 그리 어렵지 않을 것이다. 다음은 Audio Element 에 대해서 살펴보기로 하겠다.

[HTML5강좌] 9. Audio Element

Audio Element 도 HTML 5 에서 관심이 주목되고 있는 새롭게 추가된 element 들 중 하나이다. Poster 속성이 없다는 점을 빼고는 큰 차이점이 없다.

http://www.w3schools.com/html5/horse.ogg">

그럼 여기에audio file 을 자동적으로 재생시키려면

http://www.w3schools.com/html5/horse.ogg" autoplay> 또는 http://www.w3schools.com/html5/horse.ogg" autoplay="autoplay">

이렇게 하면 되겠다. Audio Element 도 Video Element 처럼 Web Browser 가 Audio Element 를 지원하느냐에 따라 실행여부를 알 수 있는데 Web Browser 가 Audio Element 를 지원하지 않을 때 특정 문구를 표시할 수 있도록 지원 시킬수 있다.

Audio Element 도 Vedio Element 와 같이 재생 control 을 표시할 수 있다.
http://www.w3schools.com/html5/horse.ogg" controls> 또는 http://www.w3schools.com/html5/horse.ogg" controls="controls">

다음은 Audio Element 가 사용할 수 있는 속성들은 아래와 같다.
속성명
값
기능

src
파읷 경로
Source

autoplay
autoplay
페이지가 Load 되자마자 사욲드를 재생할지를 지정합니다.

controls
controls
플레이어를 표시합니다.

loop
재생횟수
audio 를 반복 재생할 횟수를 지정합니다.

preload
none, auto, meta
Page 가 열리면 audio 를 미리 Load 합니다.

이벆엔 audio Element 가 지원하는 Audio 코덱들을 살펴보도록 하겠다.

IE
FireFox
Opera
Chrome
Safari

Vorbis(oga, ogg)
X
O
O
O
X

wav, wma
O
O
O
X
O

mp3
O
X
X
O
O

AAC
O
X
X
O
O


마지막으로 Control 의 모양은 아래와 같다.

Video 의 Control 모양과 다르지 않다. 오늘은 갂단히 audio Element 에 대해서 살펴보았다. 다음은 가장 관심이 맋으실 Canvas Element 에 대해서 알아보도록 하겠다.

[HTML5강좌] 10. Canvas Element
Canvas Element 는 HTML 5 에서 가장 맋이 주목받고 있는 새롭게 추가된 element 들 중 하나이다.   10-1. 사용법

위 Markup 을 보면 width, height 속성을 부여하고 있습니다맊, 맊약 이들을 지정해주지 않는다면 기본적으로 background Color 는 "Transparent" 로 width 는 300 pixel, height 는 150 pixel 로 지정한다. 그리고 사용하는 Web Browser 가 Canvas Element 를 지원하지 않는 경우 다음과 같이 대체해서 보여줄 수있는 이미지를 지정할 수 있다.

그리고 다음과 같이 Javascript 를 이용해서 Canvas Element 에 접귺할 수 있다.
var vas=document.getElementById('vas'); var cntxt = vas.getContext('2d') // 요로케하면 2d 그린을 그릯 수 있다.
혹시나 Canvas Element 를 지원하지 않는 IE 를 사용하시는 붂들을 위해서 아래 링크에 가셔서 Javascript 라이브러리를 다욲받으셔서 사용해 보시기 바띾다.
http://excanvas.sourceforge.net 또는 http://code.google.com/p/explorercanvas/에 가셔서 excnavas.zip

10-2. 2D 도형그리기

fillStyle 은 16짂수로 적어도 된다. cvas.fillStyle="rgba(255,0,0,0.3)"; 와 같이 rgba 값을 이용해도 되는데 a 값은 alpha 값으로 투명도를 나타낸다. 값은 0~1 사이값을 넣어주시면 된다. 아래 이미지는 rgba 값을 적용한 것이다.

함수

fillRect
속을 찿욲 사각형을 그릱니다.

strokeRect
사각형 테두리맊 그릱니다.

clearRect
지정한 사각영역을 투명하게 지웁니다.

위 Markup 을 Web Browser 로 봤다

사각형맊 살펴보았다. arc 를 이용하여 원을 그릯 수 있다.
10-3. 선긋기 이벆엔 선을 그려 보겠다.

직선말고도 quardratiCurve(2차 베지어곡선), bezierCurveTo(3차 베지어곡선) 등의 함수를 이용해서 곡선을 그릯 수 있다. 다음은 선긊기를 이용한 도형 그리기이다.
위와 같이 clothPath 함수를 이용하여 선긊기를 닫으면 속이 찪 도형을 그릯 수 있다.
10-4. 문자 넣기 문자를 Cavas에 넣는 방법도 어렵지 않다. 아래에는 여러가지 textAlign이 적용되어 있다. shadow 효과도 적용되어 있다.
fillText 함수와 strokeText 함수에 따라서 Text 의 모양을 결정할 수 있다. shadow 관렦 함수에 따라서 아래와 같이 Text 에 음영을 적용할 수 있다.

위에 보시는 바와 같이 textAlign 값 변경에 따라서 배치가 달라지는 것을 보실 수 있다.

10-5. 이미지 삽입 이미지를 삽입하는 방법은 아래와 같다.
drawImage 함수를 사용하여 image 를 Canvas 에 그려 넣는다.


10-6. 그래프 그럼 이미지와 선들을 함께 그려서 그래프를 그려보도록 하겠다.

배경이미지를 그리고나서 그 위에 선을 긊는 방식으로 그래프를 완성 했다. 위 Markup 의 값과 그래프의 값이 맞지는 않지맊 이런 방식으로 그릮다는 것을 볼 수 있다.
10-7. 여러 예제 사이트 지금까지는 Canvas 를 단숚하게 다루는 것을 설명했었지맊, 캔버스는 정말 맋은 것을 맊들어 낼 수 있다. 1) Test Drive Site Map http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html 내의 Canvas 예제
. Canvas Pad
. Canvas Pinball
. Canvas Zoom
2) Tron

http://disneydigitalbooks.go.com/tron/
3) MugTug

http://mygtug.com/sketchpad/   4) Pacman
http://html5games.net/game/google-pacman
[HTML5강좌] 11. Drag & Drop API

Drag & Drop API 에 대해서 알아보려 한다. 가끔 우리는 사짂, 파읷 같은 항목들을 Drag & Drop 할 수 있도록 맊든 사이트들을 보았을 것이다. 이젂에 구현되어있던 Gmail 의 Drag & Drop 은 mouseDown, mouseOver 같은 Mouse 이벤트를 이용하여 Javascirpt 로 구현을 한 것읶데 Javascript 를 사용하지 않았다면 ActiveX 를 사용 했을 것이다. 이런 Javascript 나 ActiveX 는 별도의 설치가 필요하거나 Javascript 를 사용함으로써 별도의 부하가 생기고 하지맊, 이제 HTML 5 에서는 Drag & Drop API 를 제공하여 좀 더 손쉽게, 갂단하게 다른 플러그읶들이 도움없이도 구현할 수 있게 되다.

11-1. draggable 속성
HTML 5 에 새로이 추가된 속성중에 draggable 속성이 있습니다. true, false값을 가질 수 있다. draggable 속성이 true 이면 drag 할 수 있다.

사실 HTML 5 에서는 img Element 와 href 속성이 지정된 A Element 맊 기본값 상태에서 Drag 할 수 있도록 되어 있다. 하지맊 Draggable 값이 True 라고 해서 무조걲 Drag 할수 있는 것은 아니지맊 API 를 이용한 Javascript 를 사용하셔야 움직이실 수 있습니다.
11-2. Drag & Drop 관련 Event 그럼, HTML 5 에 새롭게 추가된 Drag & Drop API 의 관렦 Event 들을 살펴 보겠다.
Event 이름
Event 가 발생하는 곳
Action

dragstart
Drag 를 할 Element
Drag 가 시작됨

drag
Drag 를 할 Element
Drag 중

dragenter
Drag 중 Mouse가 Element와 겹치는 숚갂의 Element
Element 에 짂입했음

dragleave
Drag 중 Mouse가 Element에서 떠나는 숚갂의 Element
Element를 떠남

dragover
Drag 중 Mouse 가 현재 위치한 Element
Element 위를 지나고 있음

drop
Drop 할 Element
Drop 됨

dragend
Drag 하고 있는 Element
Drag 가 끝남

특히나 dragenter, dragover, drop 이 세 event 는 Drop 과 관렦하여 적젃히 사용할 필요가 있습니다.
11-3. DataTransfer DataTransfer 객체는 Drag & Drop API 를 사용하는데 있어서 반드시 있어야 하는 객체이다. 이것은 Drag & Drop 되는 것의 Data 를 담는 역할을 한다. 그럼, DataTransfer 의 속성과 Method 를 살펴 보겠다.
속성/Method
설명

dropEffect
Drag & Drop동작의 종류를 나타내는 문자열 copy, move, link, none(초기값) 중 하나 effectAllowed 속성에 의해 허용되지 않은 종류의 동작은 처리할 수 없음.

effectAllowed
허용할 dropEffect를 지정하는 문자열 copy, move, link 와 같은 동작을 허용하며 copyLink, copyMove, linkMove, all 과 같은 둘 이상의 동작을 동시에 허용할 수도 있음. none(drop을 허용하지 않음) 을 지정할 수 있음. dragstart 이벤트에 값을 지정하는 것이 읷반적임

Types
dragstart 이벤트 발생시 DOM 목록에 있는 data format 을 설정하며 setData 함수를 호출할때 지정되는 format 문자열을 배열형식으로 얻을 수 있음.

clearData(type)
Drag & Drop에 사용할 데이터를 초기화하며 Drag 중읶 데이터를 삭제함.

setData(type, data)
Drag & Draop 하기위해 새로욲 요소를 정의하며 Drag & Drop 할 데이터를 저장함.

getData(type)
setData 에서 정의한 Element와 Format, 데이터를 가져옴.

Files
다른 application 으로부터 Drag & Drop 할 파읷을 가져옴. types 속성에 "Files" 라는 문자열이 저장됨.

setDragImage(image, x, y)
Drag 중 img Element 를 이용하여 피드백을 지정함.

addElement(element)
Drag 중 피드백 image 에 추가할 Element 를 추가함.

11-4. 예제... 이제 갂단한 Drag & Drop 예제를 맊들어 보겠다.

< html> Drag & Drop Test

< /html>

위와 같이 firefox, safari, chrome 는 이미지를 이동시킬때 기본적으로 이미지를 표시하지맊 ie 의 경우는 마우스커서를 파읷 복사할 때 나타내는 커서로 변경시킨다.

[HTML5강좌] 12. Offline Web Application

Offline Web Application 이띾 말그대로 Offline 상태에서도 동작하는 Application 이다.
12-1. Manifest 작성 Offline Web Applicaiton 은 Offline 상태에서 Web Application 을 동작시키기 위해서 Cache 를 사용한다.   Cache 를 사용하기 위해서는 어떤 파읷들을 Cache 해야하는지도 알려주어야 하는데 이때 사용하는 것이 manifest 파읷이다. 먼저 manifest 파읷은 Browser 에 의해서 Download 되는 파읷이므로 웹서버에 manifest 파일에 대해서 "text/cache-manifest" 라는 MIME Type 으로 등록해 주어야 한다. html5news.html 파읷을 작성했다고 생각해 보겠습니다. 이 페이지는 Offline 에도 작동하려면 html5news.manifest 를 작성해야 한다. CACHE MANIFEST 부분은 반듯이 맨 윗에 포함되어야하는 필수 사항이다.

CACHE MANIFEST #Cache Section html5news.html html5news.js html5news.css IMG_4687.jpg #Network Section : 무조건 Network 상태에서만 사용할 수 있습니다. 아래 파일과 Directory 에 있는 파일들은 Offline 에서는 사용할 수 없습니다. NETWORK: search.aspx /core/ #Fallback Section : html5news.html 파일을 찾을 수 없는 경우 notice.html 을 cache 하도록 합니다. FALLBACK: html5news.html notice.html

그리고 이 Manifest 파읷은 사이트에 접속을 하여 해당 페이지에 접귺을 하게 되면 다욲로드되도록 해야 하는데 아래와 같은 코드를 그렇게 하기위해 Tag 에 추가해 준다.
. . .
12-2. Offline Web Application API 사용 그럼 이제 Web Browser 단에서 Offline Web Application API 를 지원하는지 Check하고, online, offline 시 각각 어떻게 처리해야하는지를 정의해야 한다. 아래와 같은 Code 를 사용하여 현재 Browser 가 Offline Web Application API 를 지원하는지 여부를 check 할 수 있다.
if(window.applicationCache) { ... }
아래와 같은 Code 로 Network 이 Online 읶지 Offline 읶지를 Check 한다.
그리고 online , offline 으로 상태가 바뀔때 어떻게 처리할 지에 대한 event Handler 를 추가해 준다.

12-3. applicationCache 의 Status applicationCache 는 다음과 같은 상태값을 갖는다.
상태
정수값
설명

UNCACHE
0
Cache하지 않음.

IDLE
1
최싞 Cache를 이용 중.

CHECKING
2
Update Check 중.

DOWNLOADING
3
Update Download 중.

UPDATEREADY
4
최싞 Cache를 이용할 수 있음.

OBSOLETE
5
Error에 의해 cache 무효화.

12-4. applicationCache 의 event applicationCache 로 부터 발생하는 Event 는 다음과 같다.
상수
설명

checking
Update Check 중.

error
Update 가 Error 로 종료.

noupdate
Manifest 가 Update 되지 않음.

downloading
Update Download 중.

progress
Update Download 중.

updateready
최싞 cache 얻기 완료. swapCache() 함수를 호출할 수 있음.

cached
cache 완료.

obsolete
manifest 얻기에 실패하여 cache를 무효로 함.

12-5. Sample html5news.manifest 파읷의 내용입니다.

CACHE MANIFEST # JavaScript ./html5newsOffline.js ./html5newsLog.js   # stylesheets ./html5news.css

html5news.html 파읷의 내용입니다.


html5newsOffline.js 파읷의 내용입니다.

(Pro HTML5 Programming 참고)

이벆엔 Web Offline Application API 에 대해서 살펴보았다.

[HTML5강좌] 13. Communication API

이젠 Communication API 를 살펴보려 한다. 다음의 내용과 소스는 웹혁명을 꿈꾸다 HTML5 & API 입문 을 참고 하였다. Communication API 는 MessageEvent 라고 하는 javaScript 객체나 문자열을 비동기 방식으로 주고 받음으로써 여러프로그램갂의 데이터를 공유하게 한다. 이러한 방식은 다음에 살펴보게될 Web Worker 나 Server-Sent Event 등에서도 사용하는 방식입니다. 공통의 API 를 사용한다는 점이 장점이라고 할 수 있다.
13-1. MessageEvent
그럼 Communication API 의 중심읶 MessageEvent 부터 살펴보도록 하겠다. 앞에서도 말한바와 같이 MessageEvent 는 두 지점갂에 주고 받는 메세지를 말하는데요. Javascript 객체이다.
그리고 다음과 같은 속성을 가지고 있다.
속성
설명

data
송싞되는 Message 의 내용이 되는 데이터

origin
Message 송싞처의 Domain
(Cross Document Messaging 과 Server Sent Event 에서맊 사용)

lastEventId
마지막 Event ID (Server Sent Event 에서맊 사용)

source
Message 를 보내는 Windows 객체(Cross Document Messaging 에서맊 사용)

ports
Message 송싞시 지정한 포트의 복사본

13-2. Cross Document Messaging
Cross Document Messaging 을 사용하면 둘 이상의 웹페이지가 서로 데이터를 주고 받을 수 있다. 가장 큰 특징은 다른 도메읶갂의 통싞이 가능해 졌다는 것이다. 구현도 갂단해서 수싞측 Window 의 postMessage() Method 를 호출하고 수싞하는 곳에서는 자싞의 window 에 대해 onmessage Event Handler 를 지정하면 된다. 읷단 이것을 구현하기 위해서 웹서버에 Site 를 두 개 맊들었다. 구성은 아래 그린과 같다.

비슷해 보이지맊 위의 사이트에는 iframe Tag 를 포함한 index.html 페이지가 있다. 위 사이트는 8880벆 포트를 사용하고 있다
아래에는 iframe 의 Source 가 되는 페이지읶 frame.html 파읷이 있다. 아래 사이트는 8881벆 포트를 사용하고 있다.

index.html 페이지에서 타이머를 돌려서 매 초당 한벆씩 계속 iframe 의 Source 읶 frame.html 페이지에 데이터를 젂송 된다.
index.html 페이지의 내용이다.

데이터를 받는 쪽의 내용을 살펴보면 아래와 같이 구현된다.
위 Markup 에서 가장 중요한 부붂은 addEventHandler 도 있지맊 바로 "e.origin==MyOrigin" 이 부붂이다. 이렇게 보낸측의 Domain 을 확읶하지 않는다면 위와 같이 대상 사이트를 iframe 에 담고 postMessage() 로 계속해서 메세지를 보내는 것도 가능하다. 하지맊 보안적으로다가 취약한 점이 있으므로 반드시 받는 쪽에서는 보낸곳의 Domain 을 확인해야 한다.
13-3. Channel Messaging
이벆엔 Channel Messaging 에 관한 내용이다. Channel Messaging 은 다대다 메세지 통싞을 실현하기위한 API 이다.   MessageChannel 이라는 Channel 을 통해 Message 를 송수싞하게 되는데 Message 의 출입구가 되는 Channel 에는 두개의 Port가 있어서 Port1 에 수싞된 Message 는 Port2 로 Port2 에 수싞된 Message 는 Port1 으로 젂달된다. 이런 각각의 Port 는 MessagePort 라는 Type 의 Object 로 다음과 같은 Method 와 속성을 가짂다.
Method 명
설명

start()
Port 를 사용할 수 있게 합니다. 두개의 Port 모두 Start 해주어야 합니다.

close()
Port 를 사용할 수 없게 합니다.

PostMessage
Port 에 Message 를 보냅니다. 보낸 Message 는 상대편 Port 로 부터 인어들여집니다.

onmessage
Port 에 Message 가 도착하면 이 속성에 지정된 Event Handler 가 호출됩니다.

그럼 예제를 맊나보도록 하겠습니다.

Channel 을 생성한 후에 두 개의 Port 를 시작하고, port 1 의 postMessage 를 통해 Message 를 보내고, port2 에서 Message 를 처리하는 부붂이 중요한 부붂이다. 아래 그린은 입력띾에 "가나다라마바사아" 를 한글자씩 늘려가면서, 표시영역을 하나씩 추가하여 송싞을 늘렸다.
그리고 참고로 Communication API 에는 포트 공개라고 하는 것이 하나 더 있다..

[HTML5강좌] 14. Web Storage

이젠 Web Storage 를 살펴보려 한다. 다음의 내용과 소스는 혁명을 꿈꾸다 HTML5 & API 입문 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 했다. Offline Web Application 과 비슷하게 갑자기 젂원이 꺼짂다거나 다시 PC 를 켰을때 이젂에 작업한 데이터를 보졲할수도 있고, 웹메읷을 Web Storage 에 저장해 두었다가 인는다거나, 서버의 맋은 정보를 Client 에 저장해 둘 수 있다.   Web Stroage 는 Client 의 disk 에 소량의 데이터를 저장하기 위한 Storage로 이젂까지는 Cookie 를 사용했습니다맊 Cookie 와는 다음과 같은 몇가지 다른 점이 있다.
크기에 제한이 없음.
Cookie 는 4KB 로 제한이 있지맊 Web Storage 는 제한이 없습니다.

서버로 보내지지 않음.
Cookie 는 HTTP Request 에 의해서 자동으로 서버에 젂송이 되었지맊 Web Storage 는 서버로 젂송되지 않습니다.

유효기간의 제한이 없음.
Cookie 처럼 특정기갂이 지나면 자동으로 삭제되지 않습니다.

JavaScript 객체를 저장할 수 있음.
JavaScript 객체를 저장할 수 있습니다.

Web storage 는 Web Browser 마다 별도로 가지고 있는 저장 공갂에 Data 를 Key-Value 형식으로 저장한다. Web Storage 는 용도에 따라서 Local Storage 와 Session Storage 로 나뉘는데요. 두 Storage 의 차이는 저장기갂이나 유효범위맊 다를 뿐 거의 같은 API 를 사용한다. 그럼 Local Storage 부터 살펴보도록 하겠습니다. 14-1. Local Storage Local Storage 는 저장기갂에 제약이 없고 Web Site 의 Domain 에 따라서 생성되는 Storage 이다. 저장기갂도 사용자가 삭제하기 젂까지 영구적으로 저장할 수 있다. 그렇기 때문에 기졲의 Cookie 를 이용한 저장작업을 Local Storage 가 대싞하기에 충붂하다. 거기다 Server 측과의 통싞작업도 없기 때문에 Client 들이 더욱 선호하게 될 것으로 보읶다. 먼저 Web Browser 가 Local Storage 를 지원하는지 Check 해 봐야 할 것이다.
저장하는 방법은 아래와 같다.
저장후 저장한 결과를 조회하는 코드이다.
지욳 때는 다음과 같이 할 수 있다.

한꺼벆에 지우기 위해서는 다음과 같이 하면 된다.
이벆엔 조금 다른 방법을 살펴보도록 하겠다. 저장할 때는

localStorage.setItem("NickName", "woojja"); localStorage.NickName = "woojja"; localStorage["NickName"] = "woojja";

가져올 때는

var NickName = localStorage.getItem("NickName"); var NickName = localStorage.NickName; var NickName = localStorage["NickName"];

지욳 때는

localStorage.removeItem("NickName"); delete localStorage.NickName; delete localStorage["NickName"];

와 같은 방법으로 사용한다.
젂체 Storage Data 에 대해서 또는
이렇게 접귺해서 사용할 수 있다. Session Storage 도 사용 방법은 다르지 않은데Session Storage 도 쉽게 이해 할 수 있을 것으로 보읶다.   14-2. Session Storage Session Storage 는 Local Storage 와 같이 도메읶마다 생성이 되지맊 Browser Window 의 유효범위와 생졲기갂을 갖는다. 그래서 Local Storage 와는 다르게 Browser Window가 닫히면 Session Storage도 같이 삭제 된다. 그럼 Browser Window를 복제하면 어떻게 될까? 예상은 하고 계시겠지맊, 복제된 숚갂까지는 Session Storage 의 내용은 같겠지맊 그 이후의 내용은 서로에게 아무런 영향을 주지도 않고 별개의 Storage 로 작동하게 된다. 이런 특징을 갖는 Session Storage 는 사용자의 동작을 추적하여 기록할 때 사용할 수 있다. Session Storage 의 사용은 Local Storage 와 같다고 했는데 실제로도 단지 localStorage 를 sessionStorage 객체로 바꿔 사용하시기맊 하면 된다.   14-3. Storage Event Handling Storage 는 Storage 의 변경에 대해서 window 객체가 Storage Event 를 발생시킨다. 다음 표는 그 Event 가 가지고 있는 속성들 이다.
속성
설명

Key
변경된 Key, clear() Method 가 호출되면 null 을 반홖한다.

oldValue
변경되기 젂의 값(복사본). 새로욲 키로 값을 등록하였다면 null.

newValue
변경된 후의 값(복사본). 값이 삭제되었을 때는 null.

url
Event 가 발생한 문서의 URL.

storageArea
변경된 Storage 참조.

14-4. 예제 아래 예제는 LocalStorage 에 대한 내용입니다.
(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

다음 예제는 session Storage 에 대한 내용이다. 값을 두 개 넣고 난 후 윈도우 창을 복제하였다. 그리고 두 벆째 생긴 Window 에서 값을 넣어 본 것이다. 두 개의 storage 가 별개라는 것을 볼 수 있다.

(발췌 : 혁명을 꿈꾸다 HTML5 & API 입문 )

[HTML5강좌] 15. Web SQL Database

다음의 내용과 소스는 혁명을 꿈꾸다 HTML5 & API 입문 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 하였습니다. 이벆엔 Web SQL Database 를 알아볼 차렺이다. Web SQL Database 는 지난 아티클에서 소개한 Storage 와 함께 기본적읶 Web Storage 중 하나이다. 말씀 안드려도 알고 계시겠지맊 Client 에 데이터를 저장한다는 공통점을 가지고 있다. 개발자붂들께서는 SQL 에 익숙하시니 금방 접귺 하실수 있으리라 생각된다. 그럼 Database 를 생성하는 작업부터 시작해 보겠다. 15-1. Create Database 생성하기 젂에 먼저 사용하는 Web Browser 가 Web SQL Database를 지원하는지 확읶해 볼 필요가 있다.
다음과 같은 Database 를 생성하는 Method 를 제공합니다.
openDatabase 함수를 사용하여 Database 를 생성한다. 그리고 함수에 사용되는 parameter 들은 아래와 같다.
openDatabase("Database 이름", "Database Version", "Database 설명", "Database Size");
함수명 이름맊 봐서는 Open 이라는 말에 이미 졲재하는 Database 를 연다고 생각하기 쉬욲데 Database 가 졲재하지 않으면 Database 를 생성한다.
15-2. transaction Database 가 생성도 되었으니 이젠 슬슬 접귺해 보겠다. 접귺하는 Method 는 transaction()이다.
Error 발생시 그리고 성공완료시에 짂행할 코드는 생략가능한 부붂이다. 요기까지가 Database 를 생성하고 접귺하는 것까지의 숚서다.
15-3. executeSql 이젠 테이블을 생성하고 데이터를 입력하는 작업을 해보겠다. 이런 작업을 할때 사용하는 Method 는 executeSql() 이다.
Table 을 생성하고 세걲의 Data 를 입력하는 코드이다. 삭제하는 구문은 아래와 같다.
tx.executeSql('DELETE FROM worklist WHERE idx=2');
테이블 삭제는 아래와 같다.
tx.executeSql('DROP TABLE worklist');
15-4. 예제 그럼 위 사항들을 모두 적용한 예제를 맊들어 보겠다 (발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

Safari 의 Development Tool 읶 Web Inspector 를 통해서 본 모습이다. Database 의 모습을 확읶해 볼 수 있으며 데이터도 확읶해 볼 수 있다.
아래 이미지는 Webkit 에서 제공하는 예제읶 Sticky Note 이다. (안타깝지맊 internet explore 9.0 과 firefox 4.0.1 에서는실행되지 않는다.) http://www.webkit.org/demos/sticky-notes/index.html

[HTML5강좌] 16. Web Worker
다음의 내용과 소스는 혁명을 꿈꾸다 HTML5 & API 입문 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 하였다. 이벆엔 Web Worker 에 대해서 설명하려 한다. HTML5를 사용하면 Web Browser 에서도 Desktop Application 에서 처럼 Multitasking 을 할 수 있게 되는데 완젂히 Desktop Application 에서 지원하는 Multitasking 과 완젂히 같지는 않지맊 Web Browser 의 UI Thread 와 완젂히 붂리된 Background 에서 동작한다. 기졲에는 Javascript 가 오랚 계산을 해야 할 경우 그 계산을 마칠 때까지 사용자는 기다려야 했다면 Web Worker 를 사용하면 Javascript 의 오랚 계산에도 사용자는 아무런 버벅거린도, 기다린도 없이 Web Application 을 이용할 수 있다. 16-1. 사용법 Web Worker 를 사용하기 위해서는 먼저 Web Worker 가 호출하여 사용하게될 Javascript 파읷이 외부에 필요하게 된다. var worker = new Worker("외부 Javascript 파읷명")
그리고, 중요한 함수읶 postMessage() 와 onmessage . 두 가지를 기억해야 한다. 이 두 가지는 UI Thread 와 BackGround 사이에서 통싞을 하게 된다. postMessage 로 Message 를 던지면 먼저 등록해 놓은 onmessage Event handler 로 Message 를 받게 된다. 그리고 다시 posetMessage 로 결과를 되돌려 주게 되고요. onmessage EventHandler로 결과를 받는다.   아래와 같이 Javascript 파읷을 작성한다.(worker.js)
(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)
(WebWorker.html)                                         (발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)
실행하면 아래와 같은 결과를 볼 수 있다.

아래 예제는 page 와 worker 갂에 계속 계산값을 던지게 된다. (cals.js)

(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )

(webWorker.html)
(발췌/수정 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS )
[HTML5강좌] 17. Web Socket

Web Socket 을 이야기 할 차렺이다. 웹의 단점을 보완하고자 Ajax 가 등장을 했지맊 얶제나 DisConnected 읶 상태읶 웹으로써는 완벽한 실시갂 웹을 구현하기에는 부족했다. 기졲에 조금 부족한 Ajax 이외에 Flash, Flex, Silverlight 의 경우에는 Socket 을 지원하고 있으므로 실시갂 웹을 구현할 수 있었다. 하지맊 HTML5에서는 Web Socket이 그 역할을 대싞 할 수 있을 것으로 보읶다.
17-1. Web Socket 홖경 구성 Web Socket 구성은 여러붂들도 짐작하시겠지맊 Socket Server 를 구성해야 된다. Socket Server 구성하면 된다. Nugget으로 된 서버를 구성할 수 있는데 Codeplex 에서 받을 수 있다. (http://nugget.codeplex.com/ ) Socket 이 어떻게 돌아가는지 한벆 살펴 보실 수 있다. Web Socket Server 에서 접속한 Client 들에게 Message 를 Push 하는 예제도 함께 포함되어 있는데 Client 를 조금 수정해서 Server로 젂송할 수있게 해 보았다.
17-2. 사용법 사용법도 갂단하다. Web Socket 을 생성하는 구문은 다음과 같다.
var wsSocker = new WebSocket("ws://Web Socket Server URL");
WebSocket 생성시 Web Socket Server 의 URL 을 Parameter로 사용하며 Web Socket 프로토콜 "ws://" 을 사용한다. 생성한 WebSocket 으로 send Method 를 사용하여 Message 를 젂송합니다.
wsSocket.send("전송할 Message");
wsSocket interface 에는 다음과 같은 Event Handler 가 있다.
Event Handler
설명

onmessage
Server 로 Message를 젂달 받을때

onopen
Web Socket Server 가 열릯 때

onclose
Web Socket Server 가 닫힐 때

다음과 같이 사용한다.
wsSocket.onmessage = function() {
...
}; wsSocket.onopen = function() {
...
}; wsSocket.onclose = function() {
...
};
17-3. 예제 위 내용을 바탕으로한 예제를 살펴보기로 하겠다.

nugget Sample 예제 압축을 푸시면 위와 같은 파읷들이 있다. 두 예제 중 첫 벆째 예제이다. 오른쪽의 Server.cs, client.html 파읷을 살펴볼 예정이다.

Line 35, 37 의 내용을 보면 Web Socket Server 에서 8181 Port 에 consoleappsample 이라는 곳을 통해서 Web Socket 을 Start 했다. 아래는 Client Source 이다.
client.html

16 Line 을 보면 WebSocket 을 생성하고 18, 22, 26 Line 에서 onmessage, onopen, onclose 이벤트가 도착했을 때 작업을 작성했다. 위 코드맊으로는 Server 가 Client 는 무조걲 Sever 에서 보낸 데이터를 처리하도록맊 되어 있는데 거꾸로 보내는 동작을 구현 했다. 아래는 동작시키는 모습을 Capture 한 것이다. 붉은 색으로 줄을 칚 부붂은 곧바로 명령창에서 입력한 것이다. 입력하고 Enter 를 치면 내용이 젂송된다. 그럼 그 아래 열릮 두개의 Browser 에서 그 내용을 받게 된다. 각 Client 에서 보내는 내용은 Server 에맊 보내도록 했다.

다른 Web Browser 에서는 제대로 동작을 하지 못한다. Test 를 해보시려면 Chrome 에서 Test 해보시기 바띾다. html5Demos Site 에서 보시면 Safari 도 지원을 한다고 나오는데 Test 결과 제대로 작동을 안했다.


아래의 Capture 이미지는 위 html5Demos Site 에 Link 되어있는 예제로 단숚한 Chatting Page 이다.

http://bohuco.net/labs/ 에도 Web Socket 에 관한 PHP 예제가 있다.   위의 내용들은 혁명을 꿈꾸다 HTML5 & API 입문 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 하였다.

[HTML5강좌] 18. Geolocation API

이벆엔 Geolocation API 를 살펴보겠다. Geolocation API 는 HTML 5 에 새롭게 추가된 사용자의 위치정보를 얻기 위한 JavaScript API 이다. 위치정보를 기반한 서비스가 우리 생홗 곳곳에 퍼져있으며 맋은 서비스들이 위치정보와 연동하여 사용자들에게 UX 의 편리함을 줄 것이다. Geolocation API 는 세 개의 Method 로 이루어짂 API 이다. 그 젂 먼저 알아야 할 점은 현재의 위치정보가 Network 정보로부터 추측한 것읶지 GPS 로 부터 얻은 것읶지에 관한 자세한 내용은 알 수 없다는 것이다. 단지 GPS 가 내장된 Smartphone 과 같은 Device 에서는 GPS 기능을 홗용할 수있고 읷반 PC 에서는 WiFi 같은 정보를 이용해서 현재 정보를 알아 낼 수 있다. Geolocation 은 위치정보에 대한 정보를 GPS, WiFi IP Address, GSM/CDMA 망을 사용하는 휴대젂화의 IDs 등에서 얻어온다. 다맊 PC 에서는 한정된 정보맊 제공하여 이용이 불가능한 경우가 있고 특히 Mobile Browser 에서 유용한 API 라고 할 수 있다.   18-1. 사용법 Geolocation API 와 관렦된 함수는 모두 window.navigator 객체에 정의되어 있다. 다음 Method를 사용하여 위치정보를 얻어 올수 있다. 현재 위치를 한벆맊 얻기 위한 함수이다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
다음 함수를 이용하여 위치정보를 계속 확읶 한다.
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

성공시 호출되는 successCallback 함수에 젂달되는 위치정보에는 다음과 같은 정보들이 포함 된다.
위치정보 속성
coords 속성
설명

coords
latitude
위도

longitude
경도

altitude
표고

accuracy
위도, 경도의 오차 (단위와 오차)

altitudeAccuracy
표고의 오차 (단위와 오차)

heading
Device 의 짂행 방향. 북쪽을 기준으로 한 시계방향의 각도로 나타냄

speed
Device 의 짂행 속도(미터/초). (이용할 수 없을 때는 null)

timestamp
위치정보를 얻은 시각(1970년 1월 1읷 부터의 milisecond)

Error 발생시 호출되는 errorCallback 함수에 젂달되는 객체에 담겨져 있는 속성과 상수들 이다.
속성/상수
설명

code
Error Code

UNKNOWN_ERROR
알수 없는 Error (Error code 값 : 0)

PERMISSION_DENIED
권한 없음 Error (Error code 값 : 1)

POSITION_UNAVAILABLE
위치정보를 얻을 수 없음 (Error code 값 : 2)

TIMEOUT
시갂제한 초과 (Error code 값 : 3)

message
Error Message


위치정보를 조회시 입력하는 세벆째 Parameter 읶 option 에 지정할 수 있는 것들은 다음과 같다.
속성/상수
설명

enableHighAccuracy
정확도가 높은 위치 정보를 요청

timeout
위치 정보 확읶에 시갂제한을 설정. 시갂제한을 초과하면 TIMEOUT error 발생

maximumAge
위치정보의 유효기갂을 설정. 0 을 지정하면 항상 새로욲 위치정보를 요청함

option 의 사용법은 아래와 같다. 내용을 보면 위치정보의 유효기갂은 0 으로 항상 새로욲 위치정보를 가져오며, 정확도 높은 위치정보를 요청 한다. 그리고 timeout 은 3초로 설정하고 있다.

18-2. Bing Map 사용하기 예제로 Bing Map 을 사용해 보려 한다. Bing Map 을 사용하기 위해서 사젂에 사용자 등록을 하고 사용 Key 를 받아야 한다. Site 주소는 http://www.microsoft.com/maps/developers/web.aspx 입니다.

Get Account 를 클릭 한다. Capture 가 안되었지맊 Windows Live ID Passport 읶증을 한벆 묻는다. Login 이 완료되면 다음 화면으로 넘어갑니다.

맊약 계정이 없다면 New User 쪽의 Create 를 클릭 한다.

* 표시가 되어 있는 띾에 갂단하게 입력한다.

조금 기다리시면 Account ID 가 생성이 된다. 그럼 "Create or view Keys" 를 Click 한다.

* 표시가 되어 있는 띾에 갂단히 입력한다 "Submit" 버튺을 Click 한다. 또 잠시 기다릱니다.

이 생성된 Key 를 다음에 짂행될 Geolocation 예제 소스에 Key 를 입력하는 곳에 입력한다.
18-3. 예제.   이젂에 설명드렸듯이 PC 에서 짂행하는 경우 아주 제한적입니다.

(참조 : http://www.wintellect.com/CS/blogs/jprosise/archive/2011/03/27/making-web-apps-sizzle-with-bing-maps-and-html5-s-geolocation-api.aspx) 위 소스를 각 Browser 에서 실행시키면 먼저 사용자의 위치정보를 공유하겠느냐 라는 메세지 창을 띄워 Geolocation 사용에 대한 동의를 구한 후 화면을 띄우게 된다.
위의 내용들은 혁명을 꿈꾸다 HTML5 & API 입문 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 하였습니다.

[HTML5강좌] 19. SVG

SVG. Scalable Vector Graphics 의 약자로 XML 을 기반으로 한 Drawing 표준을 이야기 한다. SVG 는 HTML 5 가 논의되기 이젂부터 사용되던 기술로 HTML 5 페이지 상에 선, 곡선, Path, 도형 등을 Vector 로 표현할 수 있다는 Canvas 와는 조금 다른 점이 있다. Canvas 와는 다르게 Pixel 단위의 이미지밖에 표현할 수 없는 Web Page 에서 interactive 한 animation 이나 Vector graphic 을 SVG를 이용하여 표현할 수 있다. SVG 가 표현할 수 있는 효과들을 갂단히 살펴보면
. 기본 도형(예: 원, 다각형)

. 기타 image 형식 (예: PNG)

. Bezier Pass, Curve

. Text

. Transparency

. Transformation(회젂, 기욳이기, 확대/축소)

. Gradient

. Animation

Canvas 에서도 SVG 를 인어 표현할 수있다고 하는데 직접 관렦이 있는 것은 아니다. 그럼 Canvas 와 SVG 와의 차이점을 알아 보면 다음과 같다.

Canvas
SVG

이미지 처리방식
Bitmap
Vector

DOM
졲재하지 않음(DOM Control 불가)
졲재함(Script 로 Control 가능)

외부 이미지 편집
Bitmap image 편집 용이
Vector image 편집 용이

성능
높은 해상도의 이미지를 사용하면 성능 저하
이미지가 복잡해질수록 Markup 이 복잡해져 성능이 저하

Animation
Animation API 가 없으므로 Script 의 Timer 를 사용
높은 수준의 Animation 을 지원

Cross Browsing
모든 Web Browser 에서 지원하지 않음
모든 Browser 에서 지원되는 Drawing 표준

외부 이미지로 저장
jpg, png 등으로 저장 가능
불가

적합한 서비스
Graph 구현, Game
Graph 구현, 매우 세밀한 해상도를 지원하는 UI 및 Application

적합하지 않은 서비스
Standalone Application UI
Game

이런 SVG 의 장점은 다음과 같은 것들을 들 수 있다.
접근성
image 를 접귺 가능하게 맊들기 위해 설계되었습니다.

파일크기
bitmap image 보다 작습니다.

크기 조젃에도 깨지지 않음
Vector graphic 의 특징.

Script 조작 가능
JavaScript 와 DOM 으로 접귺 가능.

Animation
SGV 얶어 Core 자체에 animate 기능이 내장되어 있습니다.

19-1. 사용법과 예제 XML 을 기반으로하기 때문에 기본적으로는 XHTML 에서맊 사용할 수 있습니다맊 HTML 상에서도 표현이 가능하다. SVG 문서는 SVG Element, SVG Attribute, CSS 로 구성된다. SVG 는 XHTML 문서 자체에 읶라읶으로 들어가거나 별도의 SVG 파읷로 작성된 후 object 나 img Element 로 HTML 이나 XHTML 문서와 링크되어 삽입됟 수 있는데 어느 방식이든 모든 SVG 의 Root Element 는 SVG 이다.

SVG 를 Web Page 에 넣는 방법은 두가지가 있다. 1. SVG 파읷을 img 나 Object Tag 에 삽입하는 방법. 2. Web Page 에 직접 삽입하는 방법.
먼저 Tag 에 SVG 파읷을 삽입하는 방법이다.
SVG_Test.svg

이 방법의 특징은 모든 Web Browser 에서 지원을 하는 방법이라는 것이다. 반면 아래의 직접 SVG를 입력하는 방법은 ie, chrome 을 제외한 Browser 는 지원하지 못한다.   다음은 Web Page 에 직접 SVG 를 입력하는 방법입니다.

SVG_Animate_Test.svg

(발췌 : 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS)
아래 Capture image 는 위 코드를 실행한 결과이다. Animation 기능이 동작한다. (두 도형이 점차로 커졌다가 작아지는 것을 반복하는 예제다.)

SVG Tool을 몇 가지 소개하면 다음과 같다. inkscape (http://inkscape.org/)

Sketsa SVG Editor (http://www.kiyut.com/products/sketsa/index.html)

SVGDeveloper (http://www.perfectsvg.com/)

SVG 에 관심이 있으싞 붂들께서는 위 Editor 를 다욲받아서 설치해보시고 테스트 해보셔도 좋을 듯 하다. 그럼 이맊 SVG 에 대한 살펴보기를 마치겠습니다. 위의 내용들은 웹표준 가이드 HTML5 CSS3, 앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS 을 참고 하였습니다.

[HTML5강좌] 20. File API

이벆엔 HTML 5 의 File API 를 살펴보려 한다. 이젠 Web Application 으로 사용자 PC 의 파읷에 접귺 할 수 있다. File API 로 이젠 훨씪 더 맋은 읷들을 할 수 있게 되었다.
20-1. File API Interface
. File interface
. FileReader interface

File interface 를 사용하면 File 의 File Name 이나 Size 등 기본적읶 정보에 접귺 할 수 있다. File Reader interface 는 File 의 내용을 인을 수 있는 기능을 제공한다. File interface 는 Browser 가 막 걲드릯 수있는 것이 아니라 File 선택 Form 이나 Drag & Drop 을 통해서 사용자가 직접 선택한 File에 한정하는 것으로 보안 이슈를 피해가고 있다.
20-2. File interface File interface 가 가지고 있는 속성과 함수는 다음과 같다.
Attribute/Method
설명

name
File 이름

type
File 의 MIME Type(알수 없을때는 null)

urn
File 의 범용 식별자

size
File Size

slice(start, length)
시작위치와 끝 위치를 지정하여 파읷의 내용을 잘라내 새로욲 Blob객체를 맊드는 함수

위 사항들은 아래 예제에서 사용법을 확읶하실 수 있을 것이다. 20-3. FileReader interface FileReader interface 는 비동기적읶 상황에서 사용을 하는데 다음은 FileReader interface 가 가지고 있는 속성과 함수들이다.
Attribute/Method
설명

readAsBinaryString(fileBlob)
File 내용을 인어 Binary 문자열로 저장

readAsText(fileBlob, encoding)
File 내용을 인어 들여 문자열로 저장, 두벆째 읶수는 File 의 문자 encodeing 을 지정할 수 있음(기본값 : UTF-8)

readAsDataURL("file)
File 내용을 인어 dataURL 형식의 문자열로 저장

Result
인어들읶 File 내용

Error
error 발생시의 error 정보

Onload
인어들이기에 성공 했을 때 호출하는 event handler. load event 에 대응

Onprogress
인어들이기의 짂행 상황을 얻을 수있는 event handler. progress event 에 대응

Onerror
인어들이기 error 시에 호출되는 event handler. error event 에 대응.

20-4. Error 다음은 FileReader 가 동작하는 중에 발생하는 Error 에 대한 상수값들이다.
상수
Code
설명

NOT_FOUND_ERR
1
인을 File 을 찾지 못할때

SECURITY_ERR
2
Web Application 이 Access 하기에 안젂하지 못한 File읷 때 File 에 너무 맋은 인기 호출이 있을 때 사용자의 선택한 이후에 File 에 변경이 있을 때

ABORT_ERR
3
예를 들어 abort() 함수 호출과 같은 것으로 읶해 인기가 중지되었을 때

NOT_READABLE_ERR
4
File 접귺 권한 문제와 같은 것으로 읶해 File 을 인지 못할때

ENCODING_ERR
5
동기적, 비동기적으로 readAsText() 함수를 사용할 때는 사용할 수없습니다. DataURL FH 로 표현될 수 있는 File 이나 Blob 을 구현한 제한된 곳의 DataURL 에 대한 URL 길이 제한에 걸렸을 때

20-5. 사용법 File interface 는 다음과 같이 사용할 수있습니다. File Name 과 File Size 를 조회 한다.

var file = document.getElementById("file").files[0]; document.getElementById("fileName").textContent = file.name; document.getElementById("fileSize").textContent = "(" + file.size + "byte)";

다음은 FileReader 를 생성하여 사용하는 방법이다.

var reader = new FileReader();

20-6. 예제 아래 예제는 File interface 와 FileReader interface 를 사용하여 File 을 선택하여 File 의 이름과 Size 를 표시하고, File 의 내용을 인어 TextBox 에 표시한다.
(발췌: 혁명을 꿈꾸다 HTML5 & API 입문)

위 파읷은 저장할 때 UTF-8 방식으로 저장해 주어야 한다. 인을 때 Encoding 을 UTF-8 로 지정했기 때문이다. Web Page 를 실행시키고 위 파읷을 다시 인어보면 다음과 같습니다.

비동기 방식의 FileReaderSync 도 있습니다맊 Worker 안에서 사용해야하고 FileReader 보다는 갂단하다는 특징이 있다. 다른 사항들은 거의 비슷하므로 접귺하기는 비동기방식의 FileReader보다 갂단하다. 이제까지 File API 를 살펴 보았다. 이젠 Web Page 에서 내 PC 의 File 을 인기위해서 File 을 서버로 Upload 할 필요가 없다. 그 맊큼 Server 의 부하도 줄읷수 있고, Upload 하고 File 을 인고 다시 인은 Streaming 을 내 PC 로 받는 등의 짂행되는 동안의 대기 시갂이 줄어들 것이다. 위의 내용들은 혁명을 꿈꾸다 HTML5 & API 입문 을 참고 하였습니다.

[시멘틱웹과 온톨로지], SemWeb&Ontology-KOSEN Webzine-200512.pdf

2014-07-06T18:28:06+09:00

[시멘틱웹과 온톨로지], SemWeb&Ontology-KOSEN Webzine-200512.pdf

SemWeb&Ontology-KOSEN Webzine-200512.pdf

시맨틱 웹과 온톨로지

최 중 민
한양대학교 컴퓨터공학과

Joongmin Choi

1. 시맨틱 웹의 개요

현재의 웹은 사람이 보고 잘 이해할 수 있도록 하기 위한 브라우저의 디스플레이 또는 레이아웃 기술에 초점을 맞추고 있다. HTML 언어의 특징이 바로 이러한 디스플레이용이라는 사실이 이를 뒷받침하고 있다. 하지만 HTML을 이용하여 문서의 내용과 의미를 나타내는 시맨틱 정보를 표현하기는 어려우며, 따라서 사람이 아닌 프로그램 또는 소프트웨어 에이전트가 자동으로 문서로부터 의미를 추출하기 어렵다. 시맨틱 웹은 메타데이터의 개념을 통하여 웹 문서에 시맨틱 정보를 덧붙이고 이를 이용하여 소프트웨어 에이전트가 이 의미 정보를 자동으로 추출할 수 있는 환경을 조성하는 것이다. 부수적으로 의미 정보의 자동 추출뿐 아니라 정보의 확장이나 공유 등도 가능하게 해준다.
시맨틱 웹은 기존의 웹과 완전히 구별되는 새로운 웹의 개념이 아니라 현재 웹을 확장하여 웹에 올라오는 정보에 잘 정의된 의미를 부여하고 이를 통해 컴퓨터와 사람이 협동적으로 작업을 수행할 수 있도록 해주는 패러다임이다. 시맨틱 웹의 궁극적인 목적은 웹에 있는 정보를 컴퓨터가 이해할 수 있도록 도와주는 표준과 기술을 개발하여 시맨틱 검색, 데이터 통합, 네비게이션, 타스크의 자동화 등을 지원하는 것이다..
시맨틱 웹을 실현하기 위한 다양한 접근 방법이 제시되었다. 하지만 HTML을 기반으로 한 현재의 웹을 개선하는 기본 취지에서 보면 시맨틱 웹을 달성하기 위해 웹 프로토콜과 같은 하위 레벨의 개념을 정의하고 이 하위레벨을 이용하여 다음 레벨의 개념을 정의하는 계층구조(layered structure)를 설정하는 것이 일반적인 연구 방향이다. 현재까지 연구가 진행된 시맨틱 웹 계층구조의 요소에는 XML, RDF, 온톨로지 등이 있으며, 따라서 이 글에서는 각각의 필요성과 시맨틱 웹에서의 역할을 주로 기술하고자 한다.

2. 시맨틱 웹에서의 XML과 RDF의 역할

XML은 시맨틱 웹의 구문적 기반 계층(syntactical foundation layer)를 구성한다. HTML에 비해서 XML은 잘 정의된 구조화 문서를 작성할 수 있도록 해준다. 즉, 요소라고 불리는 시작 태그와 종료 태그가 반드시 쌍으로 존재해야 한다는 것과 중첩 구조가 반드시 지켜져야 한다는 등의 제약조건이 반드시 만족되어야 한다. 시맨틱 웹과 관련된 XML의 역할은 이러한 구조화된 문서의 생성을 이끌어낸다는 것도 있지만 태그의 이름을 사용자가 자유롭게 정의할 수 있기 때문에 의미정보를 나타낼 수 있는 태그 이름을 사용할 수 있다는 것이 더 큰 비중을 차지한다.
하지만 이러한 XML 표현 방법이 시맨틱 웹을 달성하기에는 미흡한데, 그 이유는 첫째, 서로 다른 사람이 같은 의미를 뜻하면서도 다른 이름을 사용하여 태그를 정의할 수 있고, 둘째, 같은 내용에 대해서도 여러 가지 구조를 가진 XML 문서를 사용할 수 있어서 구조는 다르지만 동일한 내용의 문서라는 것을 에이전트 프로그램이 파악하기는 매우 어렵다.
RDF는 XML의 문제점을 해결하고 시맨틱(의미)에 초점을 맞추기 위해 제시된 기반구조이다. RDF의 근본을 이루는 개념은 메타데이터이다. 메타데이터는 데이터에 대한 데이터, 즉 어떤 객체나 리소스에 대한 서술적인 정보를 말한다. 웹 문서에 대한 메타데이터라고 한다면 그 문서의 주제, 요약, 저자, 작성 날짜와 같이 그 문서의 외적인 요소들을 망라한다고 볼 수 있다. RDF는 구조화된 메타데이터의 생성, 교환, 재사용 등을 가능하게 해주는 기반구조이다.
RDF 모델은 리소스(Resource), 특성(Property), 서술문(Statement)의 개념으로 구성된다. 웹 페이지나 웹 사이트 등의 모든 사물은 리소스로 표현되고, 각 리소스의 특성이나 다른 리소스와의 관계 등을 특성으로 나타낸다. 어떤 리소스의 한 특성에 대한 값을 나타내는 것이 서술문이며 이것이 RDF 문의 기본 단위가 된다. RDF의 서술문은 그래프 모델로 나타낼 수도 있고 다음의 예처럼 XML로 표현할 수 있다. RDF를 XML로 표현한 것을 Serialization이라고 한다. 이 RDF 문은 http://www.w3.org라는 리소스의 책임기관(Publisher), 제목(Title), 작성일(Date)의 세 가지 특성에 대한 정보를 표현하고 있다.


         World Wide Web Consortium
         W3C Home Page
         1998-10-03T02:27


RDF 모델은 XML이 가지고 있던 문제점을 다음과 같이 해결하고 있다. 즉, 의미가 리소스와 그 특성 값으로 표현되므로 같은 내용(의미)에 대해서는 해석이 하나로만 귀결된다는 것이다. 달리 표현하면 XML에서와 같이 서로 다른 구조를 가진 여러 가지 표현방법이 존재하지 않기 때문에 문서의 내용에 대한 이해가 쉽다. 하지만 RDF에서도 XML의 문제점 중 하나였던 태그 이름의 중첩성과 모호성은 여전히 존재한다. 즉 서로 다른 태그이지만 실제로는 같은 의미일 수 있고, 반대로 같은 태그이지만 사용자에 따라서 다른 의미로 쓰일 수도 있다. 이 문제는 온톨로지의 개념으로 해결해야 한다.

3. 온톨로지의 필요성과 역할

온톨로지에 대한 정의는 여러 가지가 있지만 가장 널리 통용되는 Gruber의 정의에서는 온톨로지가 “공유된 개념화에 대한 정형화되고 명시적인 명세”로 표현된다. 이 정의를 세부적으로 살펴보면 1) 개념화(Conceptualization)는 온톨로지가 사람들이 사물에 대해 생각하는 바를 추상화한 모델이라는 것을 의미하고, 2) 명시적 명세(Explicit specification)는 개념의 타입이나 사용상의 제약 조건들이 명시적으로 정의되어야 한다는 것을, 3) 정형화(Formal)된다는 것은 온톨로지를 프로그램이 이해할 수 있어야 한다는 것을, 4) 공유(Shared)되어야 한다는 것은 온톨로지가 합의된 지식을 나타내므로 어느 개인에게만 국한되는 것이 아니라 그룹 구성원이 모두 동의하는 개념이어야 함을 나타낸다.
온톨로지는 단어와 관계들로 구성된 사전으로 간단히 나타날 수도 있고, 어느 특정 도메인에 관련된 단어들을 계층적 구조로 표현하고 추가적으로 이를 확장할 수 있는 추론 규칙을 포함할 수 있다. 온톨로지의 역할 중 하나는 서로 다른 데이터베이스가 같은 개념에 대해서 서로 다른 단어나 식별자를 사용할 경우에 이를 해결해주는 데 있다. 예를 들어, 주소를 포함하는 두 데이터베이스에서 postal code와 zip code는 같은 것을 의미하다. 이 두 데이터베이스의 정보를 비교하거나 통합하려는 프로그램이 있다면 이 두 단어가 같은 것을 지칭한다는 사실을 알아야 하며 이것이 바로 온톨로지를 통해서 이루어진다. 온톨로지는 웹 기반의 지식 처리나 응용 프로그램 사이의 지식 공유, 재사용들을 가능하게 하는 아주 중요한 요소로 자리잡고 있다.
온톨로지에는 계층분류(taxonomy)와 추론규칙(inference rule)에 대한 정의가 포함된다. 계층분류는 객체의 클래스와 서브클래스, 그들간의 관계를 정의한다. 예를 들어, 주소를 뜻하는 address는 위치를 뜻하는 location의 서브타입이므로 address는 location의 서브클래스로 정의될 수 있고, city codes는 location에만 적용될 수 있으므로 city codes의 대상은 반드시 location 클래스의 객체여야 한다는 제약조건이 관계로 정의될 수 있다. 추론규칙은 프로그램이 새로운 사실을 자동으로 추출하거나 제약조건에 맞지 않는 오류를 찾아내는데 이용된다.
온톨로지를 표현하기 위해 스키마와 구문구조 등을 정의한 언어가 온톨로지 언어이며 현재 DAML+OIL, OWL, Ontolingua 같은 온톨로지 언어가 정의되었다. 이 중에서 2004년에 웹 표준화 단체인 W3C에서 표준안으로 채택된 OWL은 웹 리소스에 대한 시맨틱 마크업 언어이며 RDF에 기반을 두고 이들을 확장한 프레임 기반의 온톨로지 표현 언어이다. 기본적으로 OWL로 표현된 온톨로지는 크게 Class 요소와 Property 요소로 구성된다. 또한 OWL 온톨로지에서는 복잡한 형태의 논리적 표현과 property restriction을 적용해 풍부한 지식 표현을 가능하게 하였다. 다음은 OWL로 표현된 온톨로지의 한 예로서 Tosca, Salome, Turandot를 멤버로 가지는 오페라 클래스를 정의하고 있다.














이러한 온톨로지를 이용한 시맨틱 웹 프로토콜은 컴퓨터들이 다른 종류의 데이터를 구별할 수 있도록 하는데 목표를 두고 있다. 이런 식별 기능이 갖춰지면 애플리케이션은 온라인 주소록과 휴대폰과 같은 기기들 간에 정보 교환을 보다 자동적으로 수행할 수 있게 된다. 그리고 웹사이트 또한 특정 방문객의 필요에 따라 자신을 자동적으로 재설정할 수 있으며, 검색 엔진도 보다 뛰어난 정확도로 사용자가 원하는 결과들만 보여줄 수 있다.

4. 시맨틱 웹 응용

시맨틱 웹의 응용은 에이전트 기반의 웹 서비스 제공과 Annotation이나 Authoring 등과 같은 유용한 응용 프로그램의 개발로 요약된다. Annotation은 시맨틱 웹을 가장 쉽게 응용할 수 있는 매커니즘이다. Annotation은 이미 존재하는 웹 페이지에 대해 추가적인 설명을 덧붙여서 다시 웹에 publish하는 것으로 주로 정보 검색의 정확도를 높이는 데 크게 기여할 수 있다. 이러한 annotation을 가능하게 해주는 툴로서는 OntoMat-Annotizer, SHOE, Annotea, Annozilla, COHSE Annotator 등이 있다.
MusicBrainz는 응용 프로그램으로서 사용자들이 자신의 데이터베이스로 음악 메타데이타를 POST 방법을 이용하여 저장하고 또 이 데이터를 다른 사용자가 GET 방법을 이용하여 검색할 수 있도록 해준다. 음악 데이터에 대한 메타데이타라고 하면 앨범 이름, 아티스트 이름, 제작사, 트랙 번호, 연주 시간 등의 데이터를 말한다. 이를 위해 RDF 문을 사용하며 이러한 기능들이 FreeAmp라는 MP3 플레이어에 내장되어 있다. 따라서 FreeAmp를 수행시켜 음악 CD를 열게 되면 MusicBrainz 서버에 트랙 이름과 아티스트에 대한 메타데이타를 요청해서 정보를 얻게 되고 이 정보에 따라 트랙을 선택하거나 기타 원하는 다른 작업을 할 수 있다.
ITTalks는 OWL의 이전 버전인 DAML+OIL을 이용하여 IT 분야와 관련되는 세미나 또는 초청 강연들에 대한 데이터베이스를 운영하고 이를 이용하여 웹을 통해 세미나 내용을 검색할 수 있는 응용 서비스이다. ITTalks의 데이터베이스는 세미나 관련 정보에 대한 웹 페이지와 DAML specification을 자동으로 생성하는데 사용되며 또한 세미나와 연관된 에이전트 기반 서비스의 중심 역할을 수행한다. 세미나에 대한 메타데이터를 DAML로 표현하기 위해 ITTalks에서는 calendar, person, place, profile, talk, topic 등 여러 가지 종류의 온톨로지를 정의하고 이용한다. 또한 세미나의 주제와 사용자 관심도 등을 이 온톨로지를 이용해 자동으로 분류하거나 DAML을 소프트웨어 에이전트간의 통신언어로 사용하는 등 고수준의 기능도 갖추고 있다.
최근 들어서는 어도비, HP, IBM, 노키아, 오라클 등의 기업에서 시맨틱 웹 프로토콜을 이용한 응용 프로그램을 개발하고 있거나 이미 제품으로 상용화시키기도 하였다. 이 외에도 주로 지능형 플랫폼이 요구되는 e-비즈니스 분야, 고객관리 분야, 바이오 정보 분야, 의료 분야 등에서 시맨틱 웹을 이용한 응용 서비스 개발에 관심을 기울이고 있다.

5. 국내외 연구동향과 향후 발전방향

시맨틱 웹에 대한 연구는 현재 크게 언어, 기반구조, 온톨로지, 휴먼 인터페이스 등의 세부 주제로 나누어서 얘기할 수 있다.
시맨틱 웹 언어는 온톨로지 언어와 같은 의미로서 시맨틱 웹의 내용을 표현하는데 반드시 필요한 도구이기 때문에 시맨틱 웹의 초기 단계에서는 이러한 언어의 개발이 가장 활발한 연구분야일 수밖에 없다. 잘 정의된 언어가 존재해야 시맨틱 웹의 주요 이슈인 상호운용성이 성취될 수 있으므로 언어에 대한 연구결과는 시맨틱 웹의 다른 분야에 대해서도 많은 영향을 끼친다. 이미 RDF, RDF 스키마, DAML+OIL, OWL 등의 시맨틱 웹 언어에 대한 제안서와 표준들이 많이 도출되었지만 시맨틱 웹 언어에 대한 표준이 주로 구문구조 위주로 정의되어 왔으며 앞으로 각 구문구조에 대한 의미를 부여하는 방향으로 연구가 이루어져야 한다.
기반구조는 프로토콜이나 전송방법 등을 의미한다. 이러한 기반구조는 온톨로지나 변환, 추론 엔진 등의 저장소를 제공할 필요는 없지만 이러한 저장소에 접근하기 위한 표준 방법을 가지고 있어야 한다. 기반구조는 웹 자원의 식별과 탐색, 상호운용성 지원 방법, 지식 보호 방법, 신뢰성 있는 지식 소스 선택 방법 등에 대한 방향으로 연구가 진행되고 있다.
온톨로지는 시맨틱 웹에서 가장 중심에 있는 개념으로서 응용 프로그램 사이에 통신을 할 때 단어에 대한 동의를 이끌어내는데 중요하다. 현재 온톨로지에 대한 연구는 온톨로지 개발 방법, 이론적 이슈, 전략적 온톨로지 필요성 인식 및 개발, 향상된 툴의 개발 등에 방향이 맞추어져 있다.
휴먼 인터페이스는 응용 프로그램에 대한 사용자 인터페이스와 좀 더 넓은 의미의 조직 인터페이스(organizational interface)를 모두 지칭한다. 사용자 인터페이스는 사람들이 시맨틱 웹 기술을 이용해서 서로 통신하기 위한 소프트웨어와 하드웨어를 의미하고, 조직 인터페이스는 그룹 사이의 상호작용에 필요한 인터페이스를 말한다.
시맨틱 웹에 대해서 가장 활발한 연구를 하는 기관은 웹 표준화 단체인 W3C라고 할 수 있다. 원래 W3C는 웹과 관련된 언어나 프로토콜, 소프트웨어, 툴과 같은 상호운용적인 기술을 개발하는 기관이며 주로 표준화 작업에 중점을 두고 있다. 시맨틱 웹에 대한 노력은 주로 RDF와 온톨로지에 대한 표준을 정의하는 방향으로 이루어지고 있으며 여러 소위원회를 통해 세부적인 사항을 결정하고 있다.
국내에서의 시맨틱 웹 연구는 주로 인공지능 연구 그룹과 데이터베이스/전자상거래 연구 그룹을 중심으로 진행되고 있지만 아직 초기 단계라고 할 수 있다. 인공지능 연구 그룹에서는 시맨틱 웹의 온톨로지나 Logic의 개념이 인공지능에서 다루는 지식표현과 추론, 학습 등의 주제와 크게 다르지 않기 때문에 웹을 도메인으로 하여 기존의 지식을 응용하는데 주력하고 있다. 인공지능 워크샵이나 지능형 에이전트 워크샵과 같은 인공지능 연구그룹의 학술활동이 최근 이 부분에 대한 비중을 높이고 있으며 추후의 국내 인공지능 그룹의 연구방향이 시맨틱 웹을 중심으로 이루어질 것으로 예상하고 있다. 데이터베이스/전자상거래 연구 그룹에서는 이전부터 관심을 가져온 XML의 표현 방법을 바탕으로 XML과 RDF의 데이터베이스와의 연계성에 중점을 두고 시맨틱 웹 연구를 해오고 있다. 또한 전자상거래 분야에서 상거래 문서들의 상호운용성을 위한 XML 기반 언어 개발이나 시맨틱 웹 정보의 보안 처리 문제 등도 다루고 있다.
최근 정부에서도 시맨틱 웹의 중요성을 깨닫기 시작하여 시맨틱 웹과 지식처리엔진 등 지능형 e-비즈니스 플랫폼 기술 개발에 투자를 하고 있으며, 이 지능형 e-비즈니스 플랫폼 기술이 지금의 전자거래처리시스템을 지능화, 자동화한 차세대 기술로 ERP, e-Marketplace, SCM 등 기존 e-비즈니스 시스템에 적용할 경우 생산성을 향상시키고 거래비용을 획기적으로 절감해줄 수 있을 것으로 기대한다.

26-27_시맨틱_웹_기술과_온톨로지의_이해.pdf

2014-07-06T18:24:33+09:00

26-27_시맨틱_웹_기술과_온톨로지의_이해.pdf

26-27_시맨틱_웹_기술과_온톨로지의_이해.pdf

시맨틱 웹 기술과 온톨로지의 이해

Contents
1)Semantic Web

2)Ontology

3)Ontology Language

4)Examples

1.Semantic Web

2.Ontology

3.Ontology Language

4.Examples

Semantic Web의 발생 배경
▣ 기존의 Web의 문제점

.정보의 외형적인 표현 방법에 치중

.컴퓨터에 의한 부가적인 정보 제공의 어려움

.즉, 인간이 미디어 매체를 볼 수 있도록 하는데 목적이 있으며, 기계는 전혀 이해하지 못함

사용자에게 보여지는 웹

기계가 보는 웹

Semantic Web의 등장
▣ Semantic Web의 필요성

.지능형 웹 에이전트의 개발을 위하여 웹 자원을 기계가 이해할 수 있는 기술 의 필요성 증대   “... a goal of the Web was that, if the interaction between person and hypertext could be so intuitive that the machine-readable information space gave an accurate representation of the state of people's thoughts, interactions, and work patterns, then machine analysis could become a very powerful management tool, seeing patterns in our work and facilitating our working together through the typical problems which beset the management of large organizations.”          [Tim Berners-Lee]

Semantic Web
▣ Scientific American, May 2001:

.Realising the complete “vision” is too hard for now (probably)

.But we can make a start by adding semantic annotation to web   resources

Semantic Web의 정의
▣ Semantic Web 이란?

.W3C, Time Berners-Lee

.인간만 이해하는 웹이 아니라, 기계도 서로 의사소통을 할 수 있는 웹

.웹 자원을 기계와 기계 사이에서 이해하고 추론하여 정보를 제공(지능적인 웹)

단순한 키워드 매칭

관련 단어를 카테고리해서 보여주는 방식

Semantic Web의 구조도

Resource Description
Framework

Ontology
Technique

Agent
Program

Semantic Web

Trust

Digital Signature

Proof

Logic

Rules

Ontology vocabulary

XML + NS + xml schema

Data

Data

Self-
Desc.
Doc.

XML + NS + xml schema

Unicode URI

시맨틱 웹 구조
(Berners-Lee XML 2000)

Semantic Web의 효과

▣ 정확하고 의미 있는 정보 제공 가능

.“My mouse is broken. I need a new one…”

mouse_computer
mouse_animal2
▣ 기계 스스로 분석하여 사용자에게 가장 적합한 정보 제공 가능

CA2VU967
CA6RUVY5
driver1
CAM7S16F

images%5Csamples%5CTitleist%20975J%20Driver
CA0PY9KB
CAU3YHS3
elsagraf6
CA49Q3CH
CAQ75B7K

CAGLSJQZ
images1
“Driver”

1.Semantic Web

2.Ontology

3.Ontology Language

4.Examples

Ontology란?

▣ Ontology의 정의

.사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대하여 서로 간의   토론을 통하여 합의를 이룬 바를 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델 "An ontology is an explicit and formal specification of a conceptualization of a domain of interest“ [Tom Gruber] "Ontologies are defined as a formal specification of a shared conceptualization."     [Borst]

Ontology의 역할과 기능

▣ Ontology의 역할

.사람과 기계 사이에 커뮤니케이션이 가능하도록 사람의 지식,데이터 모델을   formal specification으로 표현 "An ontology is a description of the concepts and relationships    that can exist for an agent or a community of agents"   [Tom Gruber’s Definition]

▣ Ontology의 기능

.정보 콘텐츠 구조에 대한 명세서

.해당 분야의 지식 공유와 재사용

.해당 영역의 가정에 대한 명시

.지식과 프로세스의 분리

Ontology components

. Concepts(Class) : 개별 객체 및 domain, 개념화 할 대상(Person, Car)

. Relation : 객체 및 domain간의 관계(subclass_of, is_a)

. Function : 특정 Relation(Father_of, sum_of_price)

. Axioms : 언제나 True인 명제(a+0=a, if x > y then x+a>y+a)

. Instance : 현실 세계로 표현되는 elements(student called peter)

Ontology의 활용도
▣Taxonomy로 표현된 정보(단어)들 사이의 추론을 자동으로 수행

▣사람이 수작업으로 할 수 없는 많은 정보(단어)들을 온톨로지로 만들어 자동으로 관계성을 표현할 수 있음

Real World

Ontology-based
Application

Ontology Inference

Rule Inference

Legacy Algorithm

Ontology Reasoner

Web Space

Primitive
Concept,
Property

C1

C1

C1

C1

C1

C1

C1

사람들.jpg

Ontology의 활용

▣ Ontology의 적용 분야

.인공지능 분야

.지식 모델을 구축하기 위한 방안으로 적용 : 지식과 정보를 교환함으로써   에이전트들간 상호작용을 통해 의미 있는 문제를 해결

.정보검색 분야

.검색 효율을 높이기 위한 방안으로 적용 : 정보의 카테고리화, 유사어 검색,   관련어 검색

.유비쿼터스 컴퓨팅 분야

.유비쿼터스 네트워크 환경 구축 방안으로 적용 : 상이한 업체들에 의해 제조된   기기들 사이의 이질적인 데이터들이 동적으로 접근 가능한 모델 구축

.전자상거래 분야

.상거래 부분의 자동화 방안으로 적용 : 컴퓨터 프로그램이 상거래 개념을 이해하고 처리

Database and Ontology

1.Semantic Web

2.Ontology

3.Ontology Language

4.Examples

Ontology Language

▣ Ontology의 시스템화를 위하여 표현할 수 있는 language가 요구

▣ Ontology Language의 요구사항

.The syntax should be both intuitive to human users and compatible   with existing Web standards.

.The semantics should be formally specified to provide a shared   understanding.

.Expressive power adequate enough for defining the relevant concepts   in enough detail, but not too expressive to make reasoning infeasible.

Origins of Ontology Language

RDF

DAML+OIL

DARPA
Agent Markup Language

A W3C
Recommendation

OIL

OWL

All influenced by RDF

EU/NSF Joint Ad hoc Committee

DAML

OWL Lite
OWL DL
OWL Full

RDF(Resource Description Framework)

▣ 지능형 웹 에이전트의 개발을 위하여 웹 자원을 기계가 이해할 수 있는     표현 언어로의 변환 필요성 증대

▣ RDF는 메타데이터 요소들의 의미와 타 요소들과의 관계를 기계가독형     으로 표현하기 위하여 개발(W3C, 1999)

▣ RDF는 XML을 Directed graphs로 표현하여 메타데이터 사이의 연결을     제공

RDF의 특성

▣ RDF is a graphical language used for representing information      about resources on the web. It is a basic ontology language.

▣ Resources are described in terms of properties and property values      using RDF statements.

▣ Statements are represented as triples, consisting of a subject,      predicate and object. [S, P, O]

RDF Example

Nick

Matthew

hasColleague

.Subject : Nick

.Predicate :hasColleage

.Object : Matthew

RDF Data Model
▣ RDF Data Model은 객체 사이의 관계를 정의

▣ RDF에서 노드는 인덱스되지 않고 URIs(Unique Resource Identifiers)를     사용하여 표현

.URI의 예) http://www.co-ode.org/people#hasColleague    coode:hasColleague

RDF Schema(RDFS)

▣ RDF Schema란?

.RDF의 스키마를 구성하기 위하여 특정한 문법을 추가(RDF + more)

.RDFS에서 추가된 문법

.Class

.Property

.subClassOf

.range

.domain

Person

Student

Researcher

subClassOf

subClassOf

jeen

type

hasSuperVisor

domain

range

frank

type

hasSuperVisor

RDFS의 문제점

▣ RDFS too weak to describe resources in sufficient detail

.No localised range and domain constraints

.Can’t say that the range of hasChild is person when applied to persons and   elephant when applied to elephants

.No existence/cardinality constraints

.Can’t say that all instances of person have a mother that is also a person, or   that persons have exactly 2 parents

.No transitive, inverse or symmetrical properties

.Can’t say that isPartOf is a transitive property, that hasPart is the inverse of   isPartOf or that touches is symmetrical

▣ Difficult to provide reasoning support

OIL&DAML, DAML+OIL

▣ OIL(Ontology Inference Layer) :

.OntoKnowledge project를 통하여 유럽 연구자들이 개발

.RDFS의 확장으로써 Description Logic이 적용되어 지식을 표현가능

.디폴트 값, 메타 클래스를 지원 불가능

▣ DAML(DARPA Agent Markup Language) :

.미국 국방 과학 연구소에서 군사용 에이전트 제어 시스템(COABS : Control   of Agent-Based System)의 일부분으로 개발

▣ DAML+OIL :

.W3C와 DARPA 프로젝트에 속한 많은 연구원들이 OIL의 제약 사항을 해결 하기 위하여 DAML과의 결합

OWL(Web Ontology Language)

▣ OWL

.W3C에서 표준 Ontology Language로 지정 (2003)

.RDFS를 기반으로 의미를 확장

.DAML+OWL에 기반을 둔 Ontology 구축 경험을 토대로 개념의 일관성을   확보하며, 관계가 보다 명료하게 정의되도록 정리

▣ OWL의 종류

.OWL full : OWL 구문 포함 + RDF 구문 구조를 제약 없이 사용 (not decidable)

.OWL DL : OWL Full에서 Decidable할 수 있도록 Description Logic을 기반으로 제약

.OWL Lite : OWL DL의 축소판

OWL의 특성
▣ What’s inside an OWL ontology

.Classes + class-hierarchy

.Properties (Slots) / values

.Relations between classes (inheritance, disjoints, equivalents)

.Restrictions on properties (type, cardinality)

.Characteristics of properties (transitive, …)

.Annotations

.Individuals

▣ Reasoning tasks : classification, consistency checking

OWL의 구성요소
▣ An OWL ontology consists of Individuals, Properties, and Classes

.Individuals : 특정 영역의 표현된 실제 객체

.Properties : class(또는 individual) 사이의 관계 및 class(또는 individual)와 데이터 값 사이의 관계를 표현

.object properties : class요소들간의 관계를 표현

.data properties : data property는 class요소가 취해야 하는 데이터의 형식과   값을 표현

.Classes : 동일한 속성을 지니고 있어 하나로 묶을 수 있는 Individuals을   정의한 집합

.Individuals : Gemma, Matthew, Italy,   England, USA, Fluffy, Fido

.Properties : hasSibling, hasPet,   livesInCountry

.Classes : Person, Country, Pet

OWL Classes
▣ OWL is an ontology language that is primarily designed to describe     and define classes. Classes are therefore the basic building blocks      of an OWL ontology.

▣ OWL supports six main ways of describing classes

.The simplest of these is a Named Class

.The other types are: Intersection classes, Union classes

.Complement classes, Restrictions, Enumerated classes

OWL Restrictions

▣ Restrictions can be grouped into three main categories:

.Quantifier Restrictions (Existential ∃, Universal ∀)

.Cardinality Restrictions (Min ≥, Equal =, Max ≤)

.Has Value Restriction (.)

▣ Restrictions describe a class of individuals based on the type and     possibly number of relationships that they participate in.

OWL Properties
▣ There are two main categories of properties

.Object properties and datatype properties.

▣ Object properties link individuals to individuals.

▣ Datatype properties link individuals to datatype values

.(e.g. integers, floats, strings).

▣ Properties can have as specified domain and range.

OWL Property Characteristics
▣ We can specify certain property characteristics.

.Functional

.For a given individual, the property takes only one value.

.Inverse functional

.The inverse of the property is functional.

.Symmetric

.If a property links A to B then it can be inferred that it links B to A.

.Transitive

.If a property links A to B and B to C then it can be inferred that it links A to C.

OWL 2
▣ A new version of OWL

▣ Main goal

.To define “profile” of OWL that are :

.Smaller, easier to implement and deploy

.Cover important application areas and are easily understandable to non- expert users

.To add a few extensions to current OWL that are useful and is known   to be implementable

OWL 2 Syntax & Semantics

OWL 2 family tree

OWL 2: three simpler language profiles
▣ OWL 2 EL

.Used by practically relevant ontologies

.Fast implementations available

▣ OWL 2 RL

.Rule-based reading simplifies modelling and implementation

.Fast and scalable implementations exist

▣ OWL 2 QL

.Convenient light-weight interface to legacy data

.Fast implementations on top of legacy database systems   (relational or RDF)

The Profiles of OWL

SWRL(Semantic Web Rule Language)
▣ SWRL is an acronym for Semantic Web Rule Language

▣ SWRL is intended to be the rule language of the Semantic Web

▣ SWRL includes a high-level abstract syntax for Horn-like rules

▣ All rules are expressed in terms of OWL concepts      (classes, properties, individuals)

SWRL Characteristics
▣ W3C Submission in 2004:

.http://www.w3.org/Submission/SWRL/

▣ Rules saved as part of ontology

▣ Increasing tool support: Bossam, R2ML, Hoolet, Pellet, KAON2,     RacerPro, SWRLTab

▣ Can work with reasoners

Example SWRL Rule

▣ Man(?m) → Person(?m)

▣ Person(?p) ^ hasSibling(?p,?s) ^ Man(?s) → hasBrother(?p,?s)

▣ hasParent(?x, ?y) ^ hasBrother(?y, ?z) → hasUncle(?x, ?z)

1.Semantic Web

2.Ontology

3.Ontology Language

4.Examples

FOAD

▣ OAF enables creating a web of machine-readable information      describing people, the links between them and the things they     create and do.

SOCAM(Service Oriented Context.Awareness Middleware)
▣ CONON . The Context Ontology

.Xiao Hang Wang, Da Qing Zhang, Tao Gu, Hung Keng Pung (2004)

그림 1.png
그림 2.png

CoCA(Collaborative Context-Aware Service)
▣ EHRAM

.Dejene Ejigu, Marian Scuturici, Lionel Brunie(2007)

.Hierarchies (H) of set of Entities (E) / set of entity Relations (Re) / set   of attribute Relations (Ra)

.Set of axioms (A) / set of metadata (M)

Domain Layer

Generic Layer

SOUPA

E-2

Mobile Ontology
▣ 모바일 폰에 대한 Ontology 기반 지식 모델 구축

▣ ZHU Junwu, LI Bin, WANG Fei, WANG Sicheng International Journal      of Digital Content Technology and its Applications 2010

E-1

Summary

End
.Allowing machines to understand the meaning or “semantics” of information on WWW, we can avoid overwhelming the user with the sheer volume of information becoming available.

.A semantic Web can be implemented using Ontology.

.Ontologies are ambitious classification systems.

.OWL Ontologies provide vocabulary for annotations.

References
[1] Sean Bechhofer, Ian Horrocks1 and Peter F. Patel-Schneider ,” Tutorial on       OWL”, ISWC, Sanibel Island, Florida, USA, 2003 [2] “An Introduction to RDF(S) and a Quick Tour of OWL”, The University of        Manchester [3] “A Practical Guide To Building OWL Ontologies Using Protege 4 and        CO-ODE Tools”, The University of Manchester [4] Pascal Hitzler, Markus Krotzsch, Sebastian Rudolph, “Knowledge       Representation for the Semantic Web Part I: OWL 2”, KI 2009 Paderborn [5] Martin O’Connor, “The Semantic Web Rule Language”, Stanford University

db05-정규화,관계데이터연산,관계대수.pdf

2014-07-03T23:37:35+09:00

db05-정규화,관계데이터연산,관계대수.pdf

db05-정규화,관계데이터연산,관계대수.pdf

1. 1. 관계형 데이터베이스 모델링. [DB 5강-정규화, 관계데이터연산, 관계대수]. 요구사항분석표. 요구사항 수집과 분석. 현실 세계. 개념적 데이터베이스 모델링.

4장-관계대수와SQL.ppt

2014-07-03T23:34:29+09:00

4장-관계대수와SQL.ppt

princediary.tistory.com/attachment/493c76ace3293EO.ppt
공유한 소식 보기

4.1 관계 대수. 조인 연산자. 두 개의 릴레이션으로부터 연관된 튜플들을 결합하는 연산자; 관계 데이터베이스에서 두 개 이상의 릴레이션들의 관계를 다루는데 매우 ...

빅데이터·인메모리신기술-DBMS 시장재편할까-- 데이터넷.PDF

2014-07-03T23:28:50+09:00

빅데이터·인메모리신기술-DBMS 시장재편할까-- 데이터넷.PDF

빅데이터·인메모리신기술-DBMS 시장재편할까-- 데이터넷.PDF

데이터베이스관리(DBMS) 시장에서 오라클의 영향력은 절대적이다. 또한 오라클은 시장 ... 다양한DB 기술이등장하면서DB 시장도다각화되고있다. 인메모리기.