'HTML 5'에 해당되는 글 1건

2008/03/25 14:21

HTML 5

등장 배경

HTML5의 시작은 WHATWG (Web Hypertext Application Technology Working Group) 그룹
적용이 지연 되고 있는 XHTML 2.0을 대체할 표준으로 HTML의 업그레이드 버전
HTML 4 -> XHTML 1.0 -> DOM2HTML -> HTML 5 -> XHTML 2.0
표준 정의에 모호한 점이 있어서 구현에 어려움이 있었다.

용어 정의

Web Application 1.0 : WHATWG에서 만들고 있었던 HTML5
Web Form 2.0 : XHTML의 XForms의 영향을 받아 HTML4에서의 form을 Web Form 1.0으로 정의하고 Web Form 2.0으로 확장하였다.

지원 브라우저

New Features

레이아웃 엘리먼트 : 캘린더 컨트롤, 어드레스 카드, 데이터그리드, 게이지 및 프로그레스 미터, 드래그 앤 드롭, 메뉴
프로그래밍 가능한 DOM 확장 서버에서 보내진 DOM도 포함된다.
사실상 표준인 XMLHttpRequest 공인
canvas엘리먼트를 이용한 동적 비트맵 그래픽

문법

HTML 5 Sample Code HTML ver. text/html MIME type

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML 5 Sample Code XHTML ver. application/xhtml+xml , application/xml

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

문자 인코딩

HTTP 헤더의 Content-type 에 표기
문서 시작 부분에 Unicode Byte Order Mark(BOM) 캐릭터 사용
head 엘리먼트의 첫 요소로 meta 엘리먼트를 이용한 charset 속성 정의
- <meta carhset="UTF-8">
- 기존의 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

DOCTYPE

기존 DOCTYPE 예 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML V5 의 예 : <!DOCTYPE html>
원래 목적은 초기 HTML은 SGML subset으로 규정되었기 때문에 DTD선언을 하도록 했지만 현재는 사용하지 않고 있다.
http://www.w3.org/TR/html4/loose.dtd 사이트에 상당한 부하가 걸리고 있다.

언어

새 요소들

Structure

section	문서 및 어플리케이션 영역 표시, H1~h6와 함께 사용할 수 있다.마치 책의 챕터 같은 부분이 될 수 있다.
header	문서 내 머리말 부분을 표시할 때 사용합니다.
footer	문서 내 꼬리말 부분을 표시할 때 사용하며 문서 저자, 저작권 정보 같은 것을 표시할 수 있습니다.
nav	문서 내 네비게이션 요소들을 표시하기 위한 영역입니다.
article	뉴스 기사나 블로그 글 같은 독립적인 컨텐츠 단위를 표시할 때 사용 합니다.

A typical blog page today

<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

A typical blog page in HTML 5

<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

Block Semantic Elements

aside	문서의 주요 부분을 표시하고 남은 부분의 컨텐츠를 표시할 때 사용합니다. 노트, 팁, 사이드바, 등 주흐름 외의 정보를 묵어서 표현
figure	그림이나 비디오 같은 블럭 레벨의 임베딩 컨텐츠와 함께 캡션을 할때 사용 합니다.
dialog	대화 기능을 표시할 때 사용할 수 있습니다.

Inline Semantic Elements

m(ark)	별도로 표시한 컨텐츠를 표시하는데 사용합니다.하지만 em과 다르게 강조되어 표시되지는 않습니다.
time	날짜나 시간을 표시하는 데 사용합니다.
meter	디스크 사용량 같은 측정값을 표시하는 데 사용합니다.
progress	다운로드 같은 작업 진척도나 진행 정도를 표시하는 데 사용합니다.

Embedded media

video, audio : 멀티미디어 컨텐츠를 표시하는 데 사용합니다. 둘다 어플리케이션 개발자들이 사용자 인터페이스를 직접 만들 수 있는 API를 제공 합니다. 다중 source요소는 다른 형식의 다중 스트림을 제공하게 되는 경우 이들 요소들과 함께 사용할 수 있습니다.

Interactivity

details	사용자의 요청에 따라 얻은 콘트롤이나 부가 정보를 표시하는 데 사용합니다. 각주나 주석처리에 용이하다
datagrid	트리 목록이나 표 데이터를 좀 더 동적으로 표현하는 데 사용합니다. 지금을 HTMLDataGridElement을 통해 조작할 수 있다.
menu	type, label, autosubmit 같은 새 속성을 가집니다. 이들 속성은 전역 contextmenu 속성과 함께 문맥 메뉴를 제공할 때나 전형적인 메뉴 사용자 인터페이스를 제공하는 데 사용 할 수 있습니다. HTML4에서 삭제되었다가 가시 부활
command	사용자가 실행할 수 있는 명령어를 표시하는 데 사용합니다.

Edit menu

<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

그 외

event-source : 서버가 보낸 이벤트 파악하는 데 사용합니다.
output : 자바스크립트로 수행된 결과값을 표시하는데 사용합니다.
datalist : input의 list 속성을 위한 요소

추가 속성

input : list, autocomplete, min,max, pattern, step
전역 속성
- contenteditable : 편집 가능 영역
- contextmenu : 컨텍스트 메뉴를 지정 할 수 있다.
- draggable : Drag&Drop API에 사용 할 수 있다.
- irrelevant : 더 이상 의미가 없다.
반복 템플릿 기능용 전역변수
- repeat
- repeat-start
- repeat-min
- repeat-max

등등

API

2차원 그래픽 API에 사용할 수 있는 canvas 요소.
- Firefox, Safari 에서 현재 지원중
- W3C의 Scalable Vector Graphics(SVG)가 인-브라우저 일러스트레이션을 보여주는 방식 와 다른 방식
- Javascript가 그릴 수 있도록 빈 공백을 제공한다.
- OpenGL 스타일
- simple 3D maze

canvas 예제

<html>
  <head>
    <title>Canvas demo</title>
    <script type="text/javascript">
      function draw () {
        var canvas = document.getElementById ('hello');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.fillRect (25, 25, 50, 50);
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 2px solid red; }
    </style>
  </head>
  <body onload="draw ();">
    <canvas id="hello" width="100" height="100"></canvas>
  </body>
</html>

내장 비디오 및 오디오 재생을 위한 video, audio 요소.
내장 저장소. 키/값이나 SQL 기반 데이터베이스 지원을 위한 기능.
온라인/오프라인 이벤트 기능.
새 전역 contenteditable 속성과 함께 지원 되는 편집 API 기능.
새 전역 draggable 속성과 함께 지원 되는 드래그앤 드롭 API 기능.
네트웍 API.
페이지 앞/뒤 네비게이션을 지원할 방문 기록 표시용 API 기능. (보안 제한 모델이 있음)
다중 메시징 처리 기능.
event-source 요소와 함께 사용할 서버 전달 이벤트 기능.

HTMLDocument 확장 (document.)

getElementsByClassName
innerHTML ( HTMLEelemnt에서 document도 가능)
activeElement, hasFocus : 포커스를 확인 가능하다
getSelect(): 선택된 객체 반환
designMode, execCommand : 문서 편집용

HTMLElement 확장

getElementByClassName
innerHTML
classList : className 접근용
has,add,remove,toggle
a, area, link : rel과 유사한 relList

Web Form 2.0

브라우저에서 사용할 수 있는 form 위젯들 향상시키는 것이 목적이다.
form이 submit되기 전에 Validation 생성자로 체킹이 가능하다.
- required, min, max 속성 추가
DOM에 조건검사 지원
- validity 속성, invalid 이벤트 추가
auto-completion 브라우저가 기억하고 자동 완성을 제공할 수도 있고, list 속성으로 넘겨 줄 수도 있다.
로딩시 자동으로 포커스를 가져오는 autofocus
텍스트-홀딩 방식의 적절한 언어 선택을 위한 inputmode
파일 업로드 : 예상 파일 유형 지정 및 파일 크기 제한
Form 요소 템플릿 반복가능
new Type : datetime, number, range, email, url, add, remove, move-up, move-down

Web Forms 1.0에서 5~10까지 숫자 입력

<input type="text" id="numValId" name="numVal" onkeyup="checkData()">
<script>
function checkData(){ Data 타입 검증, 최대/최소값 검증}
</script>

Web Forms 2.0 에서의 5~10까지 숫자 입력

<input type="number" min="5" max="10" name="numVal" oninvalid="예외처리">

Template & input

<table>
<tbody>
 <tr id="order" repeat="template" repeat-start="3">
 <td><input type="text" name="row[order].product" value=""></td>
 <td><input type="text" name="row[order].quantity" value="1"></td>
 </tr>
</tbody>
</table>
<p><button type="add" template="order">Add Row</button></p>
<p><button type="submit">Submit</button></p>

참고 문헌

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'indirect' 카테고리의 다른 글

Photoshop Express (2)	2008/03/31
HTML 5 (0)	2008/03/25
Eola Patch 종료, Flash 연동 (0)	2008/03/20
Google Calendar 와 Microsoft Outlook Sync 시키기 (최종) (0)	2008/03/10

Posted by 허혁

HTML 5, HTML v5, html5, Programming

트랙백 0 : 댓글 0

◀ PREV : [1] : NEXT ▶

IT's Lives.

'HTML 5'에 해당되는 글 1건

HTML 5

HTML 5

등장 배경

용어 정의

지원 브라우저

New Features

문법

문자 인코딩

DOCTYPE

언어

새 요소들

Structure

Block Semantic Elements

Inline Semantic Elements

Embedded media

Interactivity

그 외

추가 속성

API

HTMLDocument 확장 (document.)

HTMLElement 확장

Web Form 2.0

참고 문헌

'indirect' 카테고리의 다른 글

트랙백 보낼 주소 :: http://blog.hyukhur.com/trackback/81

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

공지사항

카테고리

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

태그목록

달력

링크

최근에 달린 레몬펜 쪽지

« 2008/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31