더보기
HTML의 이미지 및 멀티미디어 관련 태그를 알아보자
*해당 알집 파일을 html-workspace에 압축 푼 후 실행할 것
<5-1. 이미지 관련 태그>
이미지 관련 태그(정리 ver.)
✔️ <img src="삽입하고자하는이미지의경로" alt="이미지설명문구"
width="이미지의가로길이(px/%)" height="이미지의세로길이(px/%)">
src = source의 약자
img src= 경로는 필수지만 나머지는 선택사항임
👉🏻 alt="이미지설명문구"
- 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없을 때 대체 텍스트의 용도
- 시각 장애인들을 위한 스크린리더(화면 낭독기)에서 이미지를 읽어 주는 설명 문구
: 접근성을 높여 주는 용도
👉🏻 width 속성, height 속성
- 이미지의 가로, 세로길이를 조정 가능한 속성
px: 고정길이(화면의 사이즈가 변해도 이미지의 사이즈는 변하지 않음)
% : 가변길이(화면의 사이즈가 변하면 이미지의 사이즈도 변함)
이미지 관련 태그(코드 ver.)
<!DOCTYPE html>
<html>
<head>
<title>이미지 및 멀티미디어 관련 태그</title>
</head>
<body>
<h1>이미지 관련 태그</h1>
<h3>*scr 속성, alt 속성</h3>
<img src="resources/image/peng.jpg" alt="이 사진은 펭수입니다.">
<br>
<img src="resources/image/mountain.png" alt="이 사진은 산입니다.">
<br>
<hr>
<h3>width 속성, height 속성</h3>
<h4>고정 길이 단위(px): 화면 사이즈가 조정되더라도 이미지의 크기는 변동이 없음 (기본값)</h4>
<h5>김유저의 꽃밭!</h5>
<img src="resources/image/flower.jpg" width="200" height="150">
<img src="resources/image/flower2.jpg" width="200" height="150">
<img src="resources/image/flower3.jpg" width="200" height="150">
<img src="resources/image/flower4.jpg" width="200" height="150">
<img src="resources/image/flower5.jpg" width="200" height="150">
<h4>가변 길이 단위(%): 화면 사이즈 혹은 부모 요소의 사이즈에 따라 이미지의 크기도 같이 변동</h4>
<h5>김유저의 꽃밭!</h5>
<img src="resources/image/flower.jpg" width="15%" height="150">
<img src="resources/image/flower2.jpg" width="15%" height="150">
<img src="resources/image/flower3.jpg" width="15%" height="150">
<img src="resources/image/flower4.jpg" width="15%" height="150">
<img src="resources/image/flower5.jpg" width="15%" height="150">
<br>
</body>
</html>
<5-2. 멀티미디어 관련 태그 - 오디오>
오디오 관련 태그(정리 ver.)
👉🏻 <audio src="오디오경로" controls autoplay loop></audio>
autoplay: 자동 재생 여부 지정 (크롬 X, Internet Explorer O)
loop : 반복 재생 여부 지정
오디오 관련 태그(코드 ver.)
<audio src="resources/audio/major.mp3" controls autoplay loop></audio>
<5-3. 멀티미디어 관련 태그 - 비디오>
비디오 관련 태그(정리 ver.)
👉🏻 <video src="비디오경로" controls autoplay loop
width="가로길이" height="세로길이" poster="썸네일이미지경로"></video>
비디오 관련 태그(코드 ver.)
<video src="resources/video/video1.mp4" controls autoplay loop
width="400px" height="200px"
poster="resources/image/coffee.png"></video>