<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 사용</title>
</head>
<body style="background-color: yellow">
<!-- <img> : HTML 문서에 이미지를 추가하기 위한 태그
파일 형식 : GIF, JPG, PNG (GIF, PNG 는 투명색까지 지원됨)
주요 속성 : src(경로), alt(이미지가 안뜨면 대체로 뜨는 문구), title(이미지에 마우스를 갖다댔을 때 텍스트 박스 보여짐,
width/height, style, border
-->
<img src="aladin.jpg" width="400">
<br><br>
<img src="nothing.jpg" alt="이미지 없음"><!-- nothing.jpg라는 이미지 파일이 없는 경우 -->
<br><br>
<img src="aladin.jpg" width="400" title="쟈스민 공쥬~><">
<br><br>
<img alt="" src="http://placehold.it/300x200"><!-- 이미지 들어갈 위치에 가상의 이미지 추가해주는 링크 -->
<img alt="" src="http://placehold.it/200x200"><!-- 뒤에 사이즈 적어주면 됨 -->
<br>
<hr>
<!-- 이미지에 링크 걸기 img 태그를 a 태그로 감싸주면 됨 -->
<a href="https://www.w3.org/"><img alt="" src="HTML5_logo.png" width="300"></a>
<hr>
<!-- 이미지에 제목 달기 : figure, figcaption -->
<figure>
<figcaption style="text-align: center;">[그림1] 알라딘</figcaption>
<img alt="펭귄" src="aladin.jpg" width="500">
</figure>
<hr>
<!-- 상대 경로를 지정하여 이미지 폴더에서 가져오기 -->
<img alt="" src="images/sang.jpg" width="400">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 열기</title>
</head>
<body>
<!-- <audio> 태그
파일 형식 : mp3, ogg, wav
주 속성 : src, type, preload, autoplay, loop, controls(음악파일을 컨트롤바 안보여주고 bgm으로 재생하는 형태 or 컨트롤바를 보여주냐 안보여주냐 속성)
-->
<audio src="audios/eagle.mp3" controls></audio><br>
<audio src="audios/eagle.mp3" controls autoplay></audio><br><!-- autoplay : 노래 자동 재생, loop 반복 재생 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오 열기</title>
</head>
<body>
<!-- <video> 태그
파일 형식 : mp4, WebM
주요 속성 : src(경로), poster(버퍼링동안 띄워줄 이미지),
preload, autoplay(자동 재생), loop, controls, width/height, muted(동영상 재생은 하되 음소거)
-->
<video src="videos/movie.mp4" controls></video><br><!-- 비디오 띄우기 -->
<video src="videos/mov_bbb.mp4" controls autoplay></video><br><!-- 자동재생 속성 추가 -->
<video src="videos/mov_bbb.mp4" controls autoplay loop></video><br><!-- 무한반목 속성 추가 -->
<hr>
<!-- youtube 연동하는 방법 : iframe을 사용하여 연결
youtube 동영상 -> 마우스 우클릭 -> 소스 코드 복사 -> 붙여넣기
youtube에서 제공하는 형태로 그래도 사용, 크기만 조절
-->
<iframe width="690" height="388" src="https://www.youtube.com/embed/xD33beWH6DU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
