04_이미지 및 멀티미디어 태그

이미지 관련 태그

  <img src="삽입하고자 하는 이미지의 경로" alt="이미지 설명 문구"
  width="이미지의 가로 길이(고정길이-px / 가변길이-%)" height="이미지의 세로길이(px,%)">

    <h3>* src 속성, alt 속성</h3>
    <img src="resources/image/peng.jpg" alt="이 사진은 펭수이다.">
    <br>
    <img src="resources/image/jun.png" alt="어? 예쁘다.">
    <br>
    <p>
        * alt <br>
        - 사진의 경로가 잘못되었거나, 이미지를 제대로 표현할 수 없을 때,<br>
          대체 텍스트의 용도로 사용<br>
        - 시각장애인을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구로 사용함(접근성이 높아짐)<br>
    </p>

    <hr>
    <h3>* width, height</h3>
    <p>
      	* width, height
        - 이미지의 가로, 세로 길이를 조정 가능한 속성<br>
        - 고정길이의 px, 가변길이의 %로 구성됨.
    </p>

    <h5>꽃밭!</h5>
    <h4>고정길이단위(px) == 기본값 : 화면사이즈가 조정되더라도 이미지의 크기는 변동이 없음.</h4>
    <img src="resources/image/flower.jpg" width="200px" height="150px">
    <img src="resources/image/flower2.jpg" width="200px" height="150px">
    <img src="resources/image/flower3.jpg" width="200px" height="150px">
    <img src="resources/image/flower4.jpg" width="200px" height="150px">
    <img src="resources/image/flower5.jpg" width="200px" height="150px">
    
    <h4>가변길이단위(%) : 화면사이즈 혹은 부모 요소 사이즈에 따라서 이미지의 크기도 같이 변동됨.</h4>
    <img src="resources/image/flower.jpg" width="15%" height="150px">
    <img src="resources/image/flower2.jpg" width="15%" height="150px">
    <img src="resources/image/flower3.jpg" width="15%" height="150px">
    <img src="resources/image/flower4.jpg" width="15%" height="150px">
    <img src="resources/image/flower5.jpg" width="15%" height="150px">

오디오 관련 태그

<audio src="오디오 파일 경로" controls autoplay loop></audio>
autoplay : 자동 재생여부 지정(크롬X, IE O)
loop : 반복 재생여부 지정

<audio src="resources/audio/major.mp3" controls autoplay loop></audio>

비디오 관련 태그

<video src="비디오 파일 경로" controls autoplay loop 
width="가로길이" height="세로길이" poster="썸네일이미지"></video>
autoplay : 자동 재생여부 지정(크롬X IE O)
loop : 반복 재생여부 지정
poster : 썸네일 이미지(대표사진)       

<video src="resources/video/video1.mp4" controls autoplay loop
       width ="400" height="200" 
       poster="resources/image/coffee.png"></video>