<img></img>태그

저장소 내부에 있는 사진 혹은 외부에 있는 사진을 페이지에 출력하는 기능을 하는 단일 태그로 설정은 속성으로 한다.

src : 파일이 있는 위치를 설정(local, web)

width : 출력될 이미지의 넓이(가로)를 설정

height : 출력될 이미지의 높이(길이)를 설정

alt : src속성에 설정된 이미지가 없으면 출력될 문구 지정

파일의 넓이, 높이를 지정하지 않으면 이미지가 가진 크기를 그대로 출력한다.

<img src="../css/eunji.png"><br>
<img src="../css/eunji.png" width="200" height="200"><br>
<!-- 해당 경로에 파일이 없어서 이미지가 불러와지지 않는 경우 -->
<img src="./css/eunji.png" alt="eunji 미모티콘" width="200" height="200">

웹에 있는 이미지 불러오기

해당 이미지의 주소를 복사해서 불러올 수 있다.

<img src="https://cdn.bhdw.net/im/newjeans-hyein-omg-mv-shoot-wallpaper-108334_w635.webp"
alt="뉴진스 혜인" width="800" height="500">

img 태그의 map 태그

이미지를 구역(좌표) 별로 나눠서 링크를 걸어줄 때 사용하는 태그로 img 태그에 usemap 속성을 지정해줘야 한다.

map 태그 안에는 area 태그를 이용해서 좌표를 나눠줘야 한다.

shap 속성 : 구역의 모양을 지정하는 속성

coords 속성 : 구역을 좌표로 지정해서 해당 범위를 지정해주는 속성

href 속성 : 지정된 구역을 선택했을 때 실행할 링크를 지정하는 속성

<h3>이미지 맵 이용</h3>
<div id="imgMap">
    <img src="https://cdn.bhdw.net/im/newjeans-hyein-omg-mv-shoot-wallpaper-108334_w635.webp" alt="뉴진스 혜인"
    width="600" height="600" usemap="#target">
    <map name="target">
       <area shape="rect" coords="0,0,100,500" href="http://search.naver.com/search.naver?query=해린" alt="">
       <area shape="rect" coords="100,0,200,500" href="http://search.naver.com/search.naver?query=하니" alt="">
       <area shape="rect" coords="200,0,300,500" href="http://search.naver.com/search.naver?query=해린" alt="">
       <area shape="rect" coords="300,0,400,500" href="http://search.naver.com/search.naver?query=다니엘" alt="">
       <area shape="rect" coords="400,0,500,500" href="http://search.naver.com/search.naver?query=혜인" alt="">
    </map>
</div>

<audio></audio>태그

웹 브라우저에서 플러그인 도움 없이 음악을 재생할 수 있게 만들어주는 태그로 각 브라우저에 맞게 플레이 ui가 만들어져 있다. ogg, mp3 파일을 사용할 수 있으며 컨트롤 버튼을 만들기 위해서는 controls 속성을 주면 되고, 웹 페이지가 실행됐을 때 자동 재생하려면 autoplay 속성을 주면 된다.

💡 단, 크롬에서는 자동 재생 기능이 막혀있기 때문에 autoplay 속성을 줘도 자동 실행되지 않는다. 추가로 모바일에서도 적용 불가능하다.

<h2>오디오 태그 이용</h2>
<audio src="./audio/Kalimba.ogg" controls></audio>
<audio src="./audio/Kalimba.ogg" controls autoplay></audio>
<audio src="./audio/major.mp3" controls></audio>

<video></video>태그

웹 브라우저에서 플러그인의 도움 없이 미디어를 재생할 수 있게 만들어주는 태그로 mp4, ogv, webm 형식의 동영상 파일을 올릴 수 있다. 브라우저마다 처리가 다르기 때문에 각 브라우저에 대한 예외 처리 구현을 해주는 것이 좋다.

오디오 태그와 마찬가지로 controls 속성을 사용해서 재생 버튼을 줄 수 있고, 이미지 태그처럼 동영상 파일의 넓이, 높이를 지정할 수 있다.

loop 속성을 이용하면 반복 재생 여부를 설정할 수 있고 poster 속성을 이용하면 재생 전 출력할 이미지를 지정할 수 있다.

<h2>비디오 태그 이용</h2>
<video src="./video/video1.mp4" controls width="300" height="300" loop></video>
<video src="./video/movie.ogv" controls width="300" height="300"></video>
<video src="./video/Wildlife.webm" poster="../css/eunji.png"
			controls width="300" height="300"></video>