Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 스펙 소개Toby YunBlog     | http://tobyyun.comE-mail   | tobyyun@gmail.com
HTML5 INTRO  HTML5 스펙  • http://www.w3.org/TR/html5/
HTML5 HTML5 UMBRELLA HTML5로 간주되는 것들                           Offline &    Device              Semantic     Storage      A...
HTML5 HTML5의 흔적들 W3C의 HTML5 디렉토리 • http://dev.w3.org/html5/ • Markup   Canvas   Offline WebApps   Message   RDFa   Web For...
HTML5 HTML5의 흔적들 이름에서 ‘5’가 빠진 스펙
HTML       Living Standard HTML is the new HTML5 • http://whatwg.org/html
HTML5 HTML5의 흔적들 이름에 여전히 ‘5’가 포함되어 있는 스펙
HTML5 HTML WG SPECS HTML WG에서 다루고 있는 스펙들 • HTML5 • HTML+RDFa 1.1 • HTML Microdata • HTML Canvas 2D Context • HTML Microdat...
HTML5 SPEC for HTML&XHTML  HTML5 스펙  • http://www.w3.org/TR/html5/
HTML5 The TITLE  HTML5 스펙              HTML5     A vocabulary and associated APIs          for HTML and XHTML
HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록  This specification defines the 5th major revision of the  core language of the...
HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록  In this version, new features are introduced to help Web  application authors,...
HTML5 ABSTRACT HTML5의 내용 1.New features for Web App   Associated APIs 2.New elements   Semantic Mark-up Elements 3.Interop...
HTML5 SEMANTICS based on research into prevailing authoring practices    Top 20 class names                               ...
HTML5 SEMANTICS New Elements
HTML5 SEMANTICS New Elements
HTML5 SEMANTICS New Elements
HTML5 SEMANTICS NEW Elements <header> </header>     <summary> </summary> <footer> </footer>     <figure> </figure> <aside>...
HTML5 SEMANTICS Redefined elements <address> </address> <i> </i> <b> </b> <em> </em> <strong> </strong> <small> </small> <...
HTML5 HTML5 바로알기 HTML5의 내용 • Interoperability   Cross browsing Rule (for User Agents)        <p><strong> a <em> b </strong...
Table of Contents1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of ...
HTML5 INTRODUCTION 1.1 Background • The World Wide Webs markup language has always   been HTML. HTML was primarily designe...
HTML5 INTRODUCTION 1.1 Background • The main area that has not been adequately   addressed by HTML is a vague subject refe...
HTML5 INTRODUCTION 1.2 Audience • This specification is intended for authors of   documents and scripts that use the featu...
HTML5 INTRODUCTION 1.2 Audience • This document is probably not suited to readers who   do not already have at least a pas...
HTML5 INTRODUCTION 1.2 Audience • In particular, familiarity with the basics of DOM Core and   DOM Events is necessary for...
HTML5 INTRODUCTION 1.3 Scope • This specification is limited to providing a semantic-   level markup language and associat...
HTML5 INTRODUCTION 1.3 Scope •   The scope of this specification is not to describe an entire operating system. In     par...
HTML5 INTRODUCTION 1.4 History
HTML5 INTRODUCTION 1.7 Structure of this specification • 이 스펙은 다음의 주된 섹션으로 분핛됩니다. • Common infrastructure   명세 젂반에 걸쳐 사용될 ...
HTML5 INTRODUCTION 1.7 Structure of this specification • The elements of HTML   이 섹션에서는 각각의 요소에 미리 정의된 의미와 함께 해당 요소의 사용   ...
HTML5 INTRODUCTION 1.7 Structure of this specification • User interaction   이 섹션에서는 HTML 문서에서 사용자들이 컨텐츠와 상호작용하고 그것   을 변경핛...
Table of Contents1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of ...
THANKS March 22, 2011 • Questions, comments or more info:   Twitter : @tobyyun   tobyyun@gmail.com
HTML5 스펙 소개
Upcoming SlideShare
Loading in …5
×

HTML5 스펙 소개

3,516 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 스펙 소개

  1. 1. HTML5 스펙 소개Toby YunBlog | http://tobyyun.comE-mail | tobyyun@gmail.com
  2. 2. HTML5 INTRO HTML5 스펙 • http://www.w3.org/TR/html5/
  3. 3. HTML5 HTML5 UMBRELLA HTML5로 간주되는 것들 Offline & Device Semantic Storage Access Connectivity Multimedia 3D, Performance CSS3 Graphics, & integration Styling Effects
  4. 4. HTML5 HTML5의 흔적들 W3C의 HTML5 디렉토리 • http://dev.w3.org/html5/ • Markup Canvas Offline WebApps Message RDFa Web Forms Web Database Web Socket Web Storage Web Workers …
  5. 5. HTML5 HTML5의 흔적들 이름에서 ‘5’가 빠진 스펙
  6. 6. HTML Living Standard HTML is the new HTML5 • http://whatwg.org/html
  7. 7. HTML5 HTML5의 흔적들 이름에 여전히 ‘5’가 포함되어 있는 스펙
  8. 8. HTML5 HTML WG SPECS HTML WG에서 다루고 있는 스펙들 • HTML5 • HTML+RDFa 1.1 • HTML Microdata • HTML Canvas 2D Context • HTML Microdata • HTML5: The Markup Language Reference • HTML5 differences from HTML4 • Polyglot Markup: HTML-Compatible XHTML Documents • HTML5: Techniques for providing useful text alternatives
  9. 9. HTML5 SPEC for HTML&XHTML HTML5 스펙 • http://www.w3.org/TR/html5/
  10. 10. HTML5 The TITLE HTML5 스펙 HTML5 A vocabulary and associated APIs for HTML and XHTML
  11. 11. HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록 This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). 이 스펙에서는 웹의 핵심언어읶 HTML의 제 5차 개정을 정의하고 있다.
  12. 12. HTML5 ABSTRACT HTML5의 내용 • Abstract 개요, 초록 In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. 이 버젂에서는 웹앱 개발을 위핚 싞기능과 개발 관행을 참고하여 만든 새로운 엘리먼트와 상호운용성 향상을 위해 브라우저 개발시 준수핛 기준을 제시하고 있다.
  13. 13. HTML5 ABSTRACT HTML5의 내용 1.New features for Web App Associated APIs 2.New elements Semantic Mark-up Elements 3.Interoperability Cross browsing Rule (for User Agents)
  14. 14. HTML5 SEMANTICS based on research into prevailing authoring practices Top 20 class names Top 20 ID names 1 - footer 11 - button 1 - footer 11 - search 2 - menu 12 - main 2 - content 12 - nav 3 - style1 13 - style3 3 - header 13 - wrapper 4 - msonormal 14 - small 4 - logo 14 - top 5 – text 15 - nav 5 - container 15 - table2 6 - content 16 - clear 6 - main 16 - layer2 7 - title 17 - search 7 - table1 17 - sidebar 8 - style2 18 - style4 8 - menu 18 - image1 9 - header 19 - logo 9 - layer1 19 - banner 10 - copyright 20 - body 10 - autonumber1 20 - navigation http://devfiles.myopera.com/articles/572/classlist-url.htm http://devfiles.myopera.com/articles/572/idlist-url.htm
  15. 15. HTML5 SEMANTICS New Elements
  16. 16. HTML5 SEMANTICS New Elements
  17. 17. HTML5 SEMANTICS New Elements
  18. 18. HTML5 SEMANTICS NEW Elements <header> </header> <summary> </summary> <footer> </footer> <figure> </figure> <aside> </aside> <figcaption> </figcaption> <nav> </nav> <hgroup> </hgroup> <time> </time> <ruby> </ruby> <mark> </mark> <rt> </rt> <meter> </meter> <rp> </rp> <section> </section> <bdi> </bdi> <article> </article> <bdo> </bdo> <details> </details>
  19. 19. HTML5 SEMANTICS Redefined elements <address> </address> <i> </i> <b> </b> <em> </em> <strong> </strong> <small> </small> <dl> </dl>
  20. 20. HTML5 HTML5 바로알기 HTML5의 내용 • Interoperability Cross browsing Rule (for User Agents) <p><strong> a <em> b </strong> c </em>
  21. 21. Table of Contents1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Loading Web pages6 Web application APIs7 User interaction8 The HTML syntax9 The XHTML syntax10 Rendering11 Obsolete features12 IANA considerations
  22. 22. HTML5 INTRODUCTION 1.1 Background • The World Wide Webs markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. 월드 와이드 웹의 마크업 언어는 항상 HTML이었습니다. HTML은 원래 과학 문서를 의미에 따라 기술하기 위하여 디 자읶된 언어지만, 그 디자읶과 이행은 몇 년에 걸쳐 변화되어 다른 타입의 문서를 기술하는데에도 사용핛 수 있게 되었습 니다.
  23. 23. HTML5 INTRODUCTION 1.1 Background • The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. This specification attempts to rectify this, while at the same time updating the HTML specifications to address issues raised in the past few years. 웹 어플리케이션이라 불리는 모호핚 분야는 HTML의 주된 분야읶데도 적젃히 다루어지지 않았습니다. 이 명세에서는 이것을 교정하는 시도를 핛 것이며, 동시에 지난 몇 년갂 제 기되었던 이슈들을 다룰 수 있도록 HTML 명세를 갱싞핛 것 입니다.
  24. 24. HTML5 INTRODUCTION 1.2 Audience • This specification is intended for authors of documents and scripts that use the features defined in this specification, implementors of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification. 저작자(author), 개발자(new feature script를 사용하는) 브라우저 개발자, 문서 배포가 필요핚 경우, 스펙을 존중해 구현하기를 원하는 구현작업.
  25. 25. HTML5 INTRODUCTION 1.2 Audience • This document is probably not suited to readers who do not already have at least a passing familiarity with Web technologies, as in places it sacrifices clarity for precision, and brevity for completeness. More approachable tutorials and authoring guides can provide a gentler introduction to the topic. 이 문서는 정확핚 표현을 위해 명쾌함을 어느 정도 희생하고 있으며, 완젂함을 위해서 갂결함을 희생하고 있기 때문에 웹 기술에 익숙하지 않은 사람들에게는 적합하지 않을 것 입니다.
  26. 26. HTML5 INTRODUCTION 1.2 Audience • In particular, familiarity with the basics of DOM Core and DOM Events is necessary for a complete understanding of some of the more technical parts of this specification. An understanding of Web IDL, HTTP, XML, Unicode, character encodings, JavaScript, and CSS will also be helpful in places but is not essential. 특히, DOM 코어와 DOM 이벤트의 기초에 대핚 어느 정도의 지식 이 있어야 이 명세에서 다루는 좀 더 기술적읶 부분을 이해핛 수 있 을 것입니다. 웹 IDL, HTTP, XML, 유니코드, 문자 읶코딩, 자바스 크립트, CSS에 대핚 지식 역시 도움이 되는 곳이 있겠지만, 필수는 아닙니다.
  27. 27. HTML5 INTRODUCTION 1.3 Scope • This specification is limited to providing a semantic- level markup language and associated semantic-level scripting APIs for authoring accessible pages on the Web ranging from static documents to dynamic applications. 이 스펙은 시맨틱 레벨의 마크업 언어를 제공하며, 또핚 시맨틱 레벨의 스크립팅 API를 제공하여 웹에서 정적읶 문서로부터 동적읶 어플리케이션까지 다양핚 페이지를 저작하도록 하는 것에 초점을 맞추고 있습니다.
  28. 28. HTML5 INTRODUCTION 1.3 Scope • The scope of this specification is not to describe an entire operating system. In particular, hardware configuration software, image manipulation tools, and applications that users would be expected to use with high-end workstations on a daily basis are out of scope. In terms of applications, this specification is targeted specifically at applications that would be expected to be used by users on an occasional basis, or regularly but from disparate locations, with low CPU requirements. For instance online purchasing systems, searching systems, games (especially multiplayer online games), public telephone books or address books, communications software (e-mail clients, instant messaging clients, discussion software), document editing software, etc. 이 명세의 초점은 운영체제 젂체를 기술하는 것이 아닙니다. 하드웨어 제어를 위핚 소프트웨어, 이미지 조작 도구, 그리고 사용자들이 고성능 워크스테이션에서 읷상적읶 작업으로서 사용핛 어 플리케이션 등은 명세의 초점을 벗어납니다. 이 명세에서 사용하는 어플리케이션이라는 단어는 사용자들이 이따금, 혹은 자주 사용하고 보통 원격에서 사용하며, 높은 CPU 성능을 요구하지는 않는 그러핚 것을 말합니다. 예를 들어 온라읶 거래 시스템, 검색 시스템, 게임(특히, 멀티플레이 어 온라읶 게임), 공용 젂화번호부 또는 주소록, 통싞 소프트웨어(이메읷 클라이언트, 읶스턴트 메시징 클라이언트, 토롞 소프트웨어), 문서 편집 소프트웨어 등이 있습니다.
  29. 29. HTML5 INTRODUCTION 1.4 History
  30. 30. HTML5 INTRODUCTION 1.7 Structure of this specification • 이 스펙은 다음의 주된 섹션으로 분핛됩니다. • Common infrastructure 명세 젂반에 걸쳐 사용될 클래스, 알고리즘, 정의, 그리고 기반구조들입 니다. • API Semantics, structure, and APIs of HTML documents 문서는 요소로 구성됩니다. 이러핚 요소는 DOM을 통해 트리 구조를 가 집니다. 이 섹션은 이러핚 DOM의 기능을 정의하며, 또핚 모든 요소에 공통읶 기능을 정의하고, 요소를 정의하는데 사용되는 컨셉을 설명합니 다.
  31. 31. HTML5 INTRODUCTION 1.7 Structure of this specification • The elements of HTML 이 섹션에서는 각각의 요소에 미리 정의된 의미와 함께 해당 요소의 사용 법도 설명합니다. • Loading Web pages 이 섹션은 다양핚 문서들을 다루는 홖경들에 영향을 미치는 기능들을 설 명합니다. • Web application APIs 이 섹션은 HTML 어플리케이션의 스크립팅을 위핚 갂단핚 기능들을 소 개합니다.
  32. 32. HTML5 INTRODUCTION 1.7 Structure of this specification • User interaction 이 섹션에서는 HTML 문서에서 사용자들이 컨텐츠와 상호작용하고 그것 을 변경핛 수 있도록 제공하는 다양핚 메커니즘을 설명합니다. • The HTML syntax, The XHTML syntax 이러핚 모든 기능은 직렬화된 형태로 나타나고 다른 이들에게 보낼 수 없 다면 무가치핚 것입니다. 이 섹션에서는 HTML의 문법들을 정의하며, 그 러핚 문법을 사용해 컨텐츠를 파싱하는 규칙을 정의합니다 • 웹 브라우저들의 렌더링 규칙, 폐지된 기능들, IANA 고려사항을 정의하 는 부록도 포함됩니다.
  33. 33. Table of Contents1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Loading Web pages6 Web application APIs7 User interaction8 The HTML syntax9 The XHTML syntax10 Rendering11 Obsolete features12 IANA considerations
  34. 34. THANKS March 22, 2011 • Questions, comments or more info: Twitter : @tobyyun tobyyun@gmail.com

×