고래씌

[HTML] 5-2. 멀티미디어 관련 태그 본문

Front-End/HTML

[HTML] 5-2. 멀티미디어 관련 태그

고래씌 2023. 11. 1. 13:19

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
'Front-End/HTML' Related Articles more