Audio Tag

문서에 소리 콘텐츠를 포함할 때 사용하는 태그

HTML의 Audio Tag는 문서에 음성파일을 삽입할 때 사용하는 태그다.

Audio Tag의 속성

1. src : 상대경로를 사용해서 해당 음성파일 적용

2. controls : 지정한 파일의 오디오 플레이어를 적용

3. autoplay : 접속과 동시에 적용한 음악파일을 재생

4. loop : 지정한 음성파일의 반복재생 유무 적용

5. type : 지정한 음성파일의 MIME Type을 적용

  <audio controls autoplay loop>
    <source src="./assets/audios/windSound.mp3" type="audio/mpeg">
  </audio>

브라우저마다 제공하는 음성 파일의 형식이 다르기 때문에 이 점을 고려해서 마크업해야 한다.

Vedio Tag

비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입하는 태그

HTML의 Vedio Tag는 <audio>와 기본적인 사용 방법이 동일하다.

또한 오디오 콘텐츠에도 사용할 수 있지만 <audio>가 사용자 경험(User Experience)에 좀 더 적합하다.

  <vedio controls autoplay loop>
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
  </vedio>

Iframe Tag

현재 문서 안에 다른 HTML 페이지를 삽입하는 태그

HTML의 Iframe Tag는 중첩 브라우징 맥락을 나타내는 태그다.

즉 HTML문서안에 또 다른 HTML문서, 컨텐츠등을 임베디드할 때 사용한다.

<iframe>는 대부분 직접 작성하지 않고 해당 영상의 공유 Embed링크를 사용한다.

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

참고 자료

<audio> - HTML: Hypertext Markup Language - MDN Web Docs
<vedio> - HTML: Hypertext Markup Language - MDN Web Docs
<iframe> - HTML: Hypertext Markup Language - MDN Web Docs