[HTML] 이미지 및 미디어 관련 태그

TIL: 스스로 이해한 것을 바탕으로 정리하였기에 오류가 있을 수 있습니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

 

 

이미지 관련 태그

<img src="이미지의경로" alt="이미지설명구문" width="가로길이(px/%)" height="세로길이(px/%)">

* alt (이미지 설명 구문)의 목적

- 사진의 경로가 잘못되었거나 이미지를 제대로 표현할 수 있는 경우 대체 텍스트 용도

- 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명 문구

 

* width 속성과 height 속성

- 이미지의 가로, 세로 조정가능

- 고정길이(px)(기본값) : 화면 사이즈가 조정이 되어도 이미지의 크기는 변동이 없다.

- 가변길이(%) : 화면 사이즈 또는 부모 요소 사이즈에 따라 이미지의 크기도 같이 변동된다.

 

 

 

오디오 관련 태그

<audio src="" controls autoplay loop> </audio>

src : 오디오 경로

controls : 재생도구 출력 여부

autoplay : 자동 재생 여부 (크롬에선 불가)

loop : 반복 재생 여부

 

 

 

비디오 관련 태그

<video src="" controls autoplay loop width="" height="" poster=""> </video>

src : 비디오 경로

width/height : 비디오 크기 설정

poster : 비디오 재생전 삽입할 이미지