HTML5 문서 원본 보기
←
HTML5
둘러보기로 가기
검색하러 가기
문서 편집 권한이 없습니다. 다음 이유를 확인해주세요:
요청한 명령은 다음 권한을 가진 사용자에게 제한됩니다:
사용자
.
이 문서는 편집하거나 다른 명령을 할 수 없도록 보호되어 있습니다.
문서의 원본을 보거나 복사할 수 있습니다.
HTML5가 기존 [http://www.w3.org/TR/REC-html40/ HTML 4.01]에 비해 많은 부분이 변경되었다고 하는데, HTML5에 대해 좀 더 자세히 알아 보자. *Spec : [http://www.whatwg.org/specs/web-apps/current-work/ HTML5], [http://www.whatwg.org/specs/web-apps/current-work/multipage/index.html#contents HTML5 Multipage] :*[http://www.w3.org/TR/html5/ HTML5 Latest Published Version] :*[http://www.w3.org/TR/2010/WD-html5-20101019/ HTML5 W3C Working Draft 19 October 2010] == HTML5 개요 == HTML5는 최근 10여년간의 웹 기술 발전을 대부분 포함하는 새로운 HTML 표준 규약 *모바일 개발자가 HTML5를 선호하는 이유 **Cross-Device 지원 **개발 비용 절감 *HTML5의 제약 사항 **브라우저별 성능의 편차가 있음 (Native보다 성능의 제약) **Hardware 제어 기능 미약 === HTML5 표준화 일정 === *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.Q2 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영 *2014.Q3 : HTML5 최종 표준안 (Recommendation), 2014.10 *2016 : HTML 5.1 *<span style="color:#0000FF;">HTML5 - Service Workers</span> **Cache를 사용한 오프라인 지원 **백그라운드 실행 지원 **Persistent 시스템 이벤트 지원 (Push, Alarm) *HTML5 - Manifest format **Web Application 인스톨 관련 메타데이터 관리 *HTML5 - Push API *HTML5 - picture and srcset attributes : 다양한 화면 크기에 맞는 이미지 처리 *HTML5 - Pointer events : 다양한 디바이스 이벤트 표준화 *<span style="color:#0000FF;">HTML5 - WebRTC</span> <- [http://www.w3.org/TR/websockets/ WebSocket] **Video, Audio, Data와 P2P 통신 기능에 대한 Web 표준 **2014년 4Q : Last Call Working Draft *<span style="color:#0000FF;">HTML5 - Web Components</span> : 사용자 정의 HTML componet 제작 가능 *HTML5 - Web Animations *ES6 - Promise *[http://www.polymer-project.org/ Polymer], [https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/Web_components Bricks] *참고 문헌 :*[http://www.zdnet.co.kr/news/news_view.asp?artice_id=20110215174256 W3C "HTML5 표준, 2014년 확정할 것"] :*[http://cwdoh.com/html5/2014/08/18/chrome-enchanted-notable-html5-specs-in-2014/ 2014년에 주목할 만한 HTML5 규격 5종, 2014.08] === HTML5 디자인 원칙 === HTML Design Principles *호환성 :*컨텐츠의 호환성 :*이전 브라우저와의 호환성 :*기능의 재사용 :*이용 방법의 호환성 :*혁신보다는 발전을 우선함 *실용성 *상호 운영성 *보편적 접근성 === HTML5 지원 현황 === *브라우저의 HTML5 지원 점수 :*[http://html5test.com/ http://html5test.com/] :*Google Chrome 7.0 : 231점 :*Google Chrome 9.0 : 242점 :*Google Chrome 10.0 : 288점 [[File:Html5test.png|700px|Html5test.png]] http://ibare.kr/tc/attach/1/4658010870.jpg<br/>출처: [http://www.ibare.kr/tc/18 브라우저별, 디바이스별 HTML5 TEST Point, 2010.10] ==HTML5 기본 문법== ===Sample HTML5=== *text/html과 application/xhtml+xml, application/xml MIME 형식을 따르는 HTML5 Sample :*[http://www.iana.org/assignments/character-sets Charsets] #--- text/html application/xhtml+xml <!DOCTYPE html> <?xml version="1.0" encoding="UTF-8"?> <html lang="ko"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko"> <head> <meta charset="UTF-8 /"> <title>Sample HTML5</title> </head> <body> <p>Sample HTML5</p> </body> </html> ===Metadata Content=== *콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다. *<head> 태그 내에서 사용되며, title, meta, link, script, style 태그가 있다. ===Flow Content=== *일반적으로 <body> 태그내에서 사용되는 대부분의 태그를 의미 한다. *iframe ===Sectioning Root=== *body, blockquote, figure 태그가 대표적이다. ===Sectioning Content=== *header과 footer의 범위를 결정하는 요소로 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가지고 있다. *section, article, nav 태그가 대표적이다. <header> <hgroup> <h1>HTML5 Sample</h1> </hgroup> </header> <nav> <ul> Menu 01 </ul> </nav> <section> <article> <header> <h1>Input Tag</h1> </header> <section> Content </section> </article> </section> <aside> Top links... </aside> <footer> Copyright ⓒ jopenbusiness 2010, All Rights Reserved. </footer> {|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="100%" valign="middle" style="background-color:#eee;"| <header> *hgroup :*h1, h2, h3, h4, h5, h6 |- |width="100%" align="center" valign="middle" style="background-color:#eee;"| {|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|<nav> |width="70%" align="center" valign="middle" style="background-color:#eee;"|<section> {|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |valign="middle" style="background-color:#eee;"| <article> *header *section |- |valign="middle" style="background-color:#eee;"| <article> *figure :*video :*figcaption |- |valign="middle" style="background-color:#eee;"|<article> |} |} |- |width="100%" align="center" valign="middle" style="background-color:#eee;"|<aside> |- |width="100%" valign="middle" style="background-color:#eee;"| <footer> *address |} ===Heading Content=== *Section의 Header를 나타내는 content 이다. *header, h1, h2, h3, h4, h5, h6 태그가 있다. ===Phrasing Content=== *문서의 텍스트로 하위에 텍스트나 임베디드 콘텐츠를포함한다. *abbr, em, strong, span가 있다. ===Embedded Content=== *이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현한다. *img, object, embed, video 태그가 있다. ===Interactive Content=== *사용자와 상호작용하는 요소 들이다. *a, audio, video, input 태그가 있다. *Input Tag ===Transparent=== *부모 요소의 콘텐츠에 따라 포함하는 콘텐츠의 분류가 바뀌는 요소를 말한다. ==HTML5 Tag== ===Global Attributes=== *class *contenteditable *contextmenu *dir *draggable *id *irrelevant *lang *ref *registrationmark *tabindex *template *title : 버블 형태의 힌트 정보를 표시 한다. ===input=== *type *autofocus : 문서가 로드되었을 때 focus를 여기로 옮긴다. *placeholder : 값이 입력되기 전에 힌트 정보로 표시 된다. *required : 필수 입력 요소를 나타낸다. *disable : 필드셋을 비활성화 *multiple : 한개 이상의 속성을 선택 가능 *min, step, max : 최소값, 증가값, 최대값 *datalist : 가질수 있는 값의 목록 *autocomplete : 자동 완성 *pattern : 필드값이 가질 수 있는 패턴 지정 *onFormInput : 필드의 입력값을 검사 한다. setCustomValidity(value != password1.value ? 'Not match password' : '') *<label for="아이디"> : input 태그의 라벨로 사용 한다. ==HTML5 API== ===Drag and Drop=== ===Offline Application Cache=== ===Web Storage=== *참고 문헌 :*[http://www.w3.org/TR/webstorage/ Web Storage] :*[http://dev.w3.org/html5/md/ HTML Microdata] ===IndexedDB=== *참고 문헌 :*[http://www.w3.org/TR/IndexedDB Indexed Database API] ===Web SQL Database=== *참고 문헌 :*[http://www.w3.org/TR/webdatabase/ Web SQL Database] *Web SQL Database 문법 interface SQLError { const unsigned short UNKNOWN_ERR = 0; const unsigned short DATABASE_ERR = 1; const unsigned short VERSION_ERR = 2; const unsigned short TOO_LARGE_ERR = 3; const unsigned short QUOTA_ERR = 4; const unsigned short SYNTAX_ERR = 5; const unsigned short CONSTRAINT_ERR = 6; const unsigned short TIMEOUT_ERR = 7; readonly attribute unsigned short code; readonly attribute DOMString message; }; exception SQLException { const unsigned short UNKNOWN_ERR = 0; const unsigned short DATABASE_ERR = 1; const unsigned short VERSION_ERR = 2; const unsigned short TOO_LARGE_ERR = 3; const unsigned short QUOTA_ERR = 4; const unsigned short SYNTAX_ERR = 5; const unsigned short CONSTRAINT_ERR = 6; const unsigned short TIMEOUT_ERR = 7; unsigned short code; DOMString message; }; interface DatabaseCallback { void handleEvent(in Database database); }; interface SQLVoidCallback { void handleEvent(); }; interface SQLTransactionCallback { void handleEvent(in SQLTransaction transaction); }; interface SQLTransactionErrorCallback { void handleEvent(in SQLError error); }; interface SQLResultSet { readonly attribute long insertId; readonly attribute long rowsAffected; readonly attribute SQLResultSetRowList rows; }; interface SQLResultSetRowList { readonly attribute unsigned long length; getter any item(in unsigned long index); }; interface WindowDatabase { Database openDatabase(in DOMString name, in DOMString version, in DOMString displayName, in unsigned long estimatedSize, in optional DatabaseCallback creationCallback); }; interface Database { void transaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback); void readTransaction(in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback); readonly attribute DOMString version; void changeVersion(in DOMString oldVersion, in DOMString newVersion, in optional SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback); }; interface SQLTransaction { void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in optional SQLStatementCallback callback, in optional SQLStatementErrorCallback errorCallback); }; interface SQLStatementCallback { void handleEvent(in SQLTransaction transaction, in SQLResultSet resultSet); }; interface SQLStatementErrorCallback { boolean handleEvent(in SQLTransaction transaction, in SQLError error); }; *Database Open var db = null; try { if (window.openDatabase) { var shortName = 'PFHjames'; var version = '1.0'; var displayName = 'User Settings Database'; var maxSize = 3 * 1024 *1024; //--- 3MB db = openDatabase(shortName, version, displayName, maxSize); if (!db) window.alert("Failed to open the database on disk. This is probably because the version was bad or there is not enough space left in this domain's quota"); } else { window.alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } } catch(err) { if (err == 2) { window.alert("Invalid database version."); } else { window.alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } db = null; } *Select/Create var query = null; var queryArg = null; var queryNew = null; var queryNewArg = null; query = "SELECT COUNT(*)" + " FROM WebkitStickyNotes"; queryArg = []; queryNew = "CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)"; queryNewArg = []; db.transaction(function(tx) { tx.executeSql(query, queryArg); }); db.transaction(function(tx) { tx.executeSql(query, queryArg, function(tx, result) { loadNotes(); }, function(tx, error) { tx.executeSql(queryNew, queryNewArg, function(result) { loadNotes(); }); }); }); *Select var query = null; var queryArg = null; query = "SELECT id, note, timestamp, left, top, zindex" + " FROM WebKitStickyNotes"; queryArg = []; db.readTransaction(function(tx) { tx.executeSql(query, queryArg, function(tx, result) { for (var i = 0;i < result.rows.length;i++) { var row = result.rows.item(i); var note = new Note(); note.id = row['id']; note.text = row['note']; note.timestamp = row['timestamp']; note.left = row['left']; note.top = row['top']; note.zIndex = row['zindex']; if (row['id'] > highestId) { highestId = row['id']; } if (row['zindex'] > highestZ) { highestZ = row['zindex']; } } if (!result.rows.length) { newNote(); } }, function(tx, error) { window.alert('Failed to retrieve notes from database - ' + error.message); return; }); }); *Insert var query = null; var queryArg = null; query = "INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex)" + " VALUES (?, ?, ?, ?, ?, ?)"; queryArg = [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]; db.transaction(function(tx) { tx.executeSql(query, queryArg); }); *Update var query = null; var queryArg = null; query = "UPDATE WebKitStickyNotes" + " SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ?" + " WHERE id = ?"; queryArg = [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]]; db.transaction(function(tx) { tx.executeSql(query, queryArg); }); *Delete var query = null; var queryArg = null; query = "DELETE FROM WebKitStickyNotes" + " WHERE id = ?"; queryArg = [note.id]; db.transaction(function(tx) { tx.executeSql(query, queryArg); }); ===File API=== *참고 문헌 :*[http://www.w3.org/TR/FileAPI File API] ===Web Workers=== *참고 문헌 :*[http://www.w3.org/TR/workers Web Workers] :*[http://www.whatwg.org/specs/web-workers/current-work Web Workers Living Standard] ===Server-Send Event=== *참고 문헌 :*[http://www.w3.org/TR/eventsource/ Server-Sent Events] ===Notifications=== *참고 문헌 :*[http://dev.w3.org/html5/postmsg HTML5 Web Messaging] ===Canvas=== *참고 문헌 :*[http://dev.w3.org/html5/2dcontext HTML Canvas 2D Context] :*[http://dev.w3.org/html5/canvas-api/canvas-2d-api.html Canvas 2D API Specification 1.0] ===WebGL=== ===Selector API=== ===Geolocation=== *참고 문헌 :*[http://www.w3.org/TR/geolocation-API/ Geolocation API Specification] ===Audio=== ===Video=== ===SVG=== ===Web Sockets=== *참고 문헌 :*[http://www.w3.org/TR/websockets/ WebSockets API] :*[http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol-66/ WebSockets Protocol] ==HTMLDocument== ==HTML elements== *참고 문헌 :*[http://dev.w3.org/html5/markup/elements.html HTML elements] ==HTML5용 Utility== ===HTML5용 임시 도구=== 현재 브라우저는 HTML5을 완벽하게 지원하고 있지 않습니다. 다음과 같은 방법을 사용하여 이를 보완할 수 있습니다. *html5_for_ie.js function funcCreateElement() { var tags = [ "section", "article", "hgroup", "header", "footer", "nav", "aside", "figure", "mark", "time", "ruby", "rt", "rp" ]; for (var idx = 0;idx < tags.length;idx++) { windows.document.createElement(tags[idx]); } } funcCreateElement(); *html5.css section, article, hgroup, header, footer, nav, aside, figure { display:block; } ==표준 및 특허== *동영상 처리 기술 :*WebM Codec (온투테크놀러지, Google) : 오픈소스로 개방 :*H.264 Codec (MPEG LA) ::*웹 기반 동영상 서비스에 대해 기술 사용료를 무제한 면제 :*MPEG-1 -> IVC 표준 개발 추진 (?) :*H.264 -> WebVC 표준 개발 추진 (?) == 참고 문헌 == *[[CSS3|CSS3]] *[http://www.w3schools.com/html/default.asp HTML5 Tutorial] *https://www.koreahtml5.kr/ *HTML5 Spec :*[http://www.w3.org/TR/html5/ HTML5, 2011.1] : 작업중인 HTML5 문서 :*[http://www.w3.org/html/wg/ W3C HTML Working Group] :*[http://www.w3.org/TR/2010/WD-html5-20100624/ HTML5 Specification, 2010.6] :*[http://www.w3.org/TR/2010/WD-html-markup-20100624/ The Markup Language, 2010.6] :*[http://www.w3.org/TR/2009/WD-html5-diff-20090825/ W3C HTML 5 differences from HTML 4, 2009.8.25] ::*[http://channy.creation.net/project/html5/html4-differences/ HTML 4와 HTML 5의 차이점, 2009.4] : 2009.3 문서의 한글 번역판 :*[http://dev.w3.org/html5/html-author/ HTML 5 Reference, 2009.3] :*[http://dev.w3.org/html5/html-design-principles/ HTML Design Principles, 2009.5] :*[http://www.whatwg.org/specs/web-apps/current-work/ HTML] ::*[http://www.whatwg.org/specs/web-apps/current-work/complete/ Web Applications 1.0] :*[http://validator.w3.org/ Markup Validation Service] : HTML5 구문 검증이 가능함 :*[http://html5.validator.nu/ Validator.nu (X)HTML5 Validator] *HTML5 데모 :*[http://9elements.com/io/projects/html5/canvas/ HTML5 Canvas and Audio Experiment] : HTML5 Sample Page :*[http://www.apple.com/html5/ HTML5 and web standards] : Apple :*[http://www.html5rocks.com/ HTML5 Rocks] : Google ::*[http://slides.html5rocks.com/#slide1 Interactive Presentation] ::*[http://playground.html5rocks.com/ Code Playground] ::*[http://www.html5rocks.com/tutorials/ Step by Step Tutorials] :*[http://html5test.com/ The HTML5 Test] : 브라우저별 HTML5 지원 현황 :*[http://caniuse.com/#compare=y&b1=ie+9&b2=firefox+4 브라우저간 HTML5 지원 비교] :*[http://ie.microsoft.com/testdrive/ IE10의 HTML5 데모] ::*[http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.html Try Strict Mode] ::*[http://ie.microsoft.com/testdrive/HTML5/TweetColumns/Default.html Tweet Columns] ::*[http://ie.microsoft.com/testdrive/HTML5/Griddle/Default.html Griddle] ::*[http://ie.microsoft.com/testdrive/HTML5/Flexin/Default.html CSS3 Flexbox Flexin] ::*[http://ie.microsoft.com/testdrive/HTML5/GridSystem/Default.html The Grid System] ::*[http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html More HTML5 Demos...] *[http://ko.wikipedia.org/wiki/HTML5 위키백과 - HTML5] *[http://diveintohtml5.org/ DIVE INTO HTML 5] *[http://www.iamcorean.net/187 HTML5 그 놈이 온다, 2009.9] *[http://html5doctor.com/ html5 doctor] *[http://channy.creation.net/blog/776 HTML5의 모든 것, 2010.2] *[http://channy.creation.net/blog/803 실전 HTML5 가이드 만들기, 2010.7] *HTML5 오픈 콘퍼런스, 2010 :*[http://webappscon.com/html5/video/?code=1-html5-intro HTML5 소개 및 현황] :*[http://webappscon.com/html5/video/?code=2-html5-markup HTML5 마크업] :*[http://webappscon.com/html5/video/?code=3-html5-css3 CSS3 실전 예제] :*[http://webappscon.com/html5/video/?code=4-html5-api HTML5 API 및 데모] :*[http://webappscon.com/html5/video/?code=5-html5-mobile HTML5 기반 모바일 앱] *[http://xguru.net/593 HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가, 2010.7] *[http://mashable.com/2010/11/02/baker-ebook-framework/ An Open Source, HTML5 Framework for iPad E-books, 2010.11] *[http://www.idg.co.kr/newscenter/common/newCommonView.do?newsId=64414 HTML5에서 여전히 빠진 것, 2011.2] *[http://www.w3.org/TR/mwbp-wcag/mwbp-wcag20.html From MWBP to WCAG 2.0] *[http://www.w3.org/2007/02/mwbp_flip_cards Mobile Web Best Practices (MWBP) Flipcards] *[http://www.w3c.or.kr/Translation/MWABP/ 모바일 웹 애플리케이션 모범 사례 카드] *첨부 파일 :*[http://www.mozilla.or.kr/ko/docs/web-developer/web-standard-guide-2005-appendix.pdf 실전 웹 표준 가이드, 2005.12] :*[http://html5.creation.net/html5-guide.pdf 실전 HTML5 가이드, 2010.7] *[http://blog.daum.net/_blog/BlogTypeView.do?blogid=0UjHn&articleno=2162&categoryId=49®dt=20110322013228#ajax_history_home URL Decoder/Encoder] *[http://www.sqler.com/374157 HTML5강좌 - 1. HTML5 개요] *HTML 5 기능 지원여부 확인 :*[http://caniuse.com/ http://caniuse.com/] :*[http://www.modernizr.com/ http://www.modernizr.com/] :*[http://html5test.com/ http://html5test.com/]<br/> [[Category:HTML5|Category:HTML5]]<br/>[[Category:Mobile|Category:Mobile]]<br/>[[Category:프로그램 언어|Category:프로그램 언어]]
HTML5
문서로 돌아갑니다.
둘러보기 메뉴
개인 도구
로그인
이름공간
문서
토론
변수
보기
읽기
원본 보기
역사 보기
더 보기
검색
주요 메뉴
오픈소스 컨설팅
오픈소스
오픈소스 라이선스
오픈소스 커뮤니티
오픈소스 종류
오픈소스 현황
오픈소스 한글화
문자셋과 인코딩
Storage
Network
보안
고가용성
모니터링
오픈 API
오픈 서비스
Cloud
BigData
Android
산사랑 노트
둘러보기
인기 문서
최근 수정 문서
모든 문서
모든 분류
임의 문서
위키 사용법
자매 사이트
CMS
오비컨 홈페이지
오비컨 CMS
블로그
데모 - SuiteCRM
산사랑의 Twitter
산사랑의 Facebook
친구 사이트
공개SW 포털
OLIS
한국공개소프트웨어협회
AppCenter 지원본부
OLC
PSEG
개발자 블로그
블로터
개인 메뉴
메뉴 수정
양식함
도구
여기를 가리키는 문서
가리키는 글의 최근 바뀜
특수 문서 목록
문서 정보