05_html : 멀티미디어 관련 태그

 

---

이미지 관련 태그

 

---

 

img 태그는 src 속성에 경로를 설정하여 이미지 파일을 불러온다.

<img src="../sample/image/city1.PNG">

 

 

width, height

 - 크기 지정

 - px(고정된단위) %(가변크기단뒤) 로 크기 지정 가능

 

고정 크기 단위(px): 화면 사이즈가 줄어도 크기가 변하지 않음
<img src="../sample/image/flower1.PNG"width="200px" heigth="150px">

가변 크기 단위(%) : 화면 사이즈 혹은 기준 사이즈에 따라 크기가 변경됨
<img src="../sample/image/flower1.PNG"width="15%" heigth="150px">

 

 

<map>

- image-map은 클릭할 수있는 구역을 가지는 의미

 

area

- 이미지맵의 클릭할 수 있는 구역을 정의하는데 사용

 

name

- map의 필수 속성, usemap과 결합하여 이미지와 맵사이의 관계 설정해줌.

 

target="_blank"

- 새창 띄워 이동

 

target="_self"

- 현재 창에서 이동

(1) 작성 방법
<img src="이미지URL" usemap="#맵이름">
<map name ="맵이름">
     <area shap ="모양" coords="좌표" href="URL">
</map>    

(2) 예시
<img src="../sample/image/river1.PNG" usemap="#map">
    <map name="map">
        <area shap="rect" coords="00,00,300,500"
        href="https://www.naver.com" target="_blank">
        <area shap="circle" coords="450,250,150"
         href="https://www.google.com" target="_self">
        </map>

 

 

alt 속성

- 대체문구

- 이미지 출력이 되지 않을때 이미지 대신 표시할 문구값

 

 

---

오디오 관련 태그

 

---

 

<audio>

- src에 오디오 경로를 지정하면 오디오 파일을 재생하는 플레이어가 추가 됨.

 

controls 

- 오디오 제어기의 표시 

 

loop

- 자동 반복 재생 설정

 

muted

- 음소거 설정

 

 

<audio src="오디오URL" controls="controls"
    loop="loop"></audio>

 

 

---

비디오 관련 태그

 

---

 

 

poster

- 썸네일 이미지 적용

 

 

autoplay

- 자동 재생 설정

 

 

controls

- 비디오 제어기 표시 

 

 

loop

- 자동 반복 설정

 

 

width, height

- 크기 설정 가능

 

 <video src="비디오URL" controls="controls"
    poster="이미지URL"></video>