HTML5
둘러보기로 가기
검색하러 가기
HTML5가 기존 HTML 4.01에 비해 많은 부분이 변경되었다고 하는데, HTML5에 대해 좀 더 자세히 알아 보자.
- Spec : HTML5, HTML5 Multipage
목차
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
- HTML5 - Service Workers
- Cache를 사용한 오프라인 지원
- 백그라운드 실행 지원
- Persistent 시스템 이벤트 지원 (Push, Alarm)
- HTML5 - Manifest format
- Web Application 인스톨 관련 메타데이터 관리
- HTML5 - Push API
- HTML5 - picture and srcset attributes : 다양한 화면 크기에 맞는 이미지 처리
- HTML5 - Pointer events : 다양한 디바이스 이벤트 표준화
- HTML5 - WebRTC <- WebSocket
- Video, Audio, Data와 P2P 통신 기능에 대한 Web 표준
- 2014년 4Q : Last Call Working Draft
- HTML5 - Web Components : 사용자 정의 HTML componet 제작 가능
- HTML5 - Web Animations
- ES6 - Promise
- Polymer, Bricks
- 참고 문헌
HTML5 디자인 원칙
HTML Design Principles
- 호환성
- 컨텐츠의 호환성
- 이전 브라우저와의 호환성
- 기능의 재사용
- 이용 방법의 호환성
- 혁신보다는 발전을 우선함
- 실용성
- 상호 운영성
- 보편적 접근성
HTML5 지원 현황
- 브라우저의 HTML5 지원 점수
- http://html5test.com/
- Google Chrome 7.0 : 231점
- Google Chrome 9.0 : 242점
- Google Chrome 10.0 : 288점
출처: 브라우저별, 디바이스별 HTML5 TEST Point, 2010.10
HTML5 기본 문법
Sample HTML5
- text/html과 application/xhtml+xml, application/xml MIME 형식을 따르는 HTML5 Sample
#--- 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>
<header>
| |||||
| |||||
<aside> | |||||
<footer>
|
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
- 참고 문헌
IndexedDB
- 참고 문헌
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
- 참고 문헌
Web Workers
- 참고 문헌
Server-Send Event
- 참고 문헌
Notifications
- 참고 문헌
Canvas
- 참고 문헌
WebGL
Selector API
Geolocation
- 참고 문헌
Audio
Video
SVG
Web Sockets
- 참고 문헌
HTMLDocument
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 표준 개발 추진 (?)
참고 문헌
- HTML5 Spec
- HTML5, 2011.1 : 작업중인 HTML5 문서
- W3C HTML Working Group
- HTML5 Specification, 2010.6
- The Markup Language, 2010.6
- W3C HTML 5 differences from HTML 4, 2009.8.25
- HTML 4와 HTML 5의 차이점, 2009.4 : 2009.3 문서의 한글 번역판
- Markup Validation Service : HTML5 구문 검증이 가능함
- Validator.nu (X)HTML5 Validator
- HTML5 데모
- HTML5 Canvas and Audio Experiment : HTML5 Sample Page
- HTML5 and web standards : Apple
- HTML5 Rocks : Google
- The HTML5 Test : 브라우저별 HTML5 지원 현황
- 브라우저간 HTML5 지원 비교
- IE10의 HTML5 데모
- HTML5 오픈 콘퍼런스, 2010
- HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가, 2010.7
- An Open Source, HTML5 Framework for iPad E-books, 2010.11
- 첨부 파일
- HTML5강좌 - 1. HTML5 개요
- HTML 5 기능 지원여부 확인