5. 시맨틱 태그 - 이미지, 비디오, 오디오
1. HTML5 시맨틱 태그(이미지)
1) 웹 문서와 이미지
● 이미지는 몇 가지 정해진 파일 형식만 사용할 수 있음
● 다른 형식의 이미지 파일을 사용하려면 사용 가능한 이미지 파일로 변환이 필요
● 웹 페이지에서 사용할 수 있는 몇 가지의 파일 형식만 사용 가능함
● GIF
- Graphic Interchange Form의 약어
- JPG나 PNG 형식에 비해 파일 크기가 작지만 표시할 수 있는 색상 수가 최대 256가지
- 웹 페이지에서 아이콘이나 불릿 등 작은 이미지에 주로 사용
- 투명한 배경이나 움직이는 이미지를 만들 수 있음
● JPG/JPEG
- Joint Photographic Experts Group의 약어
- 사진을 웹 페이지에 넣기 위해 개발된 형식
- GIF에 비해 다양한 색상과명함 표현이 가능
- 디지털 카메라의 저장 파일은 대부분 JPG형식
● PNG
- Portable Network Graphics의 약어
- 최근에 많이 사용되는 이미지 파일
- 투명 배경을 만들 수 있고 색상을 최대한 유지
2) <img> 태그와 그에 따른 속성
● <img> 태그 : 웹 문서에 이미지를 삽입할 때 사용되는 태그
- <img> 태그는 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치됨
- 이미지 삽입한 후 CSS 를 이용하거나 HTML5의 Canvas API를 이용해 이미지를 꾸밈
- src 속성은 이미지 파일이 있는 경로를 표시하기 위해 반드시 사용해야 함
- 그 외의 속성은 필요에 따라 생략 가능함
<img src = 경로" [속성="속성 값"]>
● src 속성 : 이미지와 파일 경로를 지정하는 속성
- 이미지를 웹 문서에 넣으려면 src 속성에 정확한 파일 경로를 지정해야 함
- 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 정해짐
|
이미지가 웹 문서의 같은 폴더에 있을 때 |
이미지가 웹 문서의 하위 폴더에 있을 때 |
|
<img src ="test2.png"> |
<img src = "images/test2.png> |
● Width, Height 속성 : 이미지의 크기를 조정하는 속성
- 이미지 파일을 브라우저 창에 원하는 크기로 조정하여 넣을 때 사용함
- width, height 속성을 사용하지 않으면 원본 이미지 크기 출력
● alt 속성 : 대체 텍스트를 추가해 주는 속성
- 그림을 내려 받지 않고 문자열만 보여주기 위해 사용
- 음성 합성 기술을 이용한 스크린리더(또는 Text-to-speech) 소프트웨어에서 사용
● title 속성 : 마우스 오버 시 설명 상자를 표시해주는 속성
- 요소에 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용
3) 이미지에 캡션을 붙이기 위한 태그
● <figure> 태그 : 캡션 대상을 지정할 때 사용하는 태그
- 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶음
- 태그 안에 <img>,<code>처럼 다른 태그 사용 가능
<figure>
캡션을 붙일 요소
</figure>
● <figcaption> 태그 : 캡션 설명을 붙일 때 사용하는 태그
- 반드시 <figure> 태그 다음에 사용해야 함
- <figcaption> 없이 <figure> 태그를 사용하는 것은 미디어가 있다는 것을 브라우저에게 알려쥐 위함
<figcaption>
내용
</figcaption>
● 이미지 삽입과 이미지 캡션달기 십습 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.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/test.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 © 2015 All rights reserved. <footer>
</body>
</html>
2. HTML5 시맨틱 태그(비디오, 오디오)
1) 비디오 태그
● <video> 태그 : HTML5에서 손쉽게 웹 문서에 비디오 파일을 삽입할 때 사용하는 태그
- 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 비디오 표현 가능
- PC, Mobile 모두 가능
- 익스플로러 8 이하 버전에서 인식 못함
- Mobile의 경우 자동재생 지원 안함
<video src = "비디오 파일 경로" [속성][속성="속성 값"]
● 비디오 태그 속성
- Src : 비디오 파일의 경로지정
- Width : 비디오의 너비 지정
- Height : 비디오의 높이 지정
- Muted : 음소거
- Controls : 비디오 재생 도구를 출력할지 지정
- Autoplay : 비디오를 자동 재생할지 지정
- Loop : 비디오를 반복할지 지정
- Preload : 비디오를 재생하기 전에 모두 불러올지 지정
2) 비디오 태그를 활용한 HTML5 시맨틱 태그 실습
● 비디오 삽입하기의 실습 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.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.flv" width = "300" height = "150" controls autoplay loop >
</video>
</section>
</article>
<br>
<footer> Copyright © 2014 All rights reserved. </footer>
</body>
</html>
3) 오디오 태그
● <audio> 태그 : HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때 사용하는 태그
- HTML5에서 추가 됨
- 여러 가지 속성들을 사용하여 사용자의 요구에 맞게 오디오 표현 가능
- 여러 개의 오디오 소스를 포함할 수 있음
<audio src = "오디오 파일 경로"[속성][속성="속성 값"]>
●오디오 태그 속성
- Src : 비디오 파일의 경로지정
- Controls : 비디오 재생 도구를 출력할지 지정
- Autoplay : 비디오를 자동 재생할지 지정
- Loop : 비디오를 반복할지 지정
- Preload : 음악을 재생하기 전에 모두 불러올지 지정
4) 오디오 태그를 활용한 HTML5 시맨틱 태그 실습
● 오디오 삽입하기의 실습 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3g.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 © 2014 All rights reserved. </footer>
</body>
</html>
'Legend 개발자 > HTML5' 카테고리의 다른 글
| No.007 HTML5 추가 태그 [2017-05-16] (0) | 2017.05.15 |
|---|---|
| No.006 시맨틱 태그 - 입력양식 및 공간분할 [2017-05-15] (0) | 2017.05.15 |
| No.004 HTML5 기본 구조 및 문법의 기초 [2017-05-12] (0) | 2017.05.12 |
| No.003 HTML5와 HTML4.01의 차이 [2017-05-12] (0) | 2017.05.12 |
| No.002 HTML5 기초 [2017-05-11] (0) | 2017.05.11 |
