 |
|
|
난이도 : 초급
Elliotte Harold, 교수, Polytechnic University
2008 년 4 월 01 일
HTML 5는 20세기 이후 처음으로 HTML에 새로운 요소를 추가했습니다. 새 구조 요소로는 aside, figure, section이 있으며 새 인라인 요소로는 time, meter, progress가 있습니다. 또한 새로운 내장 요소로는 video와 audio가 있으며 새로운 대화형 요소로는 details, datagrid, command가 있습니다.
HTML은 1999년 HTML 4를 마지막으로 발전을 멈추었다. W3C는 HTML 기반 문법을 SGML(Standard Generalized Markup Language)에서 XML로 변경하고 SGV(Scalable Vector Graphics), XForm, MathML 등 완전히 새로운 마크업 언어를 개발하는 데 노력을 기울였다. 브라우저 개발업체는 탭과 RSS 리더 같은 브라우저 기능에 초점을 맞추었다. 웹 디자이너들은 CSS와 자바스크립트를 배운 후 기존 프레임워크 상에서 Ajax(Asynchronous JavaScript + XML)를 사용하여 응용 프로그램을 개발하기 시작했다. 하지만 HTML 자체는 지난 8년 동안 아무런 진전도 보이지 않았다.
|
자주 사용하는 약어
- CSS: Cascading Style Sheets
- HTML: Hypertext Markup Language
- W3C: World Wide Web Consortium
- XML: Extensible Markup Language
| |
그런데 최근에 이르러 잠자던 사자가 깨어났다. 브라우저 시장에서 주요 3대 주자인 애플, 오페라, 모질라 재단이 WhatWG(Web Hypertext Application Technology Working Group)를 결성하여 기존 HTML을 개선하겠다고 나섰다. 더욱 최근에는 W3C가 이러한 움직임을 감지하고 비슷한 구성원을 모아 차세대 HTML 개발 대열에 동참했다. 결국은 두 대열이 하나로 합쳐지리라 생각한다. 아직까지 구체적인 내용은 논쟁할 여지가 많이 남았지만, 다음 HTML 버전의 전체적인 윤곽은 점차 자리를 잡아가고 있다.
(HTML 5 혹은 Web Applications 1.0이라 부르는) 새 HTML 버전은 1999년 얼음에 동결되었다가 막 해동된 원시인 웹 디자이너들도 금방 익숙해지리라 생각한다. 새 버전은 이름 공간(namespace)이나 스키마(schema)가 없다. 요소를 닫지 않아도 괜찮다. 브라우저는 오류에 관대하다. p는 여전히 p이고 table은 여전히 table이다.
그렇지만 동시에 막 해동된 웹 디자이너들은 다소 혼란스럽고 새로운 요소도 접하게 된다. 그렇다. div 같은 옛 친구는 그대로지만 section, header, footer, nav가 새롭게 등장했다. em, code, strong도 그대로지만 meter, time, m이 생겨났다. img와 embed도 그대로 사용하지만, 이제 video와 audio도 있다. 그러나 해동되었던 원시인이라도 조금만 꼼꼼히 들여다 보면, 새로운 요소가 그리 새로운 개념은 아니라는 사실이 드러난다. 대다수는 1999년에도 필요했으나 존재하지 않았던 요소일 뿐이다. 기존 요소와 비교하면서 살펴보면 새 요소를 배우기가 전혀 어렵지 않다. 오히려 Ajax나 CSS보다 이해하기 더 쉽다.
마지막으로, (HTML과 마찬가지로 1999년에서 멈춘) 윈도우 98이 돌아가는 300MHz 노트북에서 새 HTML 페이지를 띄워보면 Netscape 4나 Windows® Internet Explorer® 5에서도 페이지가 문제 없이 뜬다. 놀랍지 않은가. 물론 브라우저가 새 요소 태그를 제대로 인식하지 못하겠지만 그래도 페이지는 뜨고 내용은 모두 담겨 있다.
이것은 우연의 일치가 아니다. 처음부터 설계를 이렇게 했다. 브라우저가 HTML 5를 지원하지 않는 경우 HTML 5는 우아하게 자신의 버전을 낮춘다. 이유는 간단하다. 우리 모두가 1999년에서 막 해동된 원시인이기 때문이다. 현재 브라우저는 탭, CSS, XmHttpRequest를 지원하지만 HTML 렌더링 엔진은 1999년 기술 그대로다. 기존 사용자 기반을 고려하지 않고서는 웹을 진화시키기 어렵다. HTML 5는 이러한 사실을 이해한다. 그래서 HTML 5는 현재 페이지 작성자들에게 실질적인 이익을 제공함과 동시에 사용자들이 브라우저를 서서히 판올림하면서 그 수가 늘어갈 미래 페이지 작성자들에게 더 큰 이익을 약속한다. 이러한 사실을 염두에 두고 이제 HTML 5를 둘러보자.
구조
흔히 형식이 잘 갖춰진(well-formed) HTML 페이지라도 구조가 부실하기에 처리하기가 쉽지 않다. 처음부터 페이지를 분석하여 구역(section)이 나뉘는 지점을 찾아내야 한다. 일반적으로 사이드바, 바닥글, 머리글, 탐색 메뉴, 기본 내용 구역, 개별 내용은 모두 다용도 div 요소로 나눠진다. HTML 5는 자주 사용하는 구조를 표현하도록 새로운 요소를 제공한다.
section: 책에서 부나 장, 장에서 절 등 근본적으로 HTML 4에서 heading을 사용하던 내용은 무엇이나 가능하다.
header: 페이지에 표시하는 페이지 머리글로, head 요소와 다르다.
footer: 잔글씨로 표시하는 페이지 바닥글로, 전자편지 서명 등이 들어간다.
nav: 다른 페이지를 가리키는 링크 모음이다.
article: 블로그, 잡지, 개요 등에 포함되는 개별 항목을 가리킨다.
예를 들어 오늘날에 사용하는 전형적인 블로그 페이지를 살펴보자. Listing 1에서 보듯이 페이지 상단에는 머리글, 하단에는 바닥글, 항목 몇 개, 탐색 메뉴, 사이드바가 있다.
Listing 1. 오늘날 전형적인 블로그 페이지
<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/">« 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> |
들여쓰기에 신경을 쓴다 해도 div가 여러 차례 중첩되어 꽤나 복잡하다. 반면 Listing 2에서 보듯이 HTML 5에서는 페이지가 좀더 구조적이다.
Listing 2. 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/">« 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> |
더 이상 div가 필요하지 않다. class 속성으로 구역 종류를 나타낼 필요도 없다. 표준 이름을 보면 무슨 구역인지 바로 드러난다. 이는 오디오, 모바일 폰, 기타 비표준 브라우저에서 특히 중요하다.
의미적 블록 요소
구조적 요소 외에도 HTML 5는 순전히 의미적으로 사용하는 블록 요소를 제공한다.
나는 책과 기사에서 첫 두 요소를 항상 사용한다. 세 번째 요소는 개인적으로 별로 사용하지 않으나 텍스트에 많이 사용한다.
aside
aside 요소는 참고, 팁, 사이드바, 독립 인용(pullquote), 괄호 삽입구 등 본문 흐름에서 벗어나는 문장을 나타낸다. 예를 들어 Listing 3에서 보듯이 developerWorks 기사는 사이드바를 흔히 표로 구현한다.
Listing 3. developerWorks HTML 4 사이드바
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
</td></tr></tbody></table><br>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</td></tr></table> |
HTML 5에서는 Listing 4처럼 좀더 합리적으로 구현할 수 있다.
Listing 4. developerWorks HTML 5 사이드바
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>
|
사이드바가 놓일 위치는 CSS에서 힌트를 얻어 브라우저가 판단한다.
figure
figure 요소는 이미지 블록과 제목을 표현한다. 예를 들어 developerWorks 기사는 Listing 5와 같은 HTML 코드를 많이 쓴다. 결과는 그림 1과 같다.
Listing 5. developerWorks HTML 4 그림
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />
|
Figure 1. Mozilla XForms 다이얼로그 설치
HTML 5에서는 Listing 6과 같이 좀더 의미 있게 구현할 수 있다.
Listing 6. developerWorks HTML 5 그림
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>
|
가장 중요하게, figure 요소를 사용하면 브라우저는 (특히 스크린 리더는) 이미지와 이미지 제목을 분명하게 연관짓게 된다.
figure 요소를 반드시 이미지에만 사용하라는 법은 없다. audio, video, iframe, object, embed 등과 같은 요소에 제목을 붙일 때도 figure 요소를 사용하면 편리하다.
dialog
dialog 요소는 여러 사람 간에 일어나는 대화를 표현한다. HTML 5는 dt 요소를 연설자로, dd 요소는 연설로 중복정의(overload)한다. 따라서 HTML 5를 지원하지 않는 브라우저에서도 페이지가 어느 정도 모양새를 갖춘다. Listing 7은 갈렐레오의 “주요한 2대 체계에 대한 대화(Dialogue Concerning the Two Chief World Systems)”라는 다소 유명한 연설이다.
Listing 7. HTML 5로 표현한 갈렐레오의 대화
<dialog>
<dt>Simplicius </dt>
<dd>According to the straight line AF,
and not according to the curve, such being already excluded
for such a use.</dd>
<dt>Sagredo </dt>
<dd>But I should take neither of them,
seeing that the straight line AF runs obliquely. I should
draw a line perpendicular to CD, for this would seem to me
to be the shortest, as well as being unique among the
infinite number of longer and unequal ones which may be
drawn from the point A to every other point of the opposite
line CD. </dd>
<dt>Salviati </dt>
<dd><p> Your choice and the reason you
adduce for it seem to me most excellent. So now we have it
that the first dimension is determined by a straight line;
the second (namely, breadth) by another straight line, and
not only straight, but at right angles to that which
determines the length. Thus we have defined the two
dimensions of a surface; that is, length and breadth. </p>
<p> But suppose you had to determine a height—for
example, how high this platform is from the pavement down
below there. Seeing that from any point in the platform we
may draw infinite lines, curved or straight, and all of
different lengths, to the infinite points of the pavement
below, which of all these lines would you make use of? </p>
</dd>
</dialog> |
dialog 요소의 정확한 문법은 아직도 논의가 분분하다. 어떤 사람들은 dialog 요소 안에 (무대 지시문처럼) 대화가 아닌 문장을 추가하고 싶어 한다. 어떤 사람들은 dt와 dd를 중복정의(overload)해서는 안 된다고 주장한다. 그러나 대화를 의미적으로 표현하는 요소가 필요하다는 사실에는 대다수가 동의한다. 정확한 문법에는 동의하지 못할지라도 말이다.
의미적 인라인 요소
HTML 4에는 var, code, kbd, tt, samp라는, 컴퓨터 코드를 살짝 변형한 인라인 요소 5개가 있었다. 그러나 시간이나 숫자나 야유 등과 같이 기본적인 속성을 표현할 방법은 없었다. HTML 5가 제공하는 새 인라인 요소는 기술자와 보통 저작자 사이에 존재하는 불균형을 바로 잡아준다.
mark
m 요소는 강조할 필요까진 없으나 “주목”해야 할 문구를 표현한다. 책에서 형광색 펜으로 표시하는 부분에 해당한다. 구글 “저장된 페이지”가 아주 적당한 예다. “저장된 페이지”를 열면 검색 용어가 다른 색으로 표시된다. 예를 들어 “Egret”을 검색하면 구글 “저장된 페이지”는 다음 코드를 사용할 수 있다.
The Great <m>Egret</m> (also known as the
American <m>Egret</m>) is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>. |
요소 이름은 아직 논쟁 중이다. 명세가 나오기 전에 m을 mark로 바꿀지도 모른다.
time
time 요소는 특정한 시각을 표현한다. 예를 들어 5:35 P.M., EST, April 23, 2007을 다음과 같이 표현할 수 있다.
<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p> |
time 요소를 사용하면 브라우저나 기타 응용 프로그램이 HTML 페이지에서 시각을 인식할 수 있다. 요소 내용은 어떤 형식이라도 상관이 없다. 그러나 각 time 요소는 datetime 속성을 사용하여 시스템이 인식하는 시각 형식을 지정해야 한다.
<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p> |
시스템이 인식하는 시각 형식을 사용하면 검색 엔진, 달력 프로그램 등과 같은 응용 프로그램에서 시각을 인식하기 쉬워진다.
meter
meter 요소는 특정한 범위에 속하는 숫자 값을 표현한다. 예를 들면 월급, 프랑스 선거에서 르펜의 득표율, 테스트 점수 등에 사용한다. 여기서는 Software Development 2007에서 구글 프로그래머가 제공한 자료에 meter를 사용했다.
<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p> |
meter 요소를 사용하면 브라우저나 기타 응용 프로그램이 HTML 페이지에서 양을 인식할 수 있다. 요소 내용은 어떤 형식이라도 상관이 없다. 그러나 각 meter 요소는 최대 6개 속성을 사용하여 시스템이 인식하는 숫자 값을 지정해야 한다.
value
min
low
high
max
optimum
각 속성에는 관련 범위를 묘사하는 숫자를 지정해야 한다. 예를 들어 기말 고사 점수는 다음과 같이 표현할 수 있다.
<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p> |
위 코드는 총점 100점에 실제 점수는 88.7이라는 사실을 나타낸다. 가능한 최저 점수는 0인데 실제 최저 점수는 65점이다. 이상적인 최고 점수는 100점이지만 실제 점수는 96점이다. 응용 프로그램은 이 정보를 측정기에 표시하거나 툴팁에 추가하는 등 다양하게 표현할 수 있다. 하지만 대개는 다른 인라인 요소와 같은 방식으로 표현하리라 생각한다.
progress
progress 요소는 현재 진행 중인 상태를 표현한다. GUI 응용 프로그램에서 사용하는 진행 상태 표시 막대와 동일하다. 예를 들어 파일을 다운로드한 정도나 영화가 남은 시간을 progress 요소로 표현하면 간편하다. 다음 코드는 다운로드를 33% 완료했음을 나타낸다.
<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p> |
value 속성은 현재 값을 나타내며, max 속성은 최대 값을 나타낸다. 위 코드는 총 460만 3807바이트 중 현재 153만 4602바이트를 다운로드했음을 뜻한다.
max 속성을 생략하면 무한한 진행 상태 막대가 표시된다.
작업이 계속됨에 따라 진행 상태 막대를 동적으로 갱신하려면 자바스크립트를 사용한다. progress 요소는 동적으로 표현해야 흥미롭다.
내장된 미디어
웹에서 비디오는 커다란 인기를 끌고 있지만, 대다수 웹 비디오 재생기는 독점적인 기술을 사용한다. 유튜브는 플래시를, 마이크로소프트는 윈도우 미디어(Windows Media®)를, 애플은 퀵타임을 사용한다. 그러다 보니 모든 브라우저에서 돌아가는 비디오 내장 마크업이 없다. 그래서 WhatWG는 임의의 비디오 형식을 내장하는 새 video 요소를 제안했다. 예를 들어 내 퀵타임 영화를 다음과 같이 내장할 수 있다.
<video src="http://www.cafeaulait.org/birds/sora.mov" />
|
특정 형식과 코덱을 선호할지 여부는 아직도 논의 중이다. 아마 Ogg Theora를 필수로 만들거나 적어도 강력히 권장할 가능성이 크다. 퀵타임과 같은 독점 형식이나 MPEG-4와 같이 특허가 걸린 형식은 선택으로 남겨두리라 생각한다. 하지만 GIF, JPEG, PNG 형식이 BMP, X-Bitmap, JPEG 2000 등 다른 형식을 제치고 img 요소가 선호하는 이미지 형식으로 자리 잡았듯이, video 요소가 선호하는 비디오 형식도 결국은 시장에서 판가름 나리라 믿는다.
video에 상응하는 audio 형식도 제안되었다. 예를 들어 다음과 같이 웹 페이지에 배경 음악을 깔 수 있다.
<audio src="spacemusic.mp3"
autoplay="autoplay" loop="20000" />
|
autoplay 속성은 페이지를 브라우저에 올리자마자 사용자 요청을 기다리지 말고 음악을 시작하라는 뜻이다. 그런 다음 루프를 2000번 돌 때까지 (혹은 사용자가 윈도우를 닫거나 다른 페이지로 이동할 때까지) 음악을 계속 연주한다. 물론, 브라우저는 내장 미디어에 대해 소리를 없애거나(mute) 재생을 일시중지하는(pause) 기능을 제공해야 한다. 페이지 작성자가 페이지에 이런 기능을 넣었든 넣지 않았든 상관 없이 브라우저는 기본적으로 두 기능을 제공해야 한다.
브라우저는 WAV 형식을 지원해야 한다. 또한 MP3와 같은 형식을 지원해도 좋다.
기존 브라우저는 audio/video 마크업을 지원하지 않으며 시각/청각 장애자는 비디오/오디오를 시청/청취하지 못하므로, 비디오와 오디오 내용을 설명하는 마크업이 추가될지도 모른다. 이 정보는 검색 엔진이 반기리라 생각한다. 이상적으로는 비디오 대본이나 오디오 전사본이면 가장 좋다. 예를 들어 Listing 8은 존 F. 케네디 대통령의 취임 연설을 구현한 코드다.
Listing 8. HTML 5로 표현한 존 F. 케네디 취임 연설
<audio src="kennedyinauguraladdrees.mp3">
<p>
Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
President Eisenhower, Vice President Nixon, President Truman,
Reverend Clergy, fellow citizens:
</p>
<p>
We observe today not a victory of party, but a celebration of
freedom -- symbolizing an end, as well as a beginning --
signifying renewal, as well as change. For I have sworn before
you and Almighty God the same solemn oath our forebears
prescribed nearly a century and three-quarters ago.
</p>
<p>
The world is very different now. For man holds in his mortal
hands the power to abolish all forms of human poverty and all
forms of human life. And yet the same revolutionary beliefs for
which our forebears fought are still at issue around the globe --
the belief that the rights of man come not from the
generosity of the state, but from the hand of God.
</p>
<p>
...
</p>
</audio> |
상호작용
HTML 5는 Web Applications 1.0의 그늘에 속한다. HTML 5는 그 언저리에 몇 가지 새 요소를 추가해 웹 페이지와 사용자 사이 상호작용 정도를 높인다.
details
datagrid
menu
command
위 요소는 사용자 동작과 선택에 따라 페이지 내용을 바꾼다. 이 때 서버에서 새 페이지를 읽어들이지 않는다.
details
details 요소는 기본적으로 표시되지 않는 상세정보를 가리킨다. 선택적인 legend 요소로 상세정보를 요약해도 좋다. details의 적합한 사용처는 각주(footnote)나 후주(endnote)다. 예를 들어 다음 코드를 보자.
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>
|
페이지를 표시하는 방법은 정확히 명시되지 않았다. 브라우저에 따라 1) 각주, 2) 후주, 3) 툴팁으로 표시할 수 있다.
각 details 요소에 open 속성을 지정해도 된다. open 속성을 지정하면 상세정보가 기본으로 표시된다. open 속성이 없으면 사용자가 요청할 때까지 상세정보는 숨겨진다. 어느 쪽이든 사용자가 아이콘/표시기를 클릭하여 상세정보를 표시하거나 숨길 수 있다.
datagrid
datagrid 요소는 그리드 컨트롤을 제어한다. 주로 정적 자료를 표현하는 기존 표와는 달리 사용자나 스크립트가 동적으로 갱신하는 트리, 목록, 표에 사용한다.
datagrid는 초기 자료를 요소 내용에서 가져온다. 요소 내용은 table, select 등 HTML 그룹 요소라면 무엇이든 가능하다. 예를 들어 Listing 9는 datagrid로 성적표를 구현한다. 여기서는 table에서 초기 자료를 가져온다. 좀더 단순한 1차원 자료라면 table 대신 select를 사용해도 좋다. 다른 HTML 요소를 사용하면 datagrid는 자식 하나를 행 하나로 가져온다.
Listing 9. 성적표 datagrid
<datagrid>
<table>
<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
</table>
</datagrid> |
datagrid가 일반 표와 다른 점이라면, 이제 사용자는 행과 열과 셀을 선택하고, 행과 열과 셀을 축소하고, 셀을 편집하고, 행과 열과 셀을 삭제하고, 그리드를 정렬하는 등 브라우저 내에서 자료를 직접 조작할 수 있다. 자바스크립트 코드는 수정된 내용을 기억한다. Listing 10에서는 이러한 기능을 지원하기 위해 DOM(Document Object Model)에 HTMLDataGridElement 인터페이스를 추가했다.
Listing 10. HTMLDataGridElement
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
}; |
DOM을 사용해 자료를 동적으로 메모리에 올려도 된다. 즉 datagrid에 초기 자료를 제공하는 table이나 select가 없어도 좋다. 대신, Listing 11과 같이 DataGridDataProvider 개체로 자료를 제공한다. 이 방법을 사용하면 데이터베이스로부터 XmlHttpRequest나 자바스크립트가 통신할 수 있는 어느 곳에서든 자료를 가져올 수 있다.
Listing 11. DataGridDataProvider
interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);
void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
}; |
menu와 command
menu 요소는 적어도 버전 2부터 HTML에 존재했다. HTML 4에서 사용하지 않게 되었으나 HTML 5에서 새로운 모습으로 돌아왔다. HTML 5에서 menu는 command 요소를 포함하는데, 각 요소는 즉각적인 동작을 유발한다. 예를 들어 Listing 12는 팝업 경고를 띄우는 메뉴다.
Listing 12. HTML 5 메뉴
<menu>
<command onclick="alert('first command')" label="Do 1st Command"/>
<command onclick="alert('second command')" label="Do 2nd Command"/>
<command onclick="alert('third command')" label="Do 3rd Command"/>
</menu> |
checked="checked" 속성을 지정하면 명령은 확인란이 된다. radiogroup 속성을 지정하면 확인란이 라디오 버튼(radio button)으로 바뀐다. 라디오 버튼 그룹을 정의할 때는 같은 그룹으로 묶을 명령에 같은 radiogroup 속성 값을 지정한다.
간단한 명령 목록 외에 도구 모음(toolbar)이나 팝업 컨텍스트 메뉴에도 menu 요소를 사용한다. 이 때는 type 속성을 toolbar나 pop으로 지정한다. 예를 들어 Listing 13은 WordPress와 같은 블로그 편집기에서 흔히 사용하는 도구 모음이다. icon 속성은 버튼에 그림을 입힌다.
Listing 13. HTMl 5 도구 모음
<menu type="toolbar">
<command onclick="insertTag(buttons, 0);" label="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);" label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<command onclick="insertTag(buttons, 3);" label="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);" label="del" icon="del.gif"/>
<command onclick="insertTag(buttons, 5);" label="ins" icon="insert.gif"/>
<command onclick="insertImage(buttons);" label="img" icon="image.gif"/>
<command onclick="insertTag(buttons, 7);" label="ul" icon="bullet.gif"/>
<command onclick="insertTag(buttons, 8);" label="ol" icon="number.gif"/>
<command onclick="insertTag(buttons, 9);" label="li" icon="item.gif"/>
<command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
<command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu> |
메뉴 제목은 label 속성을 사용한다. 예를 들어 Listing 14는 편집 메뉴다.
Listing 14. HTML 5 편집 메뉴
<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> |
메뉴를 다른 메뉴 아래 정의해 메뉴 계층을 만들어도 무방하다.
결론
HTML 5는 미래 웹의 일부다. HTML 5가 제공하는 새로운 요소는 마크업을 더욱 간단하고 명료하게 만든다. 그만큼 웹 페이지도 더욱 명료해진다. 앞으로도 여전히 div와 span을 사용하겠지만, 예전만큼 광범위하게 사용하지는 않으리라 생각한다. 많은 경우 더 이상 div나 span을 사용할 필요가 없을 테니까.
당장은 모든 브라우저가 새로운 요소를 지원하지는 않겠지만, 처음 HTML이 창안된 이후에 나왔던 img, table, object도 모두 같은 과정을 거쳤다. 점차 새로운 요소를 지원하는 브라우저가 늘어나리라 믿는다. 비록 새로운 요소를 지원하지 않아도 기존 브라우저에서 HTML 5 페이지를 읽기에 무리가 없다. 인식하지 못하는 요소를 무시하는 HTML 방식 덕택이다. 최신 브라우저를 갖춘 사용자는 좀더 멋진 경험을 하겠지만, 누구도 페이지를 못 읽는 불편함은 겪지 않으리라.
새 기능이 나오기까지 8년은 참으로 긴 시간이었다. 특히나 급격히 변하는 웹 세상에서는 더욱 오랜 시간이었다. HTML 5는 넷스케이프나 마이크로소프트 등 초창기 업체가 격주로 새 요소를 내놓던 초기 시절의 흥분을 어느 정도 되살렸다. 그러면서도 모두가 사용하기 쉽도록 상호운용성을 충분히 고려하여 아주 신중하게 요소를 정의했다. 미래가 밝아 보인다.
참고자료 교육
- HTML의 미래, Part 1: WHATWG (Edd Dumbill, developerWorks, 2005년 12월): 개발자, 설계자, 저작자, 개발업체, 표준 단체 등이 제안하는 여러 가지 HTML 미래를 둘러본다.
- The future of HTML, Part 2: XHTML 2.0 (Edd Dumbill, developerWorks, 2006년 1월): Ajax에서 드러나듯이 리치 클라이언트를 점점 더 요구하는 현재 흐름에 부응하여 W3C가 제안하는 정책과 차세대 XHTML 버전을 살펴본다.
- XHTML 1.0: Marking up a new dawn (Molly Holzschlag, developerWorks, 2006년 1월): XHTML 1.0의 요구사항인 형식성(well-formedness)과 유효성(validity)을 살펴본다.
- WhatWG and HTML 5 FAQ: WhatWG이 무엇이고 왜 필요한지 등 자주 묻는 질문에 답하는 사이트다.
- Web Applications 1.0: 현재 작업 중인 HTML 5 명세 초안을 살펴본다.
- Dialogue Concerning the Two Chief World Systems: Stillman Drake가 번역하고 S. E. Sciortino가 주석을 단 버전이다.
- Ogg Theora: 차세대 오픈 비디오 형식을 살펴본다.
- IBM XML 인증: XML과 관련 기술 분야에서 IBM 인증 개발자가 되는 방법을 알려준다.
- XML과 XML 스키마: 기사와 팁, 튜토리얼, 표준, IBM 레드북 등 다양한 기술 자료를 제공한다.
- developerWorks 기술 행사와 웹 캐스트: 최신 기술 동향을 파악할 수 있다.
제품 및 기술 얻기
토론
필자소개
|
|
|
|
Elliotte Rusty Harold는 뉴 올리언즈 태생이다. 원조 검프 스프 맛을 찾아 뉴 올리언즈를 자주 방문하지만, 현재 브룩클린 근처 프로스펙트 하이츠에서 아내 베스와 고양이 두 마리를 키우며 폴리테크닉 대학 전자계산학과 조교수로 자바와 객체 지향 프로그래밍을 강의하고 있다. 그가 운영하는 Cafe au Lait 사이트는 인터넷에서 가장 인기 있는 자바 사이트 중 하나가 되었고, 또 다른 사이트 Cafe con Leche 역시 가장 대중적인 XML 사이트 중 하나가 되었다. 올 봄에는 애디슨 웨슬리 출판사를 통해 Refactoring HTML을 출판할 예정이다. | |
