HTML - 요소(img, audio, video)

<img />

src : (필수)이미지 경로의 기본 속성. srcset 을 사용할 수 없는 환경에서 동작한다.

alt : (필수)이미지의 대체 텍스트.

width : 이미지의 가로 사이즈. srcset 을 사용할 경우 사이즈가 고정된다.

height : 이미지의 세로 사이즈.

srcset : 사용할 이미지들의 경로와 해당 이미지의 원본 크기를 지정한다.
*원본 크기는 x와 w 디스크립터를 필요에 맞게 사용하기(x=픽셀 비율, w=사이즈)
sizes : 미디어조건(선택적)과 그에 따라 최적화되어 출력될 이미지 크기를 지정한다.

*srcset과 sizes는 IE를 지원하지 않음.

<img
  srcset="images/small.png 400w,
          images/medium.png 700w,
          images/large.png 1000w"
  sizes="(min-width: 701px) 1000px,
         (min-width: 401px) 700px,
         400px"
  src="images/image.png"
  alt="image" />

 

[출처] heropy.blog/2019/06/16/html-img-srcset-and-sizes/

 

<audio></audio>

autoplay : 준비되면 바로 재생한다. (true, false)

controls : 제어 메뉴를 표시한다. (true, false)

loop : 재생이 끝나면 처음부터 다시 재생한다. (true, false)

preload : 페이지가 로드될 때 파일을 로드할지를 지정한다.

            (none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드)

src : (필수)컨텐츠 경로의 기본 속성.

muted : 음소거 여부를 지정한다. (true, false)

*autoplay가 지정된 경우, preload는 무시됨.

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

 

<video></video>

autoplay : 준비되면 바로 재생한다. (true, false)

controls : 제어 메뉴를 표시한다. (true, false)

loop : 재생이 끝나면 처음부터 다시 재생한다. (true, false)

poster : 동영상 썸네일 이미지 경로.

preload : 페이지가 로드될 때 파일을 로드할지를 지정한다.

            (none: 로드하지 않음, metadata: 메타데이터만 로드, auto: 전체 파일 로드)

src : (필수)컨텐츠 경로의 기본 속성.

muted : 음소거 여부를 지정한다. (true, false)

width : 동영상 가로 사이즈.

height : 동영상 세로 사이즈.

*autoplay가 지정된 경우, preload는 무시됨.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>