Your SlideShare is downloading. ×
0
HTML5 Markup의 현재, 주요 스펙Toby YunBlog     | http://tobyyun.comE-mail   | tobyyun@gmail.com
Index   •    HTML5의 역사와 지향점   •    HTML5 Spec과 Markup   •    HTML5 Markup의 설계 원칙   •    Markup SG에서 주요하게 살펴보아야 할 스펙들
HTML5의 역사와 지향점     Web Hypertext Application Technology Working Group
HTML5의 역사와 지향점  • HTML5는 다양한 내용을 포괄하는 의미  • 각 기능별 Spec이 나뉘어져 있음                              Offline &    Device          ...
HTML5 Spec과 Markup  • Markup 요소와 API를 다루는 HTML5 메인 스펙         http://www.w3.org/TR/html5/
HTML5 Spec과 Markup               HTML5     A vocabulary and associated APIs          for HTML and XHTML
HTML5 Spec과 Markup  • Spec 초록(Abstract)에서 밝히고 있는 HTML5의 지향점    1.New features for Web App    2.New elements      Semantic ...
HTML5 Markup의 설계 원칙  • HTML Design Principles    • Support existing content      기존의 컨텐츠를 지원하라    • Degrade gracefully    ...
HTML5 Markup의 설계 원칙  •   변경해도 기존과 같은 방식의 렌더링  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org...
HTML5 Markup의 설계 원칙  •   구 버전의 IE에서 HTML5 Markup을 사용해도 문제 없음  document.createElement(‘section’);  • Remy Sharp의 HTML5 Shiv...
HTML5 Markup의 설계 원칙  • Semantic Markup    •   Semantics for machine readability    •   Accessible for all users    •   Dev...
Markup SG에서 주요하게 살펴보아야 할 스펙들  • HTML5            http://www.w3.org/TR/html5/
Markup SG에서 주요하게 살펴보아야 할 스펙들                    5/19 Web application APIs 분석 발표자료 :                    http://www.slidesha...
Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML  4.1 The root element  html  4.2 Document metadata  head, title, base, ...
Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML  4.7 Edits  ins, del  4.8 Embedded content  img, iframe, embed, object,...
Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML  4.12 Links  a, area, Link types  4.13 Common idioms without dedicated ...
Markup SG에서 주요하게 살펴보아야 할 스펙들  • HTML5 Edition for Web Authors          http://www.w3.org/TR/html5/author/
Markup SG에서 주요하게 살펴보아야 할 스펙들  • HTML+RDFa 1.1       http://www.w3.org/TR/rdfa-in-html/
Markup SG에서 주요하게 살펴보아야 할 스펙들  • HTML Microdata        http://dev.w3.org/html5/md/
Markup SG에서 주요하게 살펴보아야 할 스펙들  • WAI-ARIA 1.0       http://www.w3.org/TR/wai-aria/
Thanks   July 11, 2011   Questions, comments or more info:   Twitter : @tobyyun   tobyyun@gmail.com
Upcoming SlideShare
Loading in...5
×

HTML5 KIG 7th Markup SG

1,486

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,486
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 KIG 7th Markup SG"

  1. 1. HTML5 Markup의 현재, 주요 스펙Toby YunBlog | http://tobyyun.comE-mail | tobyyun@gmail.com
  2. 2. Index • HTML5의 역사와 지향점 • HTML5 Spec과 Markup • HTML5 Markup의 설계 원칙 • Markup SG에서 주요하게 살펴보아야 할 스펙들
  3. 3. HTML5의 역사와 지향점 Web Hypertext Application Technology Working Group
  4. 4. HTML5의 역사와 지향점 • HTML5는 다양한 내용을 포괄하는 의미 • 각 기능별 Spec이 나뉘어져 있음 Offline & Device Semantic Storage Access Connectivity Multimedia 3D, Performance CSS3 Graphics, & integration Styling Effects
  5. 5. HTML5 Spec과 Markup • Markup 요소와 API를 다루는 HTML5 메인 스펙 http://www.w3.org/TR/html5/
  6. 6. HTML5 Spec과 Markup HTML5 A vocabulary and associated APIs for HTML and XHTML
  7. 7. HTML5 Spec과 Markup • Spec 초록(Abstract)에서 밝히고 있는 HTML5의 지향점 1.New features for Web App 2.New elements Semantic Mark-up Elements 3.Interoperability Cross browsing Rule (for User Agents)
  8. 8. HTML5 Markup의 설계 원칙 • HTML Design Principles • Support existing content 기존의 컨텐츠를 지원하라 • Degrade gracefully 우아한 낮춤 전략 • Dont reinvent the wheel 바퀴를 다시 만들지 말라 • Pave the cowpaths 비포장 길은 포장하라 • Evolution, not revolution 혁명이 아닌 진화
  9. 9. HTML5 Markup의 설계 원칙 • 변경해도 기존과 같은 방식의 렌더링 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML> • 브라우저는 모르는 코드를 무시함 <figure> <img src="bubbles-work.jpeg‚ alt="Bubbles works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure>
  10. 10. HTML5 Markup의 설계 원칙 • 구 버전의 IE에서 HTML5 Markup을 사용해도 문제 없음 document.createElement(‘section’); • Remy Sharp의 HTML5 Shiv <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
  11. 11. HTML5 Markup의 설계 원칙 • Semantic Markup • Semantics for machine readability • Accessible for all users • Development efficiencies • Syndication • SEO and findability • User experience enhancements
  12. 12. Markup SG에서 주요하게 살펴보아야 할 스펙들 • HTML5 http://www.w3.org/TR/html5/
  13. 13. Markup SG에서 주요하게 살펴보아야 할 스펙들 5/19 Web application APIs 분석 발표자료 : http://www.slideshare.net/ssuser36e7f43/we b-application-apis
  14. 14. Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML 4.1 The root element html 4.2 Document metadata head, title, base, link, meta, style 4.3 Scripting script, noscript 4.4 Sections body, section, nav, article, aside, hgroup, h1~h6, header, footer, address 4.5 Grouping content p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div 4.6 Text-level semantics a, em, strong, small, s, cite, q, abbr, time, code, var, sub, sup
  15. 15. Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML 4.7 Edits ins, del 4.8 Embedded content img, iframe, embed, object, param, video, audio, source, track, Media, canvas, SVG 4.9 Tabular data table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th 4.10 Forms form, fieldset, legend, label, input, button, select, datalist, optgroup, option, textarea, progress, meter 4.11 Interactive elements details, summary, command, menu
  16. 16. Markup SG에서 주요하게 살펴보아야 할 스펙들4 The elements of HTML 4.12 Links a, area, Link types 4.13 Common idioms without dedicated elements 4.14 Matching HTML elements using selectors
  17. 17. Markup SG에서 주요하게 살펴보아야 할 스펙들 • HTML5 Edition for Web Authors http://www.w3.org/TR/html5/author/
  18. 18. Markup SG에서 주요하게 살펴보아야 할 스펙들 • HTML+RDFa 1.1 http://www.w3.org/TR/rdfa-in-html/
  19. 19. Markup SG에서 주요하게 살펴보아야 할 스펙들 • HTML Microdata http://dev.w3.org/html5/md/
  20. 20. Markup SG에서 주요하게 살펴보아야 할 스펙들 • WAI-ARIA 1.0 http://www.w3.org/TR/wai-aria/
  21. 21. Thanks July 11, 2011 Questions, comments or more info: Twitter : @tobyyun tobyyun@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×