표준화문서를기반으로하는지침서 속이깊은 HTML5 & CSS3 김명진지음 01 강 HTML5 알아보기
학습목표 HTML4.01 이발표된이후에무려 10 여년만에새로운 HTML5 버전이표준화로돌아왔다. 이번장에서는 HTML5 의특징에대하여간략히살펴보도록한다. Section 1 HTML5 API 및관련기술들 2 HTML5의주요특징 3 HTML5 미리보기 4 HTML5 표준화일정 5 HTML5를사용해야하는이유 6 HTML5 콘텐츠모델 7 HTML5 문서의기본구조 8 HTML5의요소확장 9 HTML5에서중단된요소및속성
01 HTML5 API 및관련기술들 HTML5 에서추가된 API 2차원그래픽을위한 Canvas 요소의 API 미디어의재생을위한 API 오프라인 (Offline) 웹애플리케이션을위한 API 드래그-앤-드롭 (Drag-and-drop) 을위한 API 웹스토리지 (Web Storage) 를위한 API 인덱스데이터베이스를위한 API 위치정보 (Geo-Location) 를위한 API 파일업로드와관리기능을위한 API 양방향통신을위한웹소켓 (WebSocket) 을위한 API 3
01 HTML5 API 및관련기술들 출처 : 위키피디아 HTML5 관련기술들 4
01 HTML5 API 및관련기술들 HTML5 관련기술들 HTML5 Semantics Offline & Storage Device Access 3D, Graphics, Effects Multimedia Connectivity Performance & Integration CSS3 Styling 5 http://www.w3.org/html/logo/
02 HTML5 의주요특징 웹애플리케이션개발을위한플랫폼 기능 설명 1/2 캔버스 (Canvas) 웹에서 2 차원그래픽을그리기위한 API 를지원하여선, 도형, 텍스트, 이미지와같은그래픽을표현할수있고색상, 그림자, 패턴과같은효과도적용이가능 캔버스내각종객체를회전, 변환, 그라데이션및이미지생성등의각종효과 HTML5 의기능중에서가장많이활용되고있는기능 SVG (Scalable Vector Graphic) 위치정보 (Geolocation) XML 기반의 2 차원벡터그래픽을표현하기위한언어 중첩된변형, 클리핑경로, 알파마스크, 래스터필터효과, 애니메이션, 줌및플래닝뷰, 다양한그래픽명령어, 그룹핑, 스크립팅등을지원 디바이스의지리적위치정보를제공하는 API 구글의 Geolocation API 라는표준으로정의되어있으며모바일환경지원 오프라인웹응용 (Offline Web Application) 인터넷연결이지원되지않는경우에도웹응용프로그램이정상적으로수행 HTML, JavaScript, CSS 등의문서파일들과각종이미지파일들을브라우저의임시영역에캐시 (Cache) 로저장 브라우저가새로고침 (Refresh) 하더라도웹응용프로그램을로딩하도록지원 현재각도메인당 5M 의캐시크기가설정되어있음 6
02 HTML5 의주요특징 웹애플리케이션개발을위한플랫폼 기능 설명 2/2 웹데이터베이스 (Web Database) 웹브라우저에데이터베이스엔진을이용하여자바스크립트로사용하는기술 인덱스데이터베이스기술 (W3C 표준 ) 이존재 웹 SQL 데이터베이스는 SQL 과의특허문제로표준명세서에서하차 (deprecated) 로컬저장소 (Local Storage) 웹소켓 (Web Socket) 기존의쿠키 (Cookie) 의단점을극복하기위한목적으로개발된기능 웹클라이언트에서키와값이쌍으로구성된데이터가영구적으로저장 웹브라우저창을닫아도다른모든웹브라우저간에데이터가공유 웹응용프로그램이서버측의프로세스와직접적인양방향통신을위한 API 비접속지향 (Connectless) 인 HTML 을이용한웹응용프로그램의개발의제약을극복하기위해서도입한기술 서버와웹브라우저가지속적으로연결된 TCP 라인을통한실시간데이터통신 웹워커 (Web Worker) 웹응용을위한쓰레드 (Thread) 기능에대한 API 싱글 - 쓰레드로동작하는자바스크립트의코드개발에대한제약을극복하기위한방법으로멀티 - 쓰레드의개념을도입한기술 7
02 HTML5 의주요특징 시맨틱웹 (Semantic Web) 데이터의의미를분명히하고그의미를웹브라우저에서활용할수있도록하자는목적으로만들어짐 웹표준화 (Web Standards) 지금까지웹사이트를제작할때웹표준이없었기때문에, 여러기술들을 ( 플로그인기술또는확장라이브러리 ) 사용 웹을구현하는데있어표준으로사용되는지침과기술방식이바로웹표준!! 국제표준 (Global Standard) 에따라웹을개발해야하며, 웹표준은반드시지켜져야한다. 8
03 HTML5 미리보기 웹브라우저지원현황 (http://html5test.com) 태블릿 모바일 9
03 HTML5 미리보기 웹브라우저지원현황 ( 기능별 ) 1/5 10
03 HTML5 미리보기 웹브라우저지원현황 ( 기능별 ) 2/5 11
03 HTML5 미리보기 웹브라우저지원현황 ( 기능별 ) 3/5 12
03 HTML5 미리보기 웹브라우저지원현황 ( 기능별 ) 4/5 13
03 HTML5 미리보기 웹브라우저지원현황 ( 기능별 ) 5/5 14
03 HTML5 미리보기 HTML5 느껴보기 HTML5 Demos and Examples - http://html5demos.com HTML5 Rocks - http: http://www.html5rocks.com HTML5 Gallery - http://html5gallery.com/ Apple HTML5 Showcase - http://www.apple.com/html5/showcase/gallery/ 15
04 HTML5 표준화일정 표준화일정 (HTML 5.0) 일정내용 2004년 06월 WHATWG 활동시작 2007년 05월 HTML5와 Web Forms 2.0 규격채택 리뷰기반으로 2007년 11월 HTML5 디자인원칙작업초안 2010년 01월 HTML5 Last Call Working Draft 초안 2012년 4분기 CR(Candidate Recommendation) 2014년 3분기 LC(Last Call Working Draft) 2014년 4분기 PR(Proposed Recommendation) 2014년 12월 Rec(Recommendation) 표준화일정 (HTML 5.1) 일정내용 2012년 4분기 FPWD(First publication Working Draft) 2014년 3분기 LC(Last Call Working Draft) 2015 년 1 분기 CR(Candidate Recommendation) 2016 년 4 분기 Rec(Recommendation) 16
05 HTML5 를사용해야하는이유 주요벤더들의지원 구글, 애플, MS, 오페라, 모질라등의적극적인지원 애플 비표준 ( 플래시같은 ) 기술들을웹표준기술들이대체할수있다고언급 구글 HTML5 로의방향전환 (2009 년부터매년 I/O 컨퍼런스개최 ) 인력및시간의중복투자절약 각종디바이스에맞는웹사이트제작 www.service.com / m.service.com / t.service.com 각종디바이스에맞는네이티브앱제작 안드로이드앱 / 애플앱 / 기타 17
05 HTML5 를사용해야하는이유 모바일앱개발자들의움직임시작 18 출처 : 비전모바일 (Vision Mobile)
05 HTML5 를사용해야하는이유 세계시장전망 가트너 2020 년이면사용중인스마트폰, 태블릿, PC 의대수는 73 억대에이를것으로예상되지만, IOT 는대략 260 억대에이르게될것 - 책임연구원 IOT 는상태감지, 내외부환경과의통신과상호작용을위해임베디드기술을탑재한물리적사물들의네트워크를의미한다. 세계최대전자제품박람회 (CES2014) 2014년주도할차세대개념으로사물인터넷이화두에오름 아우디 스마트디스플레이 (10.2인치태블릿 PC) 현대자동차 블루링크 + 구글글래스활용 BMW 삼성 ( 갤럭시기어 ) + 각종제어기술활용 구글, 시스코, 인텔, 퀄컴, 엔비디아등 IOT 준비 19
05 HTML5 를사용해야하는이유 국내시장전망 LG 전자 홈챗 (Home Chat) 20
05 HTML5 를사용해야하는이유 국내시장전망 삼성전자 스마트홈 (Smart Home) 21
06 HTML5 콘텐츠모델 HTML5 콘텐츠유형별분류 1/2 분류 Metadata Content 내용 문서의정보를포함하여현재문서와다른문서의관계를설정하거나나머지내용의표현이나행동을설정또는분류되지않은정보들을포함 base, link, meta, noscript, script, style, template, title Body 요소내에서사용되는대부분의요소들이포함되지만, 일부는조건부로포함 Flow Content a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, butt on, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, em bed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, ifram e, img, input, ins, kbd, keygen, label, link, main, map, mark, math, menu, m eta, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, sam p, script, section, select, small, span, strong, style, sub, sup, svg, table, templ ate, textarea, time, u, ul, var, video, wbr, Text Sectioning Content Heading Content Header 요소와 Footer 요소의범위내에서콘텐츠를그룹화하여구조 article, aside, nav, section Section 요소의헤더 ( 제목 ) 를정의 h1, h2, h3, h4, h5, h6 22
06 HTML5 콘텐츠모델 HTML5 콘텐츠유형별분류 분류 Phrasing Content Embedded Content Interactive Content Palpable Content 내용 2/2 문서의텍스트를정의할때사용하며단락안에있는텍스트의범위를나타내는요소가속한다. 그러나 P 요소와같이단락그자체를나타내거나 Div, Section 요소와같이여러개의단락을묶을수있는요소는속하지않는다. a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, link, ma p, mark, math, meta, meter, noscript, object, output, progress, q, ruby, s, sa mp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, Text 문서안에외부리소스로삽입되는콘텐츠또는다른언어로표시된콘텐츠들이포함된다. audio, canvas, embed, iframe, img, math, object, svg, video 사용자가어떤조작을할수있는콘텐츠들이포함된다. a, audio, button, details, embed, iframe, img, input, keygen, label, object, s elect, textarea, video, 새롭게추가된개념으로써, 구체적으로보여지고이해할수있는콘텐츠들이포함된다. 최소한하나이상의요소가존재해야하고해당요소는숨김상태여도안된다. a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, button, canva s, cite, code, data, details, dfn, div, dl, em, embed, fieldset, figure, footer, fo rm, h1, h2, h3, h4, h5, h6, header, i, iframe, img, input, ins, kbd, keygen, la bel, main, map, mark, math, menu, meter, nav, object, ol, output, p, pre, pr ogress, q, ruby, s, samp, section, select, small, span, strong, sub, sup, svg, ta ble, textarea, time, u, ul, var, video 23
06 HTML5 콘텐츠모델 HTML5 콘텐츠유형별분류 조건부로 Flow Content 가되는요소 area - map 요소의자손일때 link, meta - itemprop 속성이지정되었을때 style - scoped 속성이지정되었을때 조건부로 Phrasing Content 가되는요소 area - map 요소의자손일때 link, meta - itemprop 속성이지정되었을때 조건부로 Interactive Content 가되는요소 audio, video controls 속성이지정되었을때 img, object usemap 속성이지정되었을때 input type 속성이 hidden 이아닐때 tabindex 속성 - 모든요소를 Interactive Content로만든다. 24
06 HTML5 콘텐츠모델 HTML5 콘텐츠유형별분류 조건부로 Palpable Content 가되는요소 audio controls 속성이지정되었을때 dl 자식요소로하나이상의이름과값으로구성되어있을때 input type 속성이 hidden 이아닐때 menu toolbar 속성이지정되었을때 ol 자식요소로하나이상의 li 요소를포함하고있을때 ul 자식요소로하나이상의 li 요소를포함하고있을때 25
07 HTML5 문서의기본구조 HTML 문서의구성요소 26
07 HTML5 문서의기본구조 문서의불필요한속성생략 문서의유형변화 문자의인코딩변화 Link 의 Type 생략 Script 의 Type 생략 27
07 HTML5 문서의기본구조 HTML5 문서의협업관계 28
08 HTML5 의요소확장 레이아웃을위한시맨틱요소들 요소 header 머리말 ( 제목 ) 을나타낸다. 설명 footer 제작자의정보나저작권의정보를나타낸다. hgroup 제목과부제목을묶어주는역할을한다. nav 메뉴부분을나타낸다. section 문서영역을구성할때사용되고 H1~H6과함께사용하며제목별로나눌수있다. article 개별콘텐츠 ( 뉴스기사또는블로그의내용글과같은 ) 를나타낸다. aside 주요콘텐츠이외의참고가될수있는좌우측의콘텐츠를나타낸다. 그룹핑콘텐츠요소들 요소설명 main Body 영역의주요콘텐츠블록을그룹화할때사용한다. figure 그림이나비디오같은멀티미디어요소를나타낸다. figcaption Figure 요소에대한제목 ( 개략적인설명 ) 을나타낸다. ol (reversed 속성 ) Li 요소들의순서를바꾸도록 ( 앞의순번이뒤의순번으로 ) 한다. 29
08 HTML5 의요소확장 텍스트레벨의시맨틱요소들 요소설명 a (download 속성 ) href 속성에지정된파일을다운로드할수있도록한다. a (ping 속성 ) 링크를클릭했을때, 링크의정보를자동으로송신할수있도록한다. strong 아주중요하거나심각하거나긴급을요하는내용을표시하도록한다. time 날짜와시간표현에의미를주고자할때사용하며날짜와시간을나타낸다. mark 특정텍스트의강조효과를 ( 형광펜으로칠한것과같은 ) 나타낸다. ruby, rt, rp, rb, rtc Ruby 언어를표시할때사용한다. bdi 텍스트의방향을격리하여나타나도록한다. wbr 줄바꿈지점을나타낸다. 상호작용요소들 요소설명 details 사용자요청에따라얻은콘트롤이나추가적인정보를나타낸다. summary Details요소의하위요소로써머리글을나타낸다. menu 명령들의목록을정의하고명령들의단축메뉴같은것들을목록화한다 command 사용자가호출할수있는명령어를나타낸다. dialog 대화를의미있는콘텐츠로만들고자할때사용하며대화상자또는창을나타낸다. 30
08 HTML5 의요소확장 캔버스 (Canvas) 요소 요소 canvas 설명 2 차원그래픽 ( 비트맵 ) 을그리기위한요소, 자바스크립트 API 이용 미디어 (Media) 요소 요소 설명 audio 오디오콘텐츠를정의하며, 별도의플러그인없이재생및제어가가능하다. video 비디오콘텐츠를정의하며, 별도의플러그인없이재생및제어가능하다. source 여러개의미디어요소를정의하며, video 와 audio 요소의하위요소로써미디어요소의리소스를정의한다. embed 플러그인과같은외부애플리케이션을정의한다. track 텍스트트랙을정의하며, <video> 와 <audio> 에서사용된다. 31
08 HTML5 의요소확장 폼 (Form) 요소 요소설명 datalist 자동완성기능으로, 목록속성과함께사용하여콤보상자 (ComboBox) 를만든다. keygen 키쌍 (Key Pair) 를생성할때사용하며암호키를생성해준다. output 스크립트의계산결과같은실행결과를나타낸다. meter 현재상태를나타낸다. progress 현재진행상황을나타낸다. form 요소의추가된속성 autocomplete, novalidate input 요소의추가된속성 autocomplete, novalidate, form, formaction, formenctype, formmethod, formnovalidate, formtarget, minlength, height, width, min, max, placeholder, required, list, multiple, step, pattern, dirname input 요소의추가된속성 month, week, date, datetime, datetime-local, time, color, email, number, range, search, tel, url 32
08 HTML5 의요소확장 새로추가된전역속성 요소 설명 contenteditable 이속성이지정된요소의콘텐츠를사용자가수정할수있도록한다. contextmenu 컨텍스트메뉴를지정할때사용한다. data-* 저작자가속성을추가 ( 어떤요소든임의의속성추가가능 ) 하고자할때사용한다. draggable, dropzone hidden 드래그 & 드롭 API 와함께사용하게된다. 이속성이지정된요소를없는상태 ( 브라우저에표시되지않음 ) 로만들때사용한다. inert 다이얼로그요소를만들기위해추가되었다 (WHATWG HTML) aria-* 웹문서의접근성이좋아질수있도록 HTML 확장기능을제공한다. role aria 특정요소가담당하는역할을기준으로몇가지속성값을정의한다. spellcheck 문법검사 ( 영어단어및영어문장만해당 ) 를사용할지를나타낸다. translate 콘텐츠가번역되어야하는지나타내기위해서사용한다. microdata tab-index 지정한요소가데이터로써어떤의미를가졌는지를나타내며 HTML 요소에삽입하여사용. 웹문서의요소들을사용자가키보드를이용하여어떤순서로이동할지를지정한다. 33
08 HTML5 의요소확장 변경된요소 요소 설명 address 가장가까운 article 이나 body 조상요소로범위가정해진다. b 강조의의미는사라지고주목해야할단어를표기하도록변경되었다. cite 단독으로작품을지칭할때사용된다. 사람에게는해당하지않는다. dl hr 이름 - 값그룹을나타내는데사용된다. 대화목록을기술하는데에는더이상적합하지않게된다. 문단수준의주제구분에사용된다 i 다른분위기나어조, 보통의서술과구분되어야하는텍스트를지칭할때사용한다. label 레이블을클릭했을때포커스를이동하는기능이플랫폼의표준인터페이스와다를경우브라우저가더이상포커스를이동시키지않는다. menu 툴바나컨텍스트메뉴를나타내는용도로변경되었다. noscript 더이상직전 script 요소와연관되지않는다. s 더이상정확하지않거나관련이없는내용을나타낸다. script 스트립트나커스텀데이터를넣기위한용도로사용된다. small 작게출력해야하는사이드코멘트를나타낸다. strong 강한강조보다는중요함을나타낸다. u 불충분한내용을나타내는데사용된다. 34
09 HTML5 에서중단된요소및속성 권장하지않는속성들 요소 img 요소의 border 속성 script 의 language 속성 a 의 name 속성 설명 속성값이 0일때만사용하도록하고가능하면 CSS를사용하도록권장 기존 <script type="text/javascript" language="javascript"> 부분에서 language 속성이 type 와겹치기때문에사용하지않기를권장 type 속성도기본값으로적용되기때문에생략하기도한다. name 속성대신에가능하면 id 속성으로사용하도록권장하고있다. 기존 HTML 에서중단된요소들 CSS 로처리할수있는요소들 ( 단순히보여지는데사용되는요소들 ) basefont, big, blink, center, font, marquee, multicol, nobr, spacer, s, strike, tt, u, 등 프레임과관련된요소들 ( 사용성과접근성에부정적인영향을주는요소들 ) frame, frameset, noframes iframe 과 CSS 로대체 35
09 HTML5 에서중단된요소및속성 권장하지않는속성들 다른요소로대체할수있는요소들 ( 거의사용되지않음 ) applet embed 및 object 요소로대체 acronym abbr 요소로대체 bgsound audio 요소로대체 dir ul 요소로대체 isindex form 요소로대체 listing pre 및 code 요소로대체 nextid GUIDs 로대체 noembed object 요소로대체 plaintext text/plain MIME type 대체 strike 요소가편집을표시하는경우 del 요소로대체, 그렇지않으면 s 요소로대체 xmp pre 및 code 요소로대체, < 기호는 < 로대체, & 기호는 & 기호로대체 36
다음학습 1 레이아웃을위한시맨틱요소들 2 그룹핑콘텐츠요소들 3 텍스트레벨의시맨틱요소들 4 상호작용요소들 5 변경된요소들