Jeongchul Kim
HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 본문
HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 HTML5 시맨틱 태그(이미지) HTML5 시맨틱 태그-이미지 이미지는 웹 초창기부터 지원되어 왔으며, HTML5 이전의 이미지 태그를 거의 그대로 사용하고 있습니다. 그렇다면 이미지 태그에 아무 이미지 파일이나 가져다 사용할 수 있을까요? 웹 페이지에서 사용할 수 있는 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있습니다. 만약 다른 형식으로 된 이미지 파일을 사용하려면 웹 페이지에서 사용할 수 있는 파일 형식으로 변환하여 사용해야 하죠. 그렇기 때문에 이미지를 사용하기 위해서는 웹에서 사용할 수 있는 이미지 파일 형식이 무엇인지 알아야 합니다. 그럼 웹에서 사용할 수 있는 이미지 파일 형식에 어떤 것이 있는지 알아보겠습니다. 먼저 GIF파일입니다. GIF 파일은 Graphic Interchange Format의 약어로 JPG나 PNG 형식에 비해 압축률은 떨어지지만 사이즈가 작아 전송속도가 빠르고 이미지의 손상이 적다는 장점이 있습니다. 그러나 저장할 수 있는 이미지가 256색으로 제한되어 있어 다양한 색을을 필요로 하는 이미지를 저장하기 형식으로는 적당하지 않습니다. GIF파일은 웹 페이지에서 주로 아이콘이나 불릿과 같은 작은 이미지에 주로 사용되지만, 투명한 배경이나 움직이는 이미지도 만들 수 있다는 특징이 있습니다. 다음은 JPG 또는 JPEG 파일형식입니다. JPEG는 Joint Photographic Experts Group의 약자로 사진을 웹 페이지에 넣기 위해 개발된 형식이기 때문에 GIF에 비해 다양한 색상과 명암을 표현할 수 있습니다. 아마 JPG나 JPEG는 여러분에게 가장 익숙한 파일 형식이라고 생각되는데요. 그것은 디지털 카메라에서 저장하는 사진 파일 대부분이 JPG형식이기 때문입니다. 다음은 PNG 파일형식 입니다. PNG는 Portable Network Graphics의 약자로 최근에 많이 사용되는 이미지 파일 입니다. PNG는 투명 배경을 만들 수도 있고, 색상을 최대한 유지할 수 있는 장점이 있습니다. 다음은 이미지 태그에 대해 알아보겠습니다. 우선, 웹 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다. <img> 태그는 인라인 태그이며, 몇 개의 속성과 함께 사용이 되기 때문에 이미지 바로 옆에 다른 요소가 나란히 배치됩니다. 이미지를 삽입한 후에는 CSS를 이용하거나 HTML5의 Canvas API를 이용해 이미지를 꾸미면 됩니다. 이미지를 웹 문서에 넣으려면 이미지 파일이 있는 경로를 표시해야 하는데 이때 반드시 src 속성을 사용해야 합니다. 그 외의 속성은 필요에 따라 생략이 가능합니다. <img> 태그를 사용하는 방법은 다음과 같이 <img src = “경로” >로 이미지 파일의 경로를 표시하며 [속성=“속성 값”]에 사용하려는 속성과 그 속성 값을 입력해주면 됩니다. <img> 태그에 대한 이해를 돕기 위해 <img>태그의 속성에 대해 자세히 알아보겠습니다. 우선 Src 속성은 이미지와 파일 경로를 지정하는 속성으로 이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 합니다. 여기서 경로란 현재 HTML 문서에서 이미지 파일이 있는 곳까지 찾아가기 위한 길을 의미합니다. 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해지므로 이미지와 파일 경로를 지정할 때 이미지가 어느 위치에 있는지 확인하고, 정확한 경로를 입력해야 합니다. 예를 들어 이미지가 웹 문서와 같은 폴더에 있는 경우와 웹 문서의 하위 폴더에 있는 경우의 경로를 알아보겠습니다. 이 그림은 웹 문서와 이미지가 같은 폴더에 있는 경우를 나타낸 그림으로 test.html 웹 문서와 test2.png가 같은 폴더에 들어 있습니다. 이런 경우 다음과 같이 경로를 “test2.png”로 지정하면 됩니다. 이 그림은 웹 문서와 이미지가 다른 폴더에 들어 있는 경우를 나타낸 그림으로 이번에는 test2.png 파일이 웹 문서의 하위 폴더인 images에 들어 있습니다. 이런 경우에는 다음과 같이 경로를 images/test2.png로 나타내어 이미지가 하위 폴더에 위치하고 있음을 정확하게 표시해야 합니다. 다음 width와 height는 이미지 크기를 조정하는 속성으로 이미지 파일을 브라우저 창에 원하는 크기로 조정하여 넣을 때 사용합니다. 만약 width와 height 속성을 사용하지 않으면 이미지의 크기는 원본 크기로 출력 됩니다. 그 다음 alt 속성은 이미지를 설명해 주는 대체 텍스트를 추가해 주는 속성으로 그림의 링크가 끊겼거나, 인터넷 연결 속도나 품질이 낮은 경우가 많은 화면이 제한적인 이동형 장비에서 그림을 내려 받지 않고 문자열만 보여주기 위해 사용됩니다. 또한 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린리더 소프트웨어에서도 사용되는 속성으로 이것은 시각장애인의 웹 접근성을 높이기 위한 노력의 결과라고 볼 수 있습니다. title 속성은 이미지 위에 마우스 포인터를 가져 갔을 때 작은 설명 상자를 표시해주는 속성입니다. 요소에 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용하며, 대부분의 브라우저에서는 툴팁과 같이 참조하여 사용합니다. 이미지에 캡션을 붙이기 위해 필요한 태그에 대해 알아보겠습니다. 이미지에 캡션을 붙이기 위해 사용되는 태그 중 <figure> 태그는 캡션을 붙일 대상을 지정합니다.<figure>태그는 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶을 수 있으며 태그 안에 <img>태그나 <code>태그와 같은 다른 태그도 사용이 가능합니다. <figure> 태그의 사용법은 다음과 같이 <figure>엘리먼트로 시작해서 캡션을 붙일 요소를 지정하고 </figure> 엘리먼트로 종료합니다. 다음 <figcaption> 태그는 <figure> 태그를 사용하여 지정한 대상에 캡션 내용을 붙이는 태그입니다. <figcaption>태그는 꼭 사용해야 하는 태그는 아니지만 사용할 때에는 반드시<figure>태그 다음에 사용해야 합니다. <figcaption> 없이 <figure>태그를 사용하는 것은 브라우저에게 미디어가 있다는 것을 알려주기 위한 것입니다. <figcaption> 태그의 사용법은 다음과 같이 <figcaption> 엘리먼트로 시작해서 내용을 적고 </figcaption> 엘리멘트로 종료합니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <header> <h1> 이미지 삽입하기!!!</h1> </header> <article> <section> <img src="images/test.png" width="300" height="150"> <img src="images/test1.png" width="300" height="150"> <img src="images/test2.png" width="300" height="150"> </figure> </section> </article> <br> <footer> Copyright © 2014 All rights reserved.</footer> </body> </html> 웹 페이지 화면 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <header> <h1> 캡션 삽입하기!!!</h1> </header> <article> <section> <figure> <img src="images/test.png" width="300" height="150"> <img src="images/test1.png" width="300" height="150"> <figcaption> 이미지 2개를 묶어 하나의 캡션으로 표시하였다. </figcaption> </figure> <figure> <img src="images/test2.png" width="300" height="150"> <figcaption> 이미지 하나에 캡션 1개를 표시 </figcaption> </figure> </section> </article> <br> <footer> Copyright © 2016 All rights reserved.</footer> </body> </html> 웹 사이트 HTML5 시맨틱 태그 (비디오, 오디오) HTML5 시맨틱 태그(비디오/오디오) HTML5의 비디오 태그에 대해서 알아보겠습니다. 웹 문서에 비디오 파일을 삽입할 때는 <video>태그를 사용하면 손쉽게 비디오 파일을 삽입 할 수 있습니다. <video>태그는 몇 개의 속성들을 사용하여 사용자의 요구에 맞게 표현할 수 있습니다. <video> 태그는 PC 와 mobile 모두에서 사용 가능하지만, 익스플로러8 이하의 버전에서는 인식을 못한다는 점에 유의해야 합니다. 그리고 mobile의 경우 자동 재생을 지원하지 않습니다. <video> 태그의 사용하는 방법은 다음과 같습니다. 비디오 태그에 사용되는 속성에 대해 알아보겠습니다. Src는 이미지 태그와 같이 비디오 파일의 경로를 지정하는 속성입니다. Width와 height는 크기를 지정하는 속성으로, width는 비디오의 너비를, height는 비디오의 높이를 지정합니다. 앞서 말한 세 가지 속성을 다음과 같이 사용할 수 있습니다. 이 소스는 Src를 사용하여 video 폴더의 viseo_test.mp4 경로를 지정해 주었으며 width 에서 속성값을 300으로 하여 비디오의 너비가 300이고, height 에서 속성값을 150으로 하여 비디오의 높이가 150이 되도록 지정한 것입니다. 이외의 다른 속성에 대해서 계속해서 살펴보겠습니다. muted는 음소거를 지정할 수 있는 속성입니다. Controls는 비디오 재생 도구를 출력할지를 지정하는 속성이고 Autopaly는 비디오를 자동 재상할지를, loop는 비디오를 반복 재생할지를 지정하는 속성입니다. 그리고 Preload는 비디오를 재생하기 전에 모두 불러올지를 지정하는 속성입니다. 다음은 웹 브라우저에서 지원하는 비디오 파일 형식에 대해 알아보겠습니다. 웹 브라우저에서 사용할 수 있는 비디오 파일 형식은 MP4, WebM, OGV 와 같이 3가지가 있습니다. 익스플로러와 사파리는 MP4파일 형식만을 지원하며 파이어폭스와 오페라는 WebM과 OGV 파일형식을 지원합니다. 그리고 크롬은 MP4, WebM, OGV 의 모든 파일 형식을 지원합니다. 웹 문서에서 비디오 파일을 사용할 때 해당 브라우저에서 지원하는 비디오 파일 형식을 확인해야 합니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <header> <h1> 비디오 삽입하기!!!</h1> </header> <article> <section> <video src="video/video_test.mp4" width = "600" height = "400" controls autoplay loop > </video> </section> </article> <br> <footer> Copyright © 2014 All rights reserved.</footer> </body> </html> 웹 사이트 HTML5의 최신 동향을 살펴보겠습니다 현재의 HTML5 초안 규격에는 동영상 태그에서 어떤 동영상 포맷을 브라우저가 지원해야 할 것인지를 명시해 두지 않았습니다. 따라서 브라우저는 그들이 적합하다고 생각되는 동영상 포맷을 마음대로 지원할 수 있습니다. 하지만 브라우저가 지원해야 할 동영상 포맷을 명시해 두지 않음으로 인해 이용자들의 불편을 겪게 되었고, 이러한 불만이 확대되면서, 결국 동영상 포맷에 대한 논쟁으로 이어졌습니다. 논쟁 끝에 모아진 결론은 브라우저가 지원할 동영상 포맷을 적어도 하나는 명시하는 것이 바람직하다는 것이었습니다. 이렇듯 많은 논쟁이 있었던 동영상의 이상적인 포맷은 어떤 것일까요? 이상적인 동영상 포맷은 다음의 조건을 만족하는 것이라 할 수 있습니다. 우선, 고효율의 압축률과 고화질을 가지고 있고, 낮은 디코드 과정을 사용해야 합니다. 그리고 로열티가 없어야 하며, 그 포맷을 지원하는 소프트웨어 디코더, 하드웨어 동영상 디코더가 존재해야 합니다. 처음 HTML5에서 추천 하는 표준 동영상 포맷은 Ogg Theora였는데, 그 이유는 Ogg Theora는 특허에 영향을 받지 않았기 때문이었습니다. 그러나 2007년 12월 10일 HTML5 규격이 업데이트되었을 때, 포맷을 구체화하기 위해 참고사항이 갱신되었습니다. 이번에는 HTML5의 오디오 태그에 대해서 알아보겠습니다. HTML5에서 배경 음악이나 효과음 등 오디오를 삽입 할 때에는 <audio> 태그를 사용합니다. 이전에는 <object>태그를 이용하였는데, HTML5에서 추가된 <audio>태그는 <object>태그에 비해 간편하게 경로 및 간단한 속성만으로 오디오 첨부가 가능하게 되었습니다. <audio>태그는 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 표현할 수 있으며 여러 개의 오디오 소스를 포함할 수 있습니다. <audio> 태그를 사용하는 방법은 다음과 같습니다. 오디오 태그에 사용되는 속성에 대해 알아보겠습니다. Src는 이미지 태그와 같이 오디오 파일의 경로를 지정하는 속성이고, controls는 음악 재생 도구를 출력할지를 지정하는 속성입니다. Autoplay는 음악을 자동 재생할지를, loop는 음악을 반복 재생할지를 지정하는 속성이고, Preload는 음악을 재생하기 전에 모두 불러올지를 지정하는 속성입니다. 이 속성들을 다음과 같이 사용할 수 있습니다. Src를 사용하여 audio 폴더의 audio_test.mp3 경로를 지정해 주었으며, controls 속성을 사용하여 음악 재생 도구를 출력하였고, autoplay 속성을 사용하여 음악을 자동으로 재생하게 하였습니다. 그리고 loop를 사용하여 음악을 반복되도록 지정하였습니다. 여기에서 controls, autoplay, loop는 따로 속성값을 갖지 않습니다. 웹 브라우저에서 지원하는 오디오 파일 형식입니다. 웹 브라우저에서 사용할 수 있는 오디오 파일 형식은 MP3, OGG, WAV와 같이 3가지가 있습니다. 익스플로러에서는 MP3 파일 형식만 지원하며, 사파리에서는 MP3와 OGG 파일 형식을 지원합니다. 파이어폭스와 오페라는 OGG와 WAV 파일 형식을 지원하며 크롬은 MP3, OGG, WAV 모든 파일 형식을 지원합니다. 웹 문서에서 비디오 파일을 사용할 때 해당 브라우저에서 지원하는 오디오 파일 형식을 확인해야 합니다. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <header> <h1> 오디오 삽입하기!!!</h1> </header> <article> <section> <audio src="audio/audio_test.mp3" controls="" autoplay="" loop=""> </audio> </section> </article> <br> <footer> Copyright © 2016 All rights reserved.</footer> </body> </html>1. 웹 문서와 이미지
2. <img> 태그와 그에 따른 속성
3. 이미지에 캡션을 붙이기 위한 태그
1. 비디오 태그
2. 비디오 태그를 활용한 HTML5 시맨틱 태그 실습 예제
3. 오디오 태그
4. 오디오 태그를 활용한 HTML5 시맨틱 태그 실습 예제
'Web프로그래밍' 카테고리의 다른 글
| HTML5 07 추가 태그 (0) | 2016.04.21 |
|---|---|
| HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 (0) | 2016.04.21 |
| HTML5 04 HTML5 기본 구조 및 문법의 기초 (0) | 2016.04.20 |
| HTML5 - 03 HTML5와 HTML4.01의 차이 (0) | 2016.04.20 |
| HTML5 02-2 HTML5 기초 - HTML5 표준문서 (0) | 2016.04.19 |