HTML5

오픈소스 비즈니스 컨설팅
둘러보기로 가기 검색하러 가기

HTML5가 기존 HTML 4.01에 비해 많은 부분이 변경되었다고 하는데, HTML5에 대해 좀 더 자세히 알아 보자.

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점

Html5test.png

4658010870.jpg
출처: 브라우저별, 디바이스별 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>

  • hgroup
  • h1, h2, h3, h4, h5, h6
<nav> <section>

<article>

  • header
  • section

<article>

  • figure
  • video
  • figcaption
<article>
<aside>

<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

  • 참고 문헌

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 데모
  • HTML5 오픈 콘퍼런스, 2010
  • 첨부 파일
원본 주소 "https://www.jopenbusiness.com/mediawiki/index.php?title=HTML5&oldid=764894"