[HTML] 이미지 / 미디어 관련 태그 (img / audio /video)

이미지 관련 태그 <img>

태그	속성	사용법
<img> (empty tag)	src : 삽입하고자하는 이미지의 경로 alt: 이미지 설명 문구 (대체문구) width: 이미지 가로크기(px, %) height: 이미지 세로크기(px, %)	<img src = " "   alt = " "   width = " "(px/ %)   height = " "(px/%)  >

src속성

-삽입하고자 하는 이미지의 경로

- 경로에는 상대경로와 절대경로가 있음

- 상대경로: 현재 작업중인 위치를 기준으로 경로를 찾는 방식

- 절대경로: 상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식

 

alt 속성

- 사진의 경로가 없는 경로거나 이미지를 제대로 표현살 수 없는 경우 대체 텍스트의 용도
- 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명문구
-  웹 접근성 : 사용자의 신체적 특징, 지역, 나이, 지식수준 등을 고려하여 가능한 많은 사용자가 불편 없이 이용할 수 있도록 서비스를 만들어서 제공하는 것

width와 height속성

- 이미지의 가로, 세로길이 조정가능
- 고정길이(px), 가변길이(%)로 지정이 가능

- 고정길이단위(px) :

   기본값 , 화면사이즈가 조정되더라도 이미지 크기가 변동되지 않음

 

    <img src="resources\image\flower.jpg" alt=" 이 사진은 꽃1입니다" width = "100" height = "100"/>
    <img src="resources/image/flower2.jpg" alt="이 사진은 꽃2입니다"  width = "100" height = "150"/>
    <img src="resources/image/flower3.jpg" alt="이 사진은 꽃3입니다"  width = "100" height = "100"/>
    <img src="resources/image/flower4.jpg" alt="이 사진은 꽃4입니다"  width = "100" height = "100"/>

    <br>
    <h4>가변길이단위(%): 화면사이즈 혹은 부모요소 사이즈에 따라 이미지 크기도 같이 변동</h4>
    <img src="resources\image\flower.jpg" alt=" 이 사진은 꽃1입니다" width = "15%" height = "15%"/>
    <img src="resources/image/flower2.jpg" alt="이 사진은 꽃2입니다"  width = "15%" height = "15%"/>
    <img src="resources/image/flower3.jpg" alt="이 사진은 꽃3입니다"  width = "15%" height = "15%"/>
    <img src="resources/image/flower4.jpg" alt="이 사진은 꽃4입니다"  width = "15%" height = "15%"/>

 

---

오디오 관련 태그 <audio>

 

태그	속성	사용법
<audio>	src  : 삽입하고자 하는 영상의 경로  controls :플레이어 노출여부  autoplay : 자동재생여부  loop: 반복재생여부	<audio src = ""    controls ( = "controls" )      autoplay (  = "audioplay" )      loop ( =  "loop" ) >  * 속성명과 속성값이 같을 경우, 속성값을 생략함

 

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

---

비디오 관련 태그 <video>

태그	속성	사용법
<video>	src : 삽입하고자하는 이미지의 경로 alt: 이미지 설명 문구 (대체문구) width: 이미지 가로크기(px, %) height: 이미지 세로크기(px, %) src  : 삽입하고자 하는 영상의 경로  controls :플레이어 노출여부  autoplay : 자동재생여부  loop: 반복재생여부 poster: 썸네일 이미지지정	<video src = " "     alt = " "    width = " "(px/ %)    height = " "(px/%)     controls ( = "controls" )     autoplay (  = "audioplay" )    loop ( =  "loop" )    posrter=  " ">

 

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