고래씌
[HTML] 5-2. 멀티미디어 관련 태그 본문
1. 멀티미디어 관련 태그
1) 이미지 관련태그
<img src="삽입하고자 하는 이미지의 경로" alt="이미지 설명 문구" width="이미지의 가로크기" height="이미지의 세로크기 지정"> |
- alt : 이미지에 대한 설명부분. alt는 이미지가 깨졌을 때 나타남.
☞ 사진의 경로가 잘못되거나, 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도<br>
☞ 시각장애인들을 위한 스크린 리더에서 이미지를 읽어주는 설명문구
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 및 멀티미디어 관련 태그</title>
</head>
<body>
<h1>이미지 관련 태그</h1>
<!-- <img src="삽입하고자 하는 이미지의 경로" alt="이미지 설명 문구" width="이미지의 가로크기" height="이미지의 세로크기 지정"> -->
<h3> * src 속성 alt 속성</h3>
<!-- <img src ="C:\FrontendWorkspace\1_HTML_Workspace\resources\image\passion.jpg"> 절대 경로 -->
<img src="resources/image/passion.jpg" width="340" height="340" alt="열정맨"> <!--최상위 경로 밑에 resources 아래에 있음 -->
<!--alt 는 이 이미지에 대한 설명임. alt는 이 이미지가 깨졌을 때 나타남-->
<br>
<img src="/resources/image/passion2.jpg" width="340" height="340" alt="최고심">
<br>
<p>
* alt<br>
- 사진의 경로가 잘못되거나, 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도<br>
- 시각장애인들을 위한 스크린 리더에서 이미지를 읽어주는 설명문구
</p>
</body>
</html>
① width와 height 속성
- 이미지의 가로, 세로길이 조정가능
- 고정길이(px), 가변길이(%)로 지정
- 미 지정시 기본값은 px
- 고정길이 (px) == 기본값 : 화면사이즈가 조정이 되어도 이미지의 크기는 변동이 없음
<body 부분>
<img src="resources/image/nuguri1.gif" alt="" width="200" height="150">
<img src="resources/image/nuguri2.gif" alt="" width="200" height="150">
<img src="resources/image/nuguri3.gif" alt="" width="200" height="150">
<img src="resources/image/dog1.gif" alt="" width="200" height="150">
<img src="resources/image/dog2.gif" alt="" width="200" height="150">
<img src="resources/image/dog3.gif" alt="" width="200" height="150">
- 가변길이 (%) : 화면 사이즈 혹은 부모요소사이즈(현재는 body)에 따라 이미지의 크기도 같이 변동
<img src="resources/image/animal1.gif" alt="" width="23%" height="250">
<img src="resources/image/animal2.gif" alt="" width="23%" height="250">
<img src="resources/image/animal3.gif" alt="" width="23%" height="250">
<img src="resources/image/bono.jpg" alt="" width="23%" height="250">
2) 미디어 관련 태그
① 오디오 관련 태그
- <audio src="" controls autoplay loop></audio>
- src : 오디오 경로
- controls : 자동 재생 여부 지정 → IE에서는 실행가능한 속성이었으나 현재는 지정불가
- loop : 반복 재생 여부
<audio src="resources/audio/major.mp3" controls autoplay loop></audio>
=> 반복 재생되는 것을 확인
② 비디오 관련 태그
- <video src="" controls autopaly loop width="400px" height="200px" poster=""></video>
- src : 비디오 파일이 존재하는 경로
- poster : 썸네일 파일이 존재하는 경로
<video src = "resources/video/video1.mp4" width="400px" height="200"
poster="resources/image/flower.jpg"></video>
'Front-End > HTML' 카테고리의 다른 글
[HTML] 회원가입 폼 만들기 실습문제 (1) | 2023.11.01 |
---|---|
[HTML] 5-3. 입력양식 관련 태그, 폼 관련 태그 (1) | 2023.11.01 |
[HTML] 5-1. 표관련태그 (0) | 2023.11.01 |
[HTML] 4-1. 목록관련태그 (1) | 2023.11.01 |
[HTML] 3. 글자관련태그 (0) | 2023.11.01 |