[HTML] <img> 태그 / <audio> 태그
by mini_min[HTML]
<img> 태그 / <audio> 태그
✔️ img 태그
: 이미지 태그이다. HTML 문서에 이미지를 삽입할 때 사용한다.
: src 속성에 이미지 URL 경로를 alt 속성에 이미지 설명을 기술한다.
: 이미지가 깨지거나 없을 경우 alt 속성의 설명이 표시된다.
📓 속성
- alt : 이미지 설명 기술
- src : 이미지에 대한 URL 지정
- usemap : 요소와 이미지 맵을 연결한다.
- ismap : 서버 측 이미지 맵을 지정한다.
- width : 너비 지정
- height : 높이 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> img 태그 </h3>
<img src="cat.png">
<img src="dog.png" alt="강아지">
<hr>
<img src="cat.png" title="고양이" alt="고양이" width="200" >
<img src="cat.png" title="고양이" alt="고양이" style="width: 100px; border: 5px solid blue;" >
<hr>
<img src="cat.png" title="고양이" alt="고양이" style="width: 200px; vertical-align: top;" >
<img src="cat.png" title="고양이" alt="고양이" style="width: 100px; vertical-align: top;" >
<hr>
<img src="cat.png" title="고양이" alt="고양이" style="width: 200px; vertical-align: middle;" >
<img src="cat.png" title="고양이" alt="고양이" style="width: 100px; vertical-align: middle;" >
<hr>
</body>
</html>
✔️ audio 태그
: 오디오 태그이다.
: 유효한 MIME 타입을 가진 오디오 파일이 웹페이지에 포함될 수 있다.
: mp3, WAV, AIFF 등 오디오 파일등을 웹페이지에 삽입하는데 사용한다.
📓 속성
- src : 미디어 자원의 주소 지정
- autoplay : 미디어를 자동 재생
- loop : 미디어 반복 재생
- controls : 사용자 에이전트가 제공하는 기본 컨트롤러 사용
✔️ video 태그
: 동영상 스트림 태그이다.
📓 속성
- src : 미디어 자원의 주소 지정
- poster : 비디오를 보여줄 수 없을 때 사용하는 이미지
- preload : 미디어의 다운로드 상태 결정
- autoplay : 미디어를 자동 재생
- loop : 미디어 반복 재생
- controls : 사용자 에이전트가 제공하는 기본 컨트롤러 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> video </h3>
<video src="video.mp4" controls="controls"></video>
<hr>
<h3> audio </h3>
<audio src="test.mp3" controls="controls"></audio>
<hr>
<h3> audio </h3>
<audio controls="controls" loop="loop">
<source src="test.mp3" type="audio/mp3">
</audio>
<hr>
</body>
</html>
'HTML' 카테고리의 다른 글
| [CSS] CSS 프로퍼티 값 (단위) (0) | 2022.09.13 |
|---|---|
| [CSS] CSS 기초 문법 (import / link) (0) | 2022.09.13 |
| [HTML] <label> 태그 / <fieldset> 태그 (0) | 2022.09.13 |
| [HTML] <button> 태그 type / value, readonly, disable, hidden, image (0) | 2022.09.13 |
| [HTML] 폼 관련 태그 <form> / <input> type 속성값 (0) | 2022.09.13 |
블로그의 정보
개발자 미니민의 개발로그
mini_min