<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 및 멀티미디어 관련 태그</title>
</head>
<body>
<!--
이미지 삽입 태그
<img src="삽입하고자하는 이미지 경로" [alt="이미지설명문구", width="가로길이(px/%단위)", hieght="세로길이(px/%)"]>
-->
<h1>이미지 관련 태그</h1>
<h3>* src 속성</h3>
<figure> <!-- 양쪽 여백이 생김 -->
<img src="resources/img/cat-1647775_640.jpg"> <!-- 상대경로 -->
<!-- <img src="C:\jhs\frontwork\html5\resources\img\cat-1647775_640.jpg"> 절대경로 -->
<figcaption>귀여운 고양이</figcaption>
</figure>
<br>
<h3>* alt 속성</h3>
<p>
- 사진의 경로가 잘못되었거나 이미지를 제대로 표현하지 못할 경우 대체 텍스트의 용도<br>
- 시각장애인을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명 문구
</p>
<img src="resources/img/cat-1647775_640.jpg" alt="아가 고양이 나들이"><br> <!-- alt 사용하는 이유 : 그림이 없을 때 나타나는 글씨, 글씨를 읽어줌-->
<img src="resources/img/cat.jpg" alt="아가 고양이 나들이"> <!-- 경로가 잘못되었을 경우 -->
<br>
<h3> width와 height 속성</h3>
<p>
이미지의 가로, 세로 길이 조절하는 속성<br>
고정길이(px), 가변길이(%)로 지정 => 기본값은 px
</p>
<br>
<h4>고정길이단위(px) === 기본값 : 화면사이즈가 조정되어도 이미지의 크기는 변하지 않는다.</h4>
<img src="resources/img/cat-1647775_640.jpg" width="200" height="150">
<img src="resources/img/cat-4894153_640.jpg" width="200" height="150">
<img src="resources/img/cat_baby_animals_kittens_animals-1147139.jpg" width="200" height="150">
<img src="resources/img/thumb-Bimg_20160830182658_rnuhpunc.jpg" width="200" height="150">
<br>
<h4>가변길이단위(%) : 화면사이즈 또는 부모요소사이즈에 따라 이미지의 크기도 같이 변화</h4>
<img src="resources/img/cat-1647775_640.jpg" width="23%" height="150">
<img src="resources/img/cat-4894153_640.jpg" width="23%" height="150">
<img src="resources/img/cat_baby_animals_kittens_animals-1147139.jpg" width="23%" height="150">
<img src="resources/img/thumb-Bimg_20160830182658_rnuhpunc.jpg" width="23%" height="150">
<hr>
<h1>미디어 관련 태그</h1>
<h3>오디오 관련 태그</h3>
<!--
<audio src="삽입하고자하는 오디오 경로" [controls autoplay loop]></audio>
<audio src="삽입하고자하는 오디오 경로" [controls autoplay loop] />
-->
<audio src="resources/audio/섬집아기(밤하늘ver).mp3" controls loop></audio>
<hr>
<h3>비디오 관련 태그</h3>
<!--
<video src="삽입하고자하는 비디오 경로" [controls autoplay loop poster="썸네일 이미지 경로" width="" height=""]></video>
-->
<video src="resources/video/video1.mp4" controls width="400" height="300" poster="resources/img/cat-1647775_640.jpg"></video>
</body>
</html>