Chapter 6. 멀티미디어 태그

1. img 태그

---

• 웹 페이지에 사진, 그림을 삽입할 때 사용

속성	의미
src	삽입할 이미지 경로를 지정하는 속성
alt	이미지를 설정해주는 텍스트 속성 (이미지가 안보일 경우 출력되는 문자)
width, height	이미지의 크기를 설정 하는 속성

👨‍🎓 작성법

<img src="경로" alt="설명 문구" width="넓이" height="길이" />

✍ 태그 작성 시

<img src="/image/disk.jpg" width="500px" height="500px">

웹 페이지 사용 가능한 확장자

구분	의미
GIF	파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용 투명한 배경이나 움직이는 이미지를 만들 수 있음 ※ 블릿 기호 : 특수기호 같은것
JPG/JPEG	사진을 위해 개발, 저장을 반복하다 보면 화질이 떨어 질 수 있음
PNG	네트워크용으로 개발되어 요즘 많이 이용 함

2. 이미지 맵 태그 (map, area)

---

• 이미지를 구역별로 나누어 링크를 걸어주는 태그
• <img> 태그에 usermap 속성을 지정 해주어야 함

속성	의미
coords	분할할 지역 좌표 지역 (시작, 끝)
href	링크 페이지 경로 지정
shape	링크로 사용할 영역 형태 지정 (default, rect, circle, poly)
target	링크페이지가 열릴 위치 값 (새창, 현재창, 부모창, 최상위창 값) - _blank, _self, _parent, _top

👨‍🎓작성법 (이미지 구역을 2개로 나누어 각 각 링크 설정)

<img src="경로" usemap="#tt">
<map name="tt">
<area shape="모양" coords="00,00(시작),00,00(끝) href="링크경로" target="위치">
<area shape="모양" coords="00,00(시작),00,00(끝) href="링크경로" target="위치">
</map>

✍ 태그 작성 시

<img src="/image/dog.jpg" usemap="#dog">
<map name="dog">
    <area shape="rect" coords="163,49,363,153" href="/image/head.jpg" target="_blank">
    <area shape="circle" coords="315,269,62" href="/image/disk.jpg" target="_self">
    <area shape="rect" coords="436,260,600,392" href="/image/leg.jpg" target="_self">
</map>

온라인 맵 에디터:http://mascheck.hu/imagemap/impmap/

3. audio 태그

---

• 웹 브라우저에서 플러그인의 도움없이 음악을 재생할 수 있게 만들어주는 태그

속성	의미
src	음악 파일의 경로 지정
controls	재생도구 출력 지정
autoplay	자동 재생여부 지정 (모바일에서 적용 X)
loop	반복여부 지정
preload	1. none : 미리 다운로드 하지 않음 (페이지 로딩시 다운로드 x) 2. metadata : 기본정보만 가져옴 (크기, 첫 프레임, 오디오 길이 등의 정보만) 3. auto : 미리 다운 로드 함 (음악을 듣지 않아도 페이지 로딩시)

✍ 태그 작성 시

<audio src="/mp3/012.아이유 - 밤편지.mp3" preload="metadata"  controls autoplay loop></audio>

4. video 태그

---

• 웹 브라우저에서 플러그인의 도움없이 미디어를 재생할 수 있게 만들어 주는 태그

속성	의미
src	미디어 파일에 대한 경로지정
controls	재생도구 출력 여부 지정
autoplay	자동재생할지 여부 지정 (모바일에서 적용 X)
loop	반복재생여부 지정
preload	재생시 모두 불러올지 지정
poster	재생전 출력할 이미지 출력 / 경로 입력
width	너비를 지정
height	높이를 지정

※ 비디오 형식은 mp4로 지정

✍ 태그 작성 시

<video src="video/미생(문서보안_예시).mp4" width="400px" height="400px" controls ></video>