- HTML 5
- HTML5 개요
- HTML5 표준화 일정
- HTML5 디자인 원칙
- HTML5 지원 현황
- HTML5 기본 문법
- Standard HTML5
- Metadata Content
- Flow Content
- Sectioning Root
- Sectioning Content
- Heading Content
- Phrasing Content
- Embedded Content
- Interactive Content
- Transparent
- HTML5 Tag
- Global Attributes
- input
- HTMLDocument
- HTML elements
- HTML5용 Utility
- HTML5용 임시 도구
- 표준 및 특허
- HTML5 API
- Semantics
- Parsing rules
- Elements
- Selector API
- Forms
- Web Components
- Shadow DOM
- Device access
- Location and Orientation
- Geolocation
- Orientation
- Motion
- Output
- Full screen support
- Web Notifications (알림)
- Input
- Gamepad control
- Pointer
- Connectivity
- Communication
- Server-Send Event
- Beacon
- Fetch
- XMLHttpRequest Level 2
- Web Sockets
- Streams
- Peer To Peer
- Web RTC
- ObjectRTC
- Performance, integration
- User interaction
- Drag and Drop
- HTML editing
- Clipboard
- Spellcheck
- Performance
- Web Workers
- Shared Workers
- Security
- Web Cryptography
- Web Authentication
- Iframes
- Payments
- Multimedia
- Video element
- Audio element
- Streaming
- 3d, graphics, effects
- Responsive images
- Picture elements
- 2D Graphics
- Canvas
- SVG (Scalable Vector Graphics)
- 3D and VR
- WebGL
- WebGL 2
- WebVR
- Animation
- Web Animation
- Offline, Storage
- Web applications
- Application Cache
- Service Workers
- Push Messages
- Storage
- Session Storage
- Local Storage
- IndexedDB
- Web SQL Database
- Files
- FileSystem API
- File API
- Other
- Scripting
- URL API
- Encoding API
- Other
- MathML
- Web Assembly (WASM)
- 참고 문헌
Spec : [http://www.whatwg.org/specs/web-apps/current-work/ HTML5], HTML5 Multipage
모바일 개발자가 HTML5를 선호하는 이유
Cross-Device 지원
개발 비용 절감
HTML5의 제약 사항
브라우저별 성능의 편차가 있음 (Native보다 성능의 제약)
Hardware 제어 기능 미약
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
[http://www.polymer-project.org/ Polymer], Bricks
참고 문헌
호환성
컨텐츠의 호환성
이전 브라우저와의 호환성
기능의 재사용
이용 방법의 호환성
혁신보다는 발전을 우선함
실용성
상호 운영성
보편적 접근성
브라우저의 HTML5 지원 점수
Google Chrome 7.0 : 231점
Google Chrome 9.0 : 242점
Google Chrome 10.0 : 288점
text/html과 application/xhtml+xml, application/xml MIME 형식을 따르는 HTML5 Sample
HTML 5
HTML5가 기존 HTML 4.01에 비해 많은 부분이 변경되었다고 하는데, HTML5에 대해 좀 더 자세히 알아 보자.
HTML5 개요
HTML5는 최근 10여년간의 웹 기술 발전을 대부분 포함하는 새로운 HTML 표준 규약
HTML5 표준화 일정
HTML5 디자인 원칙
HTML Design Principles
HTML5 지원 현황
http://ibare.kr/tc/attach/1/4658010870.jpg
출처: 브라우저별, 디바이스별 HTML5 TEST Point, 2010.10
HTML5 기본 문법
Standard HTML5
OBCon map
Sample HTML5
Metadata Content
콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다.
head 태그 내에서 사용되며, title, meta, link, script, style 태그가 있다.
Flow Content
일반적으로
태그내에서 사용되는 대부분의 태그를 의미 한다.iframe
Sectioning Root
body, blockquote, figure 태그가 대표적이다.
Sectioning Content
Semantics 태그
header
nav
aside
main
section
article
figure
figcaption
details
summary
dialog
mark
meter
progress
time
wbr
footer
input
color
date, datetime, datetime-local, time
email, month
number, range
search
tel
url
week
Connectivity
WebSocket
Graphics과 Effects
svg
canvas
Multimedia
audio
embed
source
track
video
Device acess
navigator.geolocation
Offline & Storage
localStorage
Web Workers
new Worker('~.js')
SSE (Server-Sent Events)
new EventSource('~')
Drag & Drop
Custom Tag
header과 footer의 범위를 결정하는 요소로 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가지고 있다.
section, article, nav 태그가 대표적이다.
HTML5 Sample
Input Tag
Content
{|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;" { - width="30%" align="center" valign="middle" style="background-color:#eee;" width="70%" align="center" valign="middle" style="background-color:#eee;" { - 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;" } } - width="100%" align="center" valign="middle" style="background-color:#eee;" - 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' : '')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](idx.md));
}
}
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 API
학습 순서
Session Storage, Local Storage, IndexedDB, Web SQL Database
Web Socket / XMLHttpRequest, WebRTC
Drag and drop / HTML editing, Clipboard
Push Messages
Canvas, SVG, Web Animations / WebGL, WebGL 2, WebVR
Semantics
Parsing rules
triggers standards mode
HTML5 tokenizer
HTML5 tree building
Parsing inline SVG
Parsing inline MathML
Elements
Section elements
Grouping content elements
Text-level semantic elements
Interactive elements
Selector API
Forms
Field types
text, search, tel, url, email,
date, month, week, time, datetime-local
number, range
color
checkbox
image, file
textarea, select, fieldset, datalist, output, progress, meter
Fields
Field validation
CSS selectors
Forms
Web Components
Custom elements
Shadow DOM
HTML templates
HTML imports
Shadow DOM
Device access
Location and Orientation
Geolocation
Orientation
Motion
Output
Full screen support
Web Notifications (알림)
Web Worker에서 사용 가능
Service Worker에서 사용 가능
//--- 알림 지원 여부 확인
if (!('Notification' in window)) {
console.error('이 브라우저는 알림을 지원하지 않습니다.');
} else {
console.log('이 브라우저는 알림을 지원 합니다');
}
if ((Notification) && (Notification.permission) != 'granted') {
//--- 알림 권한 요청
//--- default, granted, denied
const permission = await Notification.requestPermission();
Notification.permission = permission;
}
//--- 알림 생성과 닫기
if ((Notification) && (Notification.permission) == 'granted') {
const noti = new Notification(
'제목',
{
body: '본문',
icon: '~.png'
}
);
setTimeout(noti.close.bind(noti), 4000);
} else {
window.alert('본문')
}
Input
Gamepad control
Pointer
Connectivity
Communication
Server-Send Event
참고 문헌
Beacon
Fetch
XMLHttpRequest Level 2
Web Sockets
Streams
Peer To Peer
Web RTC
ObjectRTC
Performance, integration
User interaction
Drag and Drop
HTML editing
Clipboard
Spellcheck
Performance
Web Workers
참고 문헌
Shared Workers
Security
Web Cryptography
Web Authentication
Iframes
Payments
Multimedia
Video element
Audio element
Web Audio API
Streaming
Media
DRM
3d, graphics, effects
Responsive images
Picture elements
2D Graphics
Canvas
.container {
}
.container > canvas {
}const containerId = 'container';
const tagName = 'canvas';
const width = 600;
const height = 200;
//--- Container 정의
const container = document.getElementById(containerId);
container.style.width = `${width}px`;
container.style.height = `${height}px`;
//--- Container에 tag 추가
const rootElement = document.createElement(tagName);
container.append(rootElement);
const canvas = document.querySelector(`#${containerId} > ${tagName}`);
const ctx = canvas.getContext('2d');
canvas.style.width = `${this._options.width}px`;
canvas.style.height = `${this._options.height}px`;
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);SVG (Scalable Vector Graphics)
line : 직선
polyline : 다중 직선
rect : 사각형
circle : 원
ellipse : 타원
polygon : 다각형
3D and VR
WebGL
WebGL 2
WebVR
Animation
Web Animation
window.requestAnimationFrame
Offline, Storage
Web applications
Application Cache
Service Workers
Push Messages
Storage
Session Storage
참고 문헌
Local 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 = [](.md);
queryNew = "CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)";
queryNewArg = [](.md);
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 = [](.md);
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']('id'.md);
note.text = row['note']('note'.md);
note.timestamp = row['timestamp']('timestamp'.md);
note.left = row['left']('left'.md);
note.top = row['top']('top'.md);
note.zIndex = row['zindex']('zindex'.md);
if (row['id']('id'.md) > highestId) {
highestId = row['id']('id'.md);
}
if (row['zindex']('zindex'.md) > highestZ) {
highestZ = row['zindex']('zindex'.md);
}
}
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.text, note.timestamp, note.left, note.top, note.zIndex](note.id,);
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.timestamp, note.left, note.top, note.zIndex, note.id]](note.text,);
db.transaction(function(tx) { tx.executeSql(query, queryArg); });Delete
var query = null;
var queryArg = null;
query = "DELETE FROM WebKitStickyNotes"
+ " WHERE id = ?";
queryArg = [note.id](note.id.md);
db.transaction(function(tx) { tx.executeSql(query, queryArg); });Files
FileSystem API
File API
참고 문헌
Other
Scripting
URL API
Encoding API
Other
Session history
Page Visibility
Text selection
Scroll into view
MathML
Web Assembly (WASM)
Rust to WASM
Go to WASM
JavaScript to WASM
참고 문헌
HTML5 Spec
HTML5, 2011.1 : 작업중인 HTML5 문서
W3C HTML 5 differences from HTML 4, 2009.8.25
HTML 4와 HTML 5의 차이점, 2009.4 : 2009.3 문서의 한글 번역판
Markup Validation Service : HTML5 구문 검증이 가능함
HTML5 데모
HTML5 Canvas and Audio Experiment : HTML5 Sample Page
HTML5 and web standards : Apple
HTML5 Rocks : Google
The HTML5 Test : 브라우저별 HTML5 지원 현황
HTML5 오픈 콘퍼런스, 2010
첨부 파일
HTML 5 기능 지원여부 확인