처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. audio 태그 활용하기

2. embed 태그 활용하기

3. canvas 태그 맛보기

4. HTML5 멀티미디어 요소 결론


audio 태그 활용하기
audio 태그는 video 태그와 사용법이 유사합니다. audio 태그 또한 브라우저에 따라 호환되는 파일이 다
릅니다.

audio 파일 포맷은 대표적으로 mp3 파일이 있고, 또 하나 ogg 파일 포맷이 있습니다. 이 두 파일의 차이
점은 코덱 차이와 로열티가 있는가 없는가의 차이점으로 동영상과 유사합니다.

또한 mp4 파일이 IE9과 Safari 그리고 크롬에서 동작하지만, 파이어폭스와 오페라에서 작동되지 않듯
이 mp3 파일도 IE9, Safari 그리고 크롬에서 사용되고 파이어폭스와 오페라는 ogg 파일을 사용합니다.

사용법은 video 태그와 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>오디오 예제</title>
</head>
<body>
<audio controls="controls">
<source src="danosongs.com-black-box-in-the-ground.mp3">
<source src="danosongs.com-black-box-in-the-ground.ogg">
</audio>
</body>
</html>

source/ch05/ex5-5.html


audio 태그 활용하기
오디오 파일 또한 다음 팟 인코더에서 mp3 파일 또는 ogg 파일로 변환할 수 있습니다.

마찬가지로 audio 태그는 IE9 이하 브라우저에서는 인식하지 않습니다.

“꼭 편법을 이용해서라도 멀티미디어 태그를 써야 하나요?”
네, 현재 멀티미디어 태그를 완벽하게 지원하는 브라우저는 IE 계열에서는 IE9만 유일하
게 지원됩니다. 그렇기 때문에 멀티미디어 태그를 지금까지 방법을 이용해서 만들게 되
면, IE6, IE7,그리고 IE8 사용자들은 멀티미디어 파일을 볼 수 없습니다.
아무리 웹 표준이 좋고, HTML5 기술이 뛰어나다고 하지만, 이것은 보편적인 기술이
아니기 때문에, 반드시 IE9 이하 사용자들도 해당 내용을 볼 수 있게끔 처리해 줘야 하는
것입니다. ( 이전 강의 - 하위 버전 브라우저에서 동영상 재생하기 참조 )


embed 태그 활용하기
embed 태그는 브라우저에 설치되어 있는 플러그 인이 필요한 파일을 동작할 때 사용하는 태그입니다.
즉 플래시 파일은, 어도비 플래시 플레이어가 설치되어 있는 경우, 플래시 파일을 웹 문서에 삽입하기
위해 예전에 사용했던 여러 가지 태그들을 간단하게 embed를 통해서 사용할 수 있다는 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash </title>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
<param name="movie" value="sample.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
… 중략…
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

HTML5 이전 버전에서 플래시 파일 삽입 방법 source/ch05/ex5-6.html


간단하게 자동 생성된 코드를 살펴보면 플래시 파일은 <object> </object> 태그 안에 있습니다, 내부에
서 <param>을 이용하여 각각의 속성을 부여합니다. 여기서 param 태그는 parameter의 약자입니다. 즉
<object> 내부의 파라미터를 이용하여 이 파일은 movie이며 값은 sample.swf이고, 파일의 퀄리티는 높
게 잡는다, 와 같은 내용을 정의해 주는 것입니다.

물론 하위 브라우저와의 호환성을 유지하기 위해 이런 방법을 HTML5에서도 그대로 사용할 수 있습니
다. 하지만 HTML5에서는 단순하게 <embed> 태그만으로 이전 예제와 동일한 효과를 얻을 수 있기 때
문에 훨씬 더 편하다는 것을 알 수 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<title>embed sample</title>
</head>
<body>
<embed src="sample.swf" width="550" height="400" > </embed>
</body>
</html>

embed 태그를 이용한 플래시 파일 삽입 source/ch05/ex5-7.html


embed 태그를 사용한 다른 예제를 보겠습니다. 확장자가 .mid인 mid 파일입니다.

이 mid 파일은 컴퓨터에서 만들어낸 소리라고 보면 됩니다.

보통 미디 파일이라고 하는데, 주로 과거에 게임의 배경 음악이나, 기타 효과음을 줄 때 사용하던 파일
입니다.

<!DOCTYPE HTML>
<html>
<head>
<title>embed sample</title>
</head>
<body>
<p> 블랙 사바스의 "Iron Man" </p>
<embed src="bs-ironman.mid" height="15" width="300"></embed>
</body>
</html>

source/ch05/pic5-13.html


이렇게 mid 파일을 추가해서 브라우저에서 재생하게 되면 mid 파일을 재생할 수 있는 플러그인이 작동
하게 됩니다. 화면상에서는 Quick time 플레이어가 작동하는 모습을 볼 수 있습니다.

이렇듯이 embed 태그는 플러그 인이 설치되어 있는 브라우저 또는 플러그 인이 필요한 파일을 재생할
때 사용하는 태그입니다. 만약 플러그인 설치되어 있지 않으면, 브라우저에서는 재생에 필요한 플러그
인을 검색하여 설치하라는 메시지가 나옵니다.

미디 파일 재생
플러그인 부재 시 에러 메시지


canvas 태그 맛보기
canvas 태그는 그 자체로서는 아무런 기능이 없습니다. canvas란 말 그대로 빈 화면만 있는 곳입니다.
이곳을 자바스크립트 등을 이용해서 그래프를 그리거나, 도형을 그려 넣을 수 있다는 것입니다.

여기서 중요한 것은 자바스크립트입니다. canvas의 모든 요소는 자바스크립트를 이용해서 처리해 주게
됩니다. 그렇기 때문에 자바스크립트가 없는 canvas 태그는 의미가 없습니다.

그렇다면 canvas 태그는 어떻게 해서 만들어 졌을까요?

canvas 태그는 애플에서 가장 먼저 사용하였으며, HTML5의 표준 문서에 포함되었습니다.
애플이 어도비의 플래시를 싫어하는 것은 누구나 다 아는 사실입니다. 아이폰과 아이패드에서는 플래
시 콘텐츠가 전혀 작동하지 않는 것을 보면 알 수 있습니다. 이런 이유로 애플은 자바스크립트만으로 구
현할 수 있는 요소들을 만들었고, 그것을 canvas 태그를 이용해서 처리하게 된 것입니다.


canvas에는 여러 요소가 들어갈 수 있습니다. 이미지, 그래프, 심지어 게임까지 canvas 영역 내부에서
작동할 수 있습니다. 즉 애플에서 기존의 플래시 콘텐츠를 대체하는 기술로 canvas를 도입했다고 볼 수
있지 않을까 생각합니다.

하지만 어도비에서도 차기 버전에서는

일러스트레이터와 플래시에서 canvas 태그를

지원하겠다고 공표했으며, 현재 완벽하진 않지만,

일러스트레이터 파일을 canvas 파일을 이용한

html 파일로 변환해주는 플러그 인이 존재합니다.

일러스트 파일을 canvas 태그로 변환하는 툴
(http://visitmix.com/labs/ai2canvas/)


canvas 태그를 제대로 구현하기 위해서는 자바스크립트에 대한 많은 내용을 알아야 합니다. 하지만 이
책에서 자바스크립트를 이용해서 어떻게 구동한다고 설명하기에는 이 책의 범위를 벗어나기 때문
에, 간단하게 일러스트레이터(이하 AI)로 만든 파일을 canvas 태그로 변환하는 예제와 canvas 태그로
이미지를 보여주는 예제를 간단하게 살펴보고 5장을 마치도록 하겠습니다.

먼저 http://visitmix.com/labs/ai2canvas/에서 해당 플러그 인을 다운받고서, AI의 플러그인 폴더에 넣습
니다. 그리고 AI에서 원하는 모양의 이미지를 만들고 나서(왼쪽 그림) „내보내기‟ 옵션에서 파일 형식을
„<canvas> (*.HTML)‟을 선택한 후 저장합니다(오른쪽 그림).


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>rings</title>
<script>

function init() {

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

draw(ctx);
}

function draw(ctx) {

var gradient;

// layer1/
// This artwork uses an unsupported "Multiply" blending mode
ctx.save();
ctx.beginPath();
ctx.moveTo(136.5, 375.5);
ctx.bezierCurveTo(70.5, 309.5, 70.5, 202.5, 136.5, 136.5);
…중략…
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="409" height="409"></canvas>
</body>
source/ch05/ex5-8.html


이 책에서는 간단한 예제를 보여주기 위해서
일러스트레이터 도형을 플러그 인을 통해
canvas 요소로 변환하였습니다.

여기서 주의해야 하는 점은 “일러스트레이터
파일을 변환할 때 canvas 태그를 사용하는
구나.”라고 이해하면 절대 안 됩니다.

브라우저에서 보이는 canvas 태그 결과 화면


canvas를 이용한 또 하나의 예를 보여드리겠습니다.
canvas 내부에는 일반적인 비트맵 이미지도 넣을 수 있습니다.
그림에서 보이는 이미지는 자바스크립트 함수로 그린 이미지이지만, canvas 내부에 배경으로 일반적인
jpg, gif, png 파일도 삽입할 수 있습니다.

그림을 보면 Nature란 단어만 비트맵 이미
지가 아닙니다.

Nature란 단어 밑에 흐림 효과를 준 부분과
나머지 부분은 비트맵 이미지입니다.


canvas 태그 내부에 비트맵 이미지 추가


canvas 태그에 있는 소스를 살펴보면 다음과 같습니다.

<img id="image1" style="display: none" src="image45.png" />
<img id="image2" style="display: none" src="image46.png" />

여기서 배경을 바꿔주고 싶으면
src="image45.png" 부분을 바꿔주면
됩니다.

오른쪽 그림에서는 이미지
파일을 교체한 후 변경된 페이지를
보여주고 있습니다.



즉 canvas에 있는 요소들은 모든 것을 프로그램으로 처리하는 것이 아니라, 비트맵 이미지까지 이용할
수 있다는 것을 말해주고 있습니다.

이 말은 canvas 태그는 비트맵 이미지, 프로그래밍화된 이미지, 그 외 여러 가지 복합적인 요소들로
구성된 장소의 역할을 한다고 할 수 있습니다. 그렇기 때문에 canvas 태그를 이용하여 애니메이션이나
게임을 만들 수도 있고, 이미지 에디터까지 가능한 것입니다.

소스 코드 중 일부인 앞 페이지에서 예제의 소스를 살펴보면 이미지는 전부 아이디 선택자로 지정되어
있는데, 여기는 CSS가 적용되는 부분은 아니고 자바스크립트에서 사용하는 선택자입니다.
getElementById(“image1”) 부분에서 아이디 선택자를 사용해서 이미지를 표현하는 것입니다.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>nature</title>
<script>
function init() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
… 중략…
}
function background(ctx) {
ctx.save();
ctx.drawImage(document.getElementById("image1"), 0.0, 0.0);
… 중략 …
ctx.drawImage(document.getElementById("image2"), 405.0, 398.0);]
.. 중략 …
</script>
</head>
<body onload="init()">
<img alt=" " id="image1" style="display: none" src="image50.png" />
<img alt="" id="image2" style="display: none" src="image46.png" />
</body>
</html>

비트맵 이미지를 활용한 canvas 소스 파일


예제에서 보는 것과 같이 제대로 canvas 요소를 만들기 위해서는 자바스크립트의 대한 공부가 필수입
니다. 여기서 예를 보여준 것은 여러분이 쉽게 이해할 수 있게 변환한 것이지, 모든 요소는 자바스크립
트를 통해 canvas 태그가 구동된다는 것이 핵심입니다.

Canvas 태그는 단순히 이미지를 위한 공간만을 제공해 주는 것입니다. 하지만 예전에도 자바스크립트
를 이용해서 이미지와 애니메이션이 가능하지 않았나 라는 생각도 할 수 있습니다. 물론 이전에도 자바
스크립트를 이용해서 canvas 와 비슷한 효과를 낸 경우도 있습니다.

하지만 canvas 태그가 HTML5 에 도입됨으로 인해 보다 표준화된 방식으로 효과를 구현하는 것입니다.
즉 이전 방식에서는 프로그래머마다 함수를 정의하고 그렸다고 하면, 현재 Canvas 태그에서는 표준화
된 문법 구조에 의해서 이미지를 그려주고, 애니메이션을 지정해 주는 것입니다.


특히 canvas 태그는 플래시와 비교되는데, 왜냐하면 플래시 또한 액션 스크립트를 이용해서 애니메션
을 정의하고 벡터 그래픽을 처리하며, 비트맵 이미지 또한 플래시 스태이지에 올려 작업을 하게 됩니다.
이와 마찬가지로 canvas 태그에서도 예제에서의 예 처럼 비트맵 이미지도 canvas 태그 내부에 불러오
기도 하며, 벡터 이미지인 경우 자체 이미지 렌더링 함수를 사용하여 이미지를 그려주기도 하는 것입니
다.

canvas 에 적용되어 있는 스크립트인 경우 DOM 스크립트을 이용합니다. DOM(Document Object
Model) 문서 객체 모델이라는 스크립트를 사용하는데, DOM 스크립트 기반의 언어로 작동합니다.
DOM 스크립트 언어도 일종의 자바스크립트 언어와 같습니다. 하지만 자바스크립트 언어는 단독으로
도 작동할 수 있으나, DOM 스크립트는 문서내의 객체를 기반으로 작동하는 것이 틀립니다. 예제에서
보시면 var canvas = document.getElementById("canvas"); 는 canvas 를 정의 해주는 부분입니다.
즉 canvas 태그를 정의하는 것이라고 보면 됩니다. 즉 문서 내부의 태그들과 아이디 선택자 등 요소를
이용해서 애니메이션을 하거나 게임을 만들거나 하는 것이며, 이전 방식의 자바스크립트인 경우 이런
요소를 전혀 사용하지 않고 자바스립트만을 이용해서 구현을 했던 것입니다


이 책에서 언급한 자바스크립트는 DOM 스크립트를 포함한 포괄적인 의미입니다.

예제에서 보듯이 이미지 파일은 전혀 사용되지 않았지만, canvas 태그와 자바스크립트만으로 완벽한
도형이 만들어지는 것을 보았습니다. 또한 canvas 태그는 자바스크립트로 이루어져 있기 때문에 경우
에 따라서는 게임도 만들 수 있고, 동영상도 만들 수 있습니다.

최근에 HTML5에 관심을 가지는 개발자들이 가장 눈여겨보는 항목도 canvas 태그입니다. canvas 태그
를 이용하면, 웹 상에서 별도의 플러그 인 없이 주가 그래프를 구현할 수 있고, 게임을 만들 수 있으
며, 플러그 인이 필요했던 여러 가지 요소를 대신할 수 있기 때문입니다. 현재는 심지어 canvas 태그로
포토샵과 유사한 기능을 하는 요소까지 만들어져 있습니다.

canvas에 대한 더 자세한 내용은 http://www.canvasdemos.com/에서 찾을 수 있습니다. 여기서는
canvas를 이용해서 다양한 앱과 게임을 살펴볼 수 있습니다.


HTML5 멀티미디어 요소 결론
이번 강의까지 간단하게나마 HTML5의 멀티미디어적인 요소를 살펴보았습니다.

HTML5란 언어는 앞서도 언급했다시피 전혀 새로운 언어가 아닌 이전 버전의 HTML의 연장선에서 많
이 사용하는 요소들을 태그 내부에 통합하고, 멀티미디어적인 요소를 대폭적으로 보강했다는 데 의의
가 있습니다.

HTML5의 특징인 video, audio, embed, canvas 태그는 많은 사이트에서 플러그 인을 반드시 설치해야
만 볼 수 있었던 요소를 대체하는 효과를 거둘 수 있습니다.

처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차 (20)

처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차