종합하기: 샘플 HTML5/CSS3 페이지
이 단계에서는 HTML5와 CSS3에서 제공하는 멋진 새 기능을 사용하는 웹 페이지를 직접 작성하기 시작한다. 이번 섹션에서는 새로 추가된 다양한 기능이 포함된 HTML 페이지를 작성한다. 이번 섹션에서는 HTML 페이지의 개발 과정을 다음과 같은 서브섹션으로 구분한다.
- 기본 HTML5 페이지의 구조
- 새로운 시맨틱 요소의 사용
- <video> 요소에 대한 소개
- 웹 양식 개선사항
- <canvas> 요소와 2D 드로잉 API
전체 소스는 하나의 HTML 파일(index.html)로 작성된다(다운로드 참조). 컴퓨터의 어느 위치에서나 이 파일을 열 수 있으며 로드하기 위해 웹 서버로 전개할 필요가 없다. 일부 브라우저에서는 로컬에서의 스크립트 실행과 관련된 경고 메시지가 표시될 수 있으므로 필요하면 동적 스크립팅 기능이 실행 중인지 확인한다.
이 과정에서 HTML 페이지에 적용할 CSS 규칙을 외부 스타일시트 파일(styles.css)에 추가한다. 이 샘플 페이지에서는 border-radius, text-shadow 및 box-shadow와 같은 새로운 CSS3 특성에 대한 몇 가지 예를 살펴본다.
이 정도만 알아도 일상적인 용도로 사용하기에는 충분하다. 그러면 HTML5를 사용해 보도록 하자.
기본 HTML5 페이지
알고 있는 바와 같이 웹 브라우저는 HTML 문서에 올바른 doctype이 있는지에 따라 다양한 모드로 동작한다. 올바른 doctype이 없는 경우, 브라우저는 쿼크 모드로 동작하며 일부 비표준 기능을 유지하여 역호환성을 지원한다. 올바른 doctype이 있는 경우, W3C와 IETF 표준에 따라 브라우저는 표준 모드로 동작한다.
HTML5의 doctype은 <!doctype html>과 같이 매우 단순하다.
작성한 모든 HTML5 페이지의 맨 위에 이 행을 삽입해야 한다. 계속해서 index.html 페이지의 기본적인 구조를 정의해 보도록 하자. 이 페이지에 대한 코드는 Listing 1에 있다.
Listing 1. 기본적인 HTML5 문서 구조
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
|
최근의 XHTML 특징과는 다르게 첫 행에 있는 <html> 태그에는 더 이상 xmlns나 xml:lang 속성이 필요 없으며 lang 속성만 있으면 된다. 마찬가지로 <meta> 요소는 HTML 페이지의 문자 인코딩을 정의하는 데 필요한 새로운 속기 속성 문자 세트로 구성되어 있다. 이러한 변화로 인해 코드 작성이 수월해질 뿐만 아니라 단순한 작업을 수행하는 데 필요한 코드 수도 줄어든다. 이전 방식도 여전히 유효하다.
또한, <link> 요소에 type 속성이 없는 이유가 궁금할 수도 있다. 현재 CSS에서는 스타일시트 유형만을 지원하며 모든 최신 브라우저에서는 아무것도 지정하지 않으면 유형이 text/css라고 가정하기 때문에 type 속성이 필요 없다. 또한, 원하는 경우에는 type 속성을 제공할 수 있다.
Listing 1에서 마지막으로 살펴볼 사항은 <script> 요소이며 이 요소는 외부에서 호스트되는 Javascript 파일(html5.js)을 로드한다. Microsoft Internet Explorer 브라우저 버전 8에서도 새 HTML5 요소를 지원하지 않으며 이 브라우저는 <article>, <section>, <header> 등과 같은 요소를 인식하지 못한다. 이 브라우저에서는 이러한 요소가 인식되지 않을 뿐만 아니라 이러한 요소에 양식이 지정되지도 않는다. 이러한 문제점을 해결할 방책은 Javascript 함수 document.createElement()를 사용하여 각 태그를 처리할 수 있는 더미 요소를 작성하는 것이다. 이 스크립트는 새로 추가된 모든 HTML5 요소를 대상으로 이러한 작업을 수행하므로 사용자는 이러한 작업을 신경 쓰지 않아도 된다. 이 스크립트를 모든 HTML5 페이지에 삽입할 것을 권장한다.
그런 다음, 새로운 시맨틱 요소 중 일부를 HTML 페이지에 추가하여 이 페이지의 시각적 구조를 작성한다. 또한, HTML 페이지가 더 멋지게 보일 수 있도록 몇 가지 스타일시트 규칙을 적용한다.
새로운 시맨틱 요소의 사용
새 시맨틱 HTML5 요소를 어떻게 사용해야 하는지 확인하기 위해 이제 이러한 요소를 index.html 파일에 추가한다. 이러한 요소의 기본 구조는 대략 다음과 같다.
- header
- nav
- article
- footer
보는 바와 같이 페이지 맨 앞에는 header가 있고 그다음에는 nav, articel, footer가 순서대로 배치된다. header에는 hgroup 요소를 사용하여 다수의 표제를 배치할 수 있다. article 요소 아래에는 header와 section 요소가 있으며 section 요소에도 자체 header 요소가 있다. 이러한 코드는 Listing 2에 있으며 이 코드를 Listing 1의 처음과 마지막 <body> 태그 사이에 추가해야 한다.
Listing 2. HTML5 시맨틱 요소의 사용
<header>
<hgroup>
<h1>Company Name</h1>
<h2>An example of HTML5 and CSS3 in action</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<header>
<time datetime="2010-01-12" pubdate>
<span>Jan</span> 12
</time>
<h1>
<a href="#" title="Link to this post"
rel="bookmark">Article Heading</a>
</h1>
</header>
<p>This is an article that demonstrates some of the new features
that HTML5 and CSS3 has to offer. This article contains several sections, each
with its own heading, as well as a video element which will play a video without
Flash on browsers that support it.</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>This is an example of a basic section of a document.
A section can refer to different parts of a document, application, or page.
According to the draft W3C spec, HTML5 sections usually have headings.</p>
</section>
</article>
<footer>
<p>© 2009 Company Name. All rights reserved.</p>
</footer>
|
Listing 2에 있는 코드는 별다른 설명이 필요 없다. 기본 <header> 요소는 두 개의 표제, 즉 제목 <h1> 요소와 부제 <h2> 요소가 있는 <hgroup> 요소로 구성된다. 기본 <nav> 요소에는 세 개의 항목이 순서와 관계없이 표시되어 있으며 각 항목은 웹 사이트의 가상 페이지를 가리키는 링크이다. <article> 요소에는 기사의 공개 날짜를 지정하는 <time> 요소가 포함된 자체 <header> 요소가 있다. 이 요소에는 datetime 속성이 포함되어 있으며 이 속성은 컴퓨터에서 읽기 쉬운 표준화된 게시 날짜 양식을 지정한다. time 요소의 내용은 "Jan 12"로 사용자가 쉽게 확인할 수 있다. pubdate 속성은 해당 기사의 공개 날짜를 표시한다.
이 header 요소 밑에는 일반적인 HTML 단락이 있고 이 요소 다음에는 새로운 <section> 요소가 있으며 이 section 요소에는 해당 섹션의 제목과 단락으로 구성된 <header> 요소가 포함되어 있다. 본 튜토리얼의 나머지 섹션에서는 작성한 페이지의 추가 영역에 해당하는 섹션을 추가로 작성한다.
CSS를 사용하여 이 페이지의 양식을 아직 지정하지 않았기 때문에 브라우저에서 이 페이지를 열면 모양이 좋지않다. 몇 가지 양식을 추가하여 이 페이지를 좀 더 멋지게 만들어 보자. Listing 3에 있는 코드를 styles.css 파일에 추가한다.
Listing 3. 새 시맨틱 HTML 5 요소에 적용할 CSS 양식
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 480px; margin: 0px auto;
}
header h1 {
font-size: 36px; margin: 0px;
}
header h2 {
font-size: 18px; margin: 0px; color: #888;
font-style: italic;
}
nav ul {
list-style: none; padding: 0px; display: block;
clear: right; background-color: #666;
padding-left: 4px; height: 24px;
}
nav ul li {
display: inline; padding: 0px 20px 5px 10px;
height: 24px; border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3; text-decoration: none;
font-size: 13px; font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px; display: block; width: 26px;
padding: 2px; text-align: center; background-color: #993333;
color: #fff; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px; float: left;
margin-left: 14px; text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center; font-size: 12px;
color: #888; margin-top: 24px;
}
|
대부분 이러한 CSS 규칙에는 한동안 CSS에서 사용할 수 있었던 특성이 포함되어 있으며 CSS 규칙 article > header time에 Mozilla와 WebKit 기반 브라우저의 브라우저별 특성이 포함된 border-radius 특성이 있다는 것을 확인할 수 있다. 이 특성을 지원하는 Firefox, Safari, Chrome과 같은 브라우저에서는 date/time 상자의 모서리가 둥글게 표시된다.
또한, article > header h1 규칙에 text-shadow 특성이 사용되었다는 것을 확인할 수 있다. 대부분의 최신 브라우저에서 이러한 특성을 지원한다.
이 섹션에서 소개한 두 가지 CSS3 특성의 장점은 단계적으로 기능을 축소할 수 있다는 점이다. 다시 말해서, 방문자의 웹 브라우저에서 이러한 새로운 특성이 지원되지 않는 경우에는 이 특성은 간단히 무시되며 해당 요소는 기타 지원되는 특성에 따라 양식이 지정된다. 이러한 내용이 포함된 페이지는 그림 2에 있는 스크린샷과 같은 형태로 표시된다. (적어도 Mac OS X의 Safari 4에서는 이렇게 보인다.)
그림 2. 작동 중인 시맨틱 HTML5 요소
다음은 <video> 요소와 이 요소를 사용하여 HTML5 페이지에 Theora 비디오 파일을 삽입하는 방법을 살펴본다.
<video> 요소에 대한 소개
이제, index.html 파일에 브라우저에서 제공하는 플레이백 제어 세트와 비디오를 추가한다. 이 샘플에 삽입된 비디오는 Theora 비디오로 Firefox와 Google Chrome에서만 재생된다. 현재, Safari에서는 H.264로 인코딩된 비디오만 지원한다. Listing 2에 있는 마지막 닫기 </section> 태그와 닫기 </article> 태그 사이에 Listing 4의 코드를 추가한다.
Listing 4. 페이지에 비디오 추가하기
<section>
<header>
<h1>This is a video section</h1>
</header>
<p>
<video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
<div class="no-html5-video">
<p>This video will work in Mozilla Firefox or Google
Chrome only.</p>
</div>
</video>
</p>
</section>
|
보는 바와 같이 먼저, 새로운 섹션을 작성하여 HTML5 페이지에 비디오를 표시한다. 이 섹션에는 header 요소가 있으며 그 뒤에 비디오가 삽입된다. 여기서 사용하는 비디오는 트랜스포머 1편의 예고편이며 src 속성을 사용하여 외부 웹 사이트에서 이 비디오를 로드한다. controls 속성은 비디오 재생에 필요한 브라우저 표준 제어를 표시하도록 해당 브라우저에 명령한다. 그리고 autoplay 속성은 비디오를 자동으로 재생하도록 브라우저에 명령한다.
열기와 닫기 <video> 태그 사이에 no-html5-video 클래스가 지정된 <div> 요소를 작성했으며 이 요소는 Theora 비디오 코덱이나 <video> 요소를 지원하지 않는 브라우저를 사용하여 이 비디오를 보려고 하는 사용자에게 메시지를 표시한다.
브라우저에서 이 페이지를 실행하기 전에 styles.css 페이지에 몇 가지 새로운 규칙을 추가하자. styles.css 파일의 맨 밑에 Listing 5에 있는 규칙을 추가하면 된다.
Listing 5. 비디오 섹션을 처리하기 위한 CSS 규칙
article > section video {
width: 480px; height: 200px;
}
article > section div.no-html5-video,
article > section div#no-canvas {
width: 480px; height: 40px; border: 1px solid #993333;
text-align: center; color: #993333; font-size: 13px;
font-style: italic; background-color: #F7E9E9;
}
|
이 규칙은 비디오 컨테이너 요소의 크기를 정의할 뿐만 아니라 HTML5 비디오나 Theora 형식을 지원하지 않는 브라우저를 사용하는 방문객에게 표시할 오류 메시지를 지정한다. Firefox나 Chrome에서 이 페이지를 열면 다음과 같은 화면을 확인할 수 있다(그림 3 참조).
그림 3. 작동 중인 HTML5 비디오
간단하지 않은가? 이제 Internet Explorer나 Opera와 같은 브라우저에서 이 페이지를 열어 보자. 그림 4의 밑 부분에 있는 것과 같은 오류 메시지가 표시된다. Safari에서 이 페이지를 보려고 하면 브라우저에 비디오 플레이어가 표시되기는 해도 비디오가 재생되지는 않는다.
그림 4. HTML5 비디오 지원 오류
다음에는 플레이스홀더 텍스트, 자동 초점과 같은 일부 새로운 웹 양식 기능과 range, datetime, email과 같은 새로운 입력 유형이 포함되어 있는 양식을 작성한다.
웹 양식 개선사항
HTML5에서 상당히 저평가된 내용 중 하나는 몇 가지 새로운 양식 제어를 도입했다는 점으로 이러한 기능은 개발자들이 양식 기반의 웹 애플리케이션을 작성할 때 유용하다. 브라우저 위젯과 기능 면에서 보면 현재는 이러한 양식 제어에 대한 지원이 매우 부족하지만 이러한 제어는 보통의 텍스트 상자로 단계적으로 성능이 축소되므로 현재 이러한 제어를 코드에서 안전하게 사용할 수 있으며 브라우저에서 이러한 개선사항을 지원하는 경우에는 이러한 기능을 자동으로 사용할 수 있게 된다.
Listing 6에 있는 코드를 Listing 4에서 작성한 비디오 섹션의 닫기 </section> 태그 밑에 직접 추가한다.
Listing 6. 웹 양식 추가
<section>
<header>
<h1>This is a feedback form</h1>
</header>
<p><form>
<label for="contact_name">Name:</label>
<input id="contact_name" placeholder="Enter your name"
autofocus><br />
<label for="contact_email">E-mail:</label>
<input type="email" id="contact_email" placeholder="Enter
your email address"><br />
<label for="contact_phone">Phone:</label>
<input type="tel" id="contact_phone" placeholder="Enter your
phone number"><br />
<label for="contact_callback">Callback on:</label>
<input type="datetime" id="contact_callback"><br />
<label for="contact_priority">Priority:</label>
<input type="range" min="1" max="5" value="1"
id="contact_priority"><br /><br />
<input type="submit" value="Request Call">
</form></p>
</section>
|
Listing 6에 있는 첫 번째 양식 요소에는 type 속성이 없으므로 기본값인 텍스트로 설정된다. 이 요소에는 플레이스홀더 텍스트 "Enter your name"이 있으며 자동 초점이 설정되어 있다는 것을 알 수 있다. 브라우저 지원은 페이지가 렌더링되었을 때 이 요소에 맞춰 자동으로 전환된다.
다음 요소는 "email" 유형이며 여기에도 플레이스홀더 텍스트 값이 포함되어 있다. 특별히 이러한 유형의 입력 요소를 인식하는 브라우저는 Opera로 이 브라우저는 email 필드라는 것을 강조하기 위해 해당 필드에 메일 아이콘을 표시한다.
다음 필드는 "Callback on:" 레이블이 있는 datetime 필드이다. 브라우저를 지원하는 과정에서 이 필드에 날짜와 시간 선택기가 표시된다. Opera에서는 이 필드가 시간을 선택할 수 있는 스피너와 날짜 선택기가 있는 텍스트 상자, 이렇게 두 가지 제어로 표시된다.
마지막으로 min, max 및 속성값 세트가 있는 range 유형으로 구성된 제어를 확인할 수 있다. Safari, Chrome 및 Opera에서는 이 제어가 슬라이더로 렌더링되며 기본적으로 최소값 1, 최대값 5로 설정된다. 지원되지 않는 브라우저에서는 단순히 텍스트 값이 1로 설정된 텍스트 상자로 표시된다.
이제 매우 단조롭고 간단한 양식에 몇 가지 세련된 기능을 추가해 보자. styles.css 파일에 다음 규칙을 추가한다(Listing 7 참조).
Listing 7. 웹 양식 CSS 규칙
article > section form {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
padding: 10px; margin-bottom: 30px;
}
article > section label {
font-weight: bold; font-size: 13px;
}
article > section input {
margin-bottom: 3px; font-size: 13px;
}
|
Listing 7을 자세히 살펴보면 상자의 모서리를 둥글게 하기 위해 border-radius 속성을 양식 컨테이너에 추가하였다는 것을 알 수 있다. 이외에도 box-shadow, background-color(연회색), padding 속성을 추가하였다.
먼저, Opera에서 이 양식이 어떻게 표시되는지 살펴보자. Opera에서는 이러한 새 HTML5 웹 양식 입력 유형을 대부분 지원한다(그림 5 참조).
그림 5. Opera의 웹 양식 개선사항
Email 필드 옆에 메일 아이콘이 있고 날짜 및 시간 필드 제어가 새로 추가된 것을 확인할 수 있다. 스피너의 드롭 다운 필드를 클릭하면 Opera의 달력 위젯이 그림 6과 같이 열린다.
그림 6. Opera의 달력 위젯
또한, 슬라이더 제어를 확인할 수 있으며 이 제어는 Opera에서 렌더링되었을 때가 오히려 더 단순해 보인다. 그러나 실망스럽게도 Opera에서는 border-radius나 box-shadow 속성을 지원하지 않는다. 따라서 이 양식에는 이러한 두 가지 효과가 모두 적용되지 않았다. 이제 같은 페이지를 Safari에서 열어서 이러한 CSS3 효과가 어떻게 표시되는지 확인해 보자(그림 7 참조).
그림 7. Safari의 웹 양식 개선사항
WebKit를 기반으로 하는 Safari는 상자의 그림자 효과와 둥근 모서리를 정확하게 렌더링했다. 이러한 효과는 매력적이지만 단순한 시각적 효과에 불과하다. Mozilla Firefox와 Google Chrome에서도 이러한 효과는 동일하게 표시된다. 또한, Safari에서는 플레이스홀더 텍스트 기능을 지원하고 range 입력 유형 대신 슬라이더를 구현하며 슬라이더는 Opera에서와는 다르게 훨씬 더 멋지게 표시된다는 것을 알 수 있다. 이 튜토리얼의 마지막 섹션에서는 <canvas> 요소와 2D 드로잉 API를 사용하여 웃는 얼굴을 한 간단한 비트맵 이미지를 작성하는 방법을 살펴본다.
<canvas> 요소와 2D 드로잉 API
<canvas> 요소를 사용하려면 먼저 HTML5 페이지에 이 요소를 추가해야 한다. 이전 섹션에서 웹 양식을 적용하기 위해 index.html에 추가한 코드 아래에 Listing 8에 있는 코드를 직접 추가한다.
Listing 8. HTML5 페이지에 <canvas> 요소 추가하기
<section>
<header>
<h1>This is an 2D Canvas section</h1>
</header>
<p>
<canvas id="my_canvas" width="480" height="320"></canvas>
<div id="no-canvas">
<p>You need a Canvas-compatible browser to view this area.</p>
</div>
</p>
</section>
|
이 코드는 비교적 간단하다. 넓이와 높이, 고유 ID 속성을 지정하면서 canvas 요소를 선언하면 된다. <canvas> 태그에 별도의 닫기 태그가 있어야 하는지는 Mozilla 브라우저와 WebKit 브라우저가 각기 다르지만 열기 태그와 닫기 태그 사이에 코드를 삽입하지 않는 한, 두 경우 모두 같은 방식으로 렌더링된다. Javascript를 활용하여 지원되지 않는 브라우저의 사용자에게 바로 no-canvas 오류 메시지를 표시한다.
다음은 2D 드로잉 API를 활용하여 캔버스에 이미지를 작성하는 Javascript 코드를 추가한다. index.html 파일의 맨 윗부분에 있는 닫기 </head> 태그 바로 앞에 다음 코드를 추가한다(Listing 9 참조).
Listing 9. canvas 요소 스크립트 작성하기
<script>
function loadCanvas() {
var canvas = document.getElementById('my_canvas');
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(245,160,150,0,Math.PI*2,true);
ctx.fillStyle = "rgb(255,255,204)";
ctx.fill();
ctx.stroke();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(200,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(280,110,15,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(240,170,20,4,Math.PI*2,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(240,190,60,0,Math.PI,false);
ctx.stroke();
} else {
document.getElementById('my_canvas').style.display = 'none';
document.getElementById('no-canvas').style.display = 'block';
}
}
</script>
|
Listing 9에서는 페이지의 header 요소에 Javascript 블록을 추가하고 loadCanvas 함수를 정의한다. 이 함수는 고유 ID가 my_canvas인 요소를 선택하여 canvas 변수를 인스턴스화한다. 그런 다음, if문을 사용하여 이 요소에서 canvas 컨텍스트를 가져올 수 있는지 판별한다. 가져올 수 있는 경우에는 해당 브라우저에서 <canvas> 요소를 지원하게 되고 그렇지 않은 경우에는 지원하지 않게 된다. 그리고 canvas 요소 대신 오류 메시지가 표시된다. 이 과정은 이 함수의 마지막 부분에 있는 if문의 else 블록에서 처리된다.
지원되는 캔버스가 발견되면 이 함수는 2D 컨텍스트(ctx)를 가져오며 ctx를 사용하여 캔버스에 모양을 그린다. 이 함수는 다섯 개의 모양을 작성한다. 먼저, ctx.beginPath() 함수를 호출하여 경로를 그린다. 그다음 ctx.arc() 함수를 사용하여 캔버스 중심에 반경 150픽셀의 완전한 원호를 그린다. ctx.fill() 함수와 ctx.stroke() 함수를 호출하기 전에 채우기 양식을 노란색으로 설정하여 윤곽선 색상이 검정색인 노란색 큰 원을 작성한다. 이것이 기본 형태이다.
그 다음에는 채우기 양식을 검정색으로 설정하여 눈을 그린다. 이와 같은 완전한 원은 ctx.arc() 함수와 ctx.fill() 함수를 사용하여 작성하며 ctx.arc() 함수에서는 반경을 15픽셀로 설정하고 ctx.fill() 함수를 호출하여 원을 그린다.
다음 코드 블록에서는 코를 작성하는데, 코는 완전한 원이 아니라 호이며 방금 그린 눈 사이의 중심 밑에 배치한다. 코는 채우기를 하지 않는다. 따라서 ctx.stroke() 함수를 대신 사용한다.
마지막으로 눈 밑에 큰 반원형 호로 선을 그려서 입을 작성한다. 결과는 <canvas> 요소를 지원하는 모든 브라우저에서 동일하게 표시된다. (Internet Explorer는 물론이고 Firefox, Safari, Chrome 및 Opera와 같은 대부분의 최신 브라우저에서는 유용한 Javascript 라이브러리를 일부 사용하여 canvas 요소를 지원한다.)
index.html에서 마지막으로 해야 할 작업은 창에서 로딩이 완료되었을 때 loadCanvas() 함수를 호출하도록 <body> 요소를 변경하는 일이다. 다음 행을 사용하여 닫기 <body> 태그를 간단히 바꾼다. <body onload="loadCanvas();">
마지막으로 styles.css 파일에 다음 규칙을 추가하여 캔버스 컨테이너에 몇 가지 멋진 상자 음영 처리를 추가한다(Listing 10 참조).
Listing 10. 캔버스 CSS 규칙
article > section div#no-canvas {
display: none;
}
canvas {
border: 1px solid #888;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
background-color: #eee;
}
|
최종 결과는 그림 8에 있는 이미지와 같다.
그림 8. 웃는 얼굴이 그려진 캔버스
이것으로 본 튜토리얼의 샘플 페이지는 마무리된다. 이번 섹션에서는 HTML5와 CSS3를 사용하여 새로운 HTML5 시맨틱 요소를 처리하고, CSS3의 멋진 새로운 효과를 일부 이용하고, Flash 플러그인이 없는 브라우저에서 비디오를 보고, 몇 가지 새로운 양식 위젯을 살펴본 다음, Javascript API를 사용하여 캔버스에 웃는 얼굴을 그려 보았다.
html5.examples.zip
