웹/HTML

Multi media Tags

  • 이미지
    • 웹페이지에 이미지를 삽입하는 경우, img tag를 사용한다.
      src : 이미지 파일 경로.
      alt : 이미지 파일이 없을 경우 표시되는 문장.
      width : 이미지의 너비( CSS에서 지정하는 것이 일반적)
      height : 이미지의 높이( CSS에서 지정하는 것이 일반적)
  • 미디어
    • audio
      • audio 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
        src : 음악 파일 경로.
        preload : 재생 전에 음악 파일을 모두 불러올 것인지 지정.
        autoplay : 음악 파일을 자동 재생할 것인지 지정.
        loop : 음악을 반복 재생 할 것인지 지정.
        controls : 음악 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있음.
        <!DOCTYPE html>
<html>
  <body>
    <audio src="assets/audio/example.mp3" controls></audio>
  </body>
</html>​
        웹브라우저 별로 지원하는 음악 파일 형식이 다르다.
        IE : MP3
        Chrome : MP3, Wav, Ogg
        Firefox : MP3, Wav, Ogg
        Safari : MP3, Wav
        Opera : MP3, Wav, Ogg

        source 태그를 사용하여 파일 형식의 차이 문제를 해결 할 수 있다. type 어트리뷰트는 생략 가능하다.
      • <!DOCTYPE html>
<html>
  <body>
    <audio controls>
      <source src="assets/audio/Kalimba.mp3" type="audio/mpeg">
      <source src="assets/audio/Kalimba.ogg" type="audio/ogg">
    </audio>
  </body>
</html>
    • 비디오
      video 태그는 HTML5에서 새롭게 추가된 태그이다. IE8 이하에서는 사용할 수 없다.
      src : 동영상 파일 경로.
      poster : 동영상 준비 중에 표시될 이미지 파일 경로.
      preload : 재생 전에 동영상 파일을 모두 불러올 것인지 지정.
      autoplay : 동영상 파일을 자동 재생 할 것인지 지정.
      loop : 동영상을 반복 재생할 것인지 지정.
      controls : 동영상 재생 도구를 표시할 것인지 지정. 재생 도구의 외관은 브라우저마다 차이가 있다.
      width : 동영상의 너비를 지정.
      height : 동영상의 높이를 지정.

      audio 태그와 마찬가지로 파일 형식의 차이에 문제가 있을 수 있다. source 태그를 사용하여 형식 차이 문제를 해결 할 수 있으며 type 어트리뷰트는 생략 가능하다.

'웹 > HTML' 카테고리의 다른 글

Layout  (0) 2021.07.21
사용자와의 커뮤니케이션을 위한 폼 태그  (0) 2021.07.21
List and Table tags  (0) 2021.07.21
Hyperlink  (0) 2021.07.21
텍스트 관련 태그  (0) 2021.07.20

    티스토리툴바