HTML 5

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

  • [http://www.polymer-project.org/ 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점

700px|Html5test.png

http://ibare.kr/tc/attach/1/4658010870.jpg
출처: 브라우저별, 디바이스별 HTML5 TEST Point, 2010.10


HTML5 기본 문법


Standard HTML5

  • text/html과 application/xhtml+xml, application/xml MIME 형식을 따르는 HTML5 Sample 


    
        
        
        
        
        
        
        
        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
      

    

  

 
  
 
  

   Copyright ⓒ jopenbusiness 2010, All Rights Reserved.

{|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;"|
  • 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;"|
  • 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

  • http://html5test.com/
  • 학습 순서
    • 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 (알림)

  

//--- 알림 지원 여부 확인
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)

 

​


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

 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)

​


참고 문헌

최종 수정일: 2022-11-09 11:26:56
이전글 :
다음글 :
상단 menu
arrow_back_ios
arrow_forward_ios