SlideShare a Scribd company logo
1 of 15
2011-10-05 IT사업팀 강지영 1
Ageda 2 HTML이란? HTML의 역사 HTML 5 HTML 5 로고 HTML 5 Tag HTML 5 구조 HTML 5 지원 현황 HTML 5 예제 사이트 HTML 11 Q&A
HTML 이란? 3 HyperText Markup Language HTML 월드와이드웹(WWW)를 통합하는 언어이며,  HTML5는 이런 웹표준의 최신버전이다.
HTML의 역사 4 1991 팀 버너스-리 경, [HTML Tag]라는 글을 통해 약 20개 남짓의 태그 제안 1994. 05 제네바에서 첫 WWW 컨퍼런스 1994. 09 IETF(Internet Engineering Task Force) 창설 : HTML Working Group 1995. 11 HTML 2.0 발표 - IETF 1997. 01 HTML 3.2 발표 – W3C 1997. 12 HTML 4.0 발표 – W3C 1999. 12 HTML 4.01 발표 – W3C 2000 X(eXtensible)HTML 1.0 발표 – W3C 2002 XHTML 2.0 발표 – W3C 2004 Web Applications 1.0 – WHATWG(Web Hypertext Application Technology Working Group) 2007 HTML5 Working Group – W3C 2009 W3C – XHTML 2.0 을 더 이상 갱신하지 않겠다고 선언
HTML5 5 HTML 5 WHATWG 먼저 추가 후 리뷰하는 방식 W3C 먼저 리뷰 후 추가하는 방식 2010. 08 W3C – HTML5 Working Draft (초안 공개) 2012 HTML5 CR(Candidate Recommendation, 권고후보안) 발표 예정 2022 HTML5 PR(Proposed Recommendation , 권고제안) 발표 예정 ? HTML5 REC(Recommendation , 권고안) 발표 예정
6
HTML5 로고 7 HTML5 SEMANTICS 다양한 태그 세트, RDFa, microdata, microformat과 함께 프로그램 및 사용자에게 유용한 데이터 기반 웹을 사용 OFFLINE & STORAGE HTML5 응용프로그램 캐시덕분에로컬 저장소, 인덱스 DB 및 파일 API 규격이 없는 경우에도 웹어플리케이션을 신속하게 시작하고 작업을 수행할 수 있도록 제공 DEVICE ACCESS 위치정보 API를 시작으로 웹 응용 프로그램은 풍부한 장치 인식 기능과 경험을 제공 CONNECTIVITY 보다효율적인 연결을 의미하며, 실시간 채팅, 빠른 게임, 더 나아은 의사 소통을 의미 웹소켓과 서버에서 보낸 이벤트를 더 효율적으로 클라이언트와 서버 사이의 데이터 추진
HTML5 로고 8 MULTIMEDIA 오디오 및 비디오를 통해 어플리케이션과 사이트의 조화를 이루며, 살아있는 웹을 창조 3D, GRAPHICS, EFFECTS SVG, Canvas, WebGL및 CSS3 3D 기능들로 보다 환상적인 영상을 제공 PERFORMANCE & INTEGRATION 성능의 향상 및 웹 컨텐츠와 어플리케이션의 통합, 보다 빠른 웹 환경 제공 CSS3 STYLING CSS3는 의미론적으로 구조 또는 성능을 희생하지 않고 웹 응용프로그램을 강화하며,  어떤 양식을 일치시키며, 다양한 효과를 제공, 또 웹 오픈 폰트 포맷(WOFF)의 제공으로 인쇄의 유연성도 제공
HTML5 Tag 9 <!--..-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdo>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>,  <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <h1>~<h6>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <keygen>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>,<nav>,  <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <tt>, <u>, <ul>, <var>, <video>, <wbr>, <xmp>, <big>
HTML5 Tag 10 <!--..-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdo>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>,  <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <h1>~<h6>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <keygen>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>,<nav>,  <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <tt>, <u>, <ul>, <var>, <video>, <wbr>, <xmp>, <big>
HTML5 구조 11 <header> <nav> <aside> <section> <header> <artcle> <footer> <footer>
HTML5 지원 현황 12 출처 : http://google-chrome-browser.com
HTML5 지원현황 13
HTML5 예제 사이트 14 Apple HTML5 showcase ( http://www.apple.com/html5 ) HTML 5 Gallery(http://html5gallery.com/) HTML5 Demos and Examples(http://html5demos.com/) Microsoft Internet Explorer 9 Test Driver(http://ie.microsoft.com/testdrive)
HTML 11 15 <wind>, <smell>, <taste>, <religion>, <touch>, <xray>, <temperature>, <social>, <energy>, <silence>, <vibration> …

More Related Content

Similar to Html5

Html5의 현재와 미래
Html5의 현재와 미래Html5의 현재와 미래
Html5의 현재와 미래mosaicnet
 
HTML5 KIG 7th Markup SG
HTML5 KIG 7th Markup SGHTML5 KIG 7th Markup SG
HTML5 KIG 7th Markup SGToby Yun
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010Joone Hur
 
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5Channy Yun
 
WebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscampWebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscampBlisson Choi
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해Leehooan
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4Usys4u
 
0308 스마트폰테크 Html5
0308 스마트폰테크 Html50308 스마트폰테크 Html5
0308 스마트폰테크 Html5Seo Jinho
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차Michael Yang
 
ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리Kenu, GwangNam Heo
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Wonkyung Lyu
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차Michael Yang
 
Html5 guide
Html5 guideHtml5 guide
Html5 guidecamusice
 

Similar to Html5 (20)

Html5의 현재와 미래
Html5의 현재와 미래Html5의 현재와 미래
Html5의 현재와 미래
 
HTML5 KIG 7th Markup SG
HTML5 KIG 7th Markup SGHTML5 KIG 7th Markup SG
HTML5 KIG 7th Markup SG
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010
 
History and Status of HTML5
History and Status of HTML5History and Status of HTML5
History and Status of HTML5
 
WebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscampWebRTC 전망 최진호_webappscamp
WebRTC 전망 최진호_webappscamp
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해
 
Html5_SYS4U
Html5_SYS4UHtml5_SYS4U
Html5_SYS4U
 
0308 스마트폰테크 Html5
0308 스마트폰테크 Html50308 스마트폰테크 Html5
0308 스마트폰테크 Html5
 
HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)HTML5 Tutorial(Korean)
HTML5 Tutorial(Korean)
 
Html5 ie9
Html5 ie9Html5 ie9
Html5 ie9
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
 
ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리ecdevday3 효율적인 유지보수를 위한 개발 및 관리
ecdevday3 효율적인 유지보수를 위한 개발 및 관리
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 
Html5 video
Html5 videoHtml5 video
Html5 video
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
 
Html5 guide
Html5 guideHtml5 guide
Html5 guide
 
Html5 Guide
Html5 GuideHtml5 Guide
Html5 Guide
 
Html5 guide
Html5 guideHtml5 guide
Html5 guide
 
HTML5 와 미래웹기술 part 1
HTML5 와 미래웹기술 part 1HTML5 와 미래웹기술 part 1
HTML5 와 미래웹기술 part 1
 

Html5

  • 2. Ageda 2 HTML이란? HTML의 역사 HTML 5 HTML 5 로고 HTML 5 Tag HTML 5 구조 HTML 5 지원 현황 HTML 5 예제 사이트 HTML 11 Q&A
  • 3. HTML 이란? 3 HyperText Markup Language HTML 월드와이드웹(WWW)를 통합하는 언어이며, HTML5는 이런 웹표준의 최신버전이다.
  • 4. HTML의 역사 4 1991 팀 버너스-리 경, [HTML Tag]라는 글을 통해 약 20개 남짓의 태그 제안 1994. 05 제네바에서 첫 WWW 컨퍼런스 1994. 09 IETF(Internet Engineering Task Force) 창설 : HTML Working Group 1995. 11 HTML 2.0 발표 - IETF 1997. 01 HTML 3.2 발표 – W3C 1997. 12 HTML 4.0 발표 – W3C 1999. 12 HTML 4.01 발표 – W3C 2000 X(eXtensible)HTML 1.0 발표 – W3C 2002 XHTML 2.0 발표 – W3C 2004 Web Applications 1.0 – WHATWG(Web Hypertext Application Technology Working Group) 2007 HTML5 Working Group – W3C 2009 W3C – XHTML 2.0 을 더 이상 갱신하지 않겠다고 선언
  • 5. HTML5 5 HTML 5 WHATWG 먼저 추가 후 리뷰하는 방식 W3C 먼저 리뷰 후 추가하는 방식 2010. 08 W3C – HTML5 Working Draft (초안 공개) 2012 HTML5 CR(Candidate Recommendation, 권고후보안) 발표 예정 2022 HTML5 PR(Proposed Recommendation , 권고제안) 발표 예정 ? HTML5 REC(Recommendation , 권고안) 발표 예정
  • 6. 6
  • 7. HTML5 로고 7 HTML5 SEMANTICS 다양한 태그 세트, RDFa, microdata, microformat과 함께 프로그램 및 사용자에게 유용한 데이터 기반 웹을 사용 OFFLINE & STORAGE HTML5 응용프로그램 캐시덕분에로컬 저장소, 인덱스 DB 및 파일 API 규격이 없는 경우에도 웹어플리케이션을 신속하게 시작하고 작업을 수행할 수 있도록 제공 DEVICE ACCESS 위치정보 API를 시작으로 웹 응용 프로그램은 풍부한 장치 인식 기능과 경험을 제공 CONNECTIVITY 보다효율적인 연결을 의미하며, 실시간 채팅, 빠른 게임, 더 나아은 의사 소통을 의미 웹소켓과 서버에서 보낸 이벤트를 더 효율적으로 클라이언트와 서버 사이의 데이터 추진
  • 8. HTML5 로고 8 MULTIMEDIA 오디오 및 비디오를 통해 어플리케이션과 사이트의 조화를 이루며, 살아있는 웹을 창조 3D, GRAPHICS, EFFECTS SVG, Canvas, WebGL및 CSS3 3D 기능들로 보다 환상적인 영상을 제공 PERFORMANCE & INTEGRATION 성능의 향상 및 웹 컨텐츠와 어플리케이션의 통합, 보다 빠른 웹 환경 제공 CSS3 STYLING CSS3는 의미론적으로 구조 또는 성능을 희생하지 않고 웹 응용프로그램을 강화하며, 어떤 양식을 일치시키며, 다양한 효과를 제공, 또 웹 오픈 폰트 포맷(WOFF)의 제공으로 인쇄의 유연성도 제공
  • 9. HTML5 Tag 9 <!--..-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdo>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <h1>~<h6>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <keygen>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>,<nav>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <tt>, <u>, <ul>, <var>, <video>, <wbr>, <xmp>, <big>
  • 10. HTML5 Tag 10 <!--..-->, <!DOCTYPE>, <a>, <abbr>, <acronym>, <address>, <applet>, <area>, <article>, <aside>, <audio>, <b>, <base>, <basefont>, <bdo>, <blockquote>, <body>, <br>, <button>, <canvas>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <command>, <datalist>, <dd>, <del>, <details>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <figcaption>, <figure>, <font>, <footer>, <form>, <frame>, <frameset>, <h1>~<h6>, <head>, <header>, <hgroup>, <hr>, <html>, <i>, <iframe>, <img>, <input>, <ins>, <keygen>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <mark>, <menu>, <meta>, <meter>,<nav>, <noframes>, <noscript>, <object>, <ol>, <optgroup>, <option>, <output>, <p>, <param>, <pre>, <progress>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <source>, <span>, <strike>, <strong>, <style>, <sub>, <summary>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <time>, <title>, <tr>, <tt>, <u>, <ul>, <var>, <video>, <wbr>, <xmp>, <big>
  • 11. HTML5 구조 11 <header> <nav> <aside> <section> <header> <artcle> <footer> <footer>
  • 12. HTML5 지원 현황 12 출처 : http://google-chrome-browser.com
  • 14. HTML5 예제 사이트 14 Apple HTML5 showcase ( http://www.apple.com/html5 ) HTML 5 Gallery(http://html5gallery.com/) HTML5 Demos and Examples(http://html5demos.com/) Microsoft Internet Explorer 9 Test Driver(http://ie.microsoft.com/testdrive)
  • 15. HTML 11 15 <wind>, <smell>, <taste>, <religion>, <touch>, <xray>, <temperature>, <social>, <energy>, <silence>, <vibration> …