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

처음부터 다시 배우는

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

양용석([email protected])

처음부터 다시 배우는 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


embed 태그 활용하기간단하게 자동 생성된 코드를 살펴보면 플래시 파일은 <object> </object> 태그 안에 있습니다 ,

내부에서 <param> 을 이용하여 각각의 속성을 부여합니다 . 여기서 param 태그는 parameter 의 약자입니다 . 즉 <object> 내부의 파라미터를 이용하여 이 파일은 movie 이며 값은 sample.swf 이고 ,

파일의 퀄리티는 높게 잡는다 , 와 같은 내용을 정의해 주는 것입니다 .

물론 하위 브라우저와의 호환성을 유지하기 위해 이런 방법을 HTML5 에서도 그대로 사용할 수 있습니다 .

하지만 HTML5 에서는 단순하게 <embed> 태그만으로 이전 예제와 동일한 효과를 얻을 수 있기 때문에 훨씬 더 편하다는 것을 알 수 있습니다 .

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>embed sample</title></head><body> <embed src="sample.swf" width="550" height="400" > </em-bed></body></html>embed 태그를 이용한 플래시 파일 삽입 source/ch05/ex5-7.html


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

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

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

<!DOCTYPE HTML><html><head><meta charset="utf-8"><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


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

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

미디 파일 재생

플러그인 부재 시 에러 메시지


canvas 태그 맛보기canvas 태그는 그 자체로서는 아무런 기능이 없습니다 . canvas 란 말 그대로 빈 화면만 있는 곳입니다 .

이곳을 자바스크립트 등을 이용해서 그래프를 그리거나 , 도형을 그려 넣을 수 있다는 것입니다 .

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

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

canvas 태그는 애플에서 가장 먼저 사용하였으며 , HTML5 의 표준 문서에 포함되었습니다 .

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


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

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

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

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

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

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

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


canvas 태그 맛보기canvas 태그를 제대로 구현하기 위해서는 자바스크립트에 대한 많은 내용을 알아야 합니다 . 하지만 이 책에서 자바스크립트를 이용해서 어떻게 구동한다고 설명하기에는 이 책의 범위를 벗어나기 때문에 ,

간단하게 일러스트레이터 ( 이하 AI) 로 만든 파일을 canvas 태그로 변환하는 예제와 canvas 태그로 이미지를 보여주는 예제를 간단하게 살펴보고 5 장을 마치도록 하겠습니다 .

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


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

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

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

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



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

<canvas id="canvas" width="801" height="544"></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 태그는 비트맵 이미지 , 프로그래밍화된 이미지 , 그 외 여러 가지 복합적인 요소들로 구성된 장소의 역할을 한다고 할 수 있습니다 . 그렇기 때문에 canvas 태그를 이용하여 애니메이션이나 게임을 만들 수도 있고 , 이미지 에디터까지 가능한 것입니다 .

소스 코드 중 일부인 앞 페이지에서 예제의 소스를 살펴보면 이미지는 전부 아이디 선택자로 지정되어 있는데 ,

여기는 CSS 가 적용되는 부분은 아니고 자바스크립트에서 사용하는 선택자입니다 .

getElementById(“image1”) 부분에서 아이디 선택자를 사용해서 이미지를 표현하는 것입니다 .


canvas 태그 맛보기<!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()"> <canvas id="canvas" width="801" height="544"></canvas> <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 와 비슷한 효과를 낸 경우도 있습니다 .

하지만 canvas 태그가 HTML5 에 도입됨으로 인해 보다 표준화된 방식으로 효과를 구현하는 것입니다 .

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


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

canvas 에 적용되어 있는 스크립트인 경우 DOM 스크립트을 이용합니다 . DOM(Document Object

Model) 문서 객체 모델이라는 스크립트를 사용하는데 , DOM 스크립트 기반의 언어로 작동합니다 . DOM

스크립트 언어도 일종의 자바스크립트 언어와 같습니다 . 하지만 자바스크립트 언어는 단독으로도 작동할 수 있으나 , DOM 스크립트는 문서내의 객체를 기반으로 작동하는 것이 틀립니다 . 예제에서 보시면 var

canvas = document.getElementById("canvas"); 는 canvas 를 정의 해주는 부분입니다 .

즉 canvas 태그를 정의하는 것이라고 보면 됩니다 . 즉 문서 내부의 태그들과 아이디 선택자 등 요소를 이용해서 애니메이션을 하거나 게임을 만들거나 하는 것이며 , 이전 방식의 자바스크립트인 경우 이런 요소를 전혀 사용하지 않고 자바스립트만을 이용해서 구현을 했던 것입니다


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

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

최근에 HTML5 에 관심을 가지는 개발자들이 가장 눈여겨보는 항목도 canvas 태그입니다 . canvas

태그를 이용하면 , 웹 상에서 별도의 플러그 인 없이 주가 그래프를 구현할 수 있고 , 게임을 만들 수 있으며 ,

플러그 인이 필요했던 여러 가지 요소를 대신할 수 있기 때문입니다 . 현재는 심지어 canvas 태그로 포토샵과 유사한 기능을 하는 요소까지 만들어져 있습니다 .

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

http://www.canvasdemos.com/


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

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

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

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

Technology