[HTML] 5. 이미지 및 멀티미디어 관련 태그

HTML의 이미지 및 멀티미디어 관련 태그를 알아보자

resources.zip

18.90MB

*해당 알집 파일을 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>