Media | Image, Audio, Video

Image

웹 사이트에 이미지를 넣고 싶을 때 사용하는 태그이다. src와 alt는 필수로 포함되어야 하는 속성 값이다.

 

<img 
  src="현재 폴더에 있는 이미지의 상대경로 또는 웹의 이미지 주소(절대경로)" 
  alt="이미지 설명" 
/>

 

src는 사용할 이미지의 경로를 지정한다. alt( alternative text )는 네트워크의 연결 상태가 좋지 않아서 이미지를 받아오는 데 실패했을 때 또는 screen reader를 이용하는 사용자를 위해 이미지를 대체해서 보여줄 수 있는 텍스트이다.

 

중요하지 않은 이미지의 alt는 alt=""로 나타낼 수 있다.

img 태그로 할당하지 않아도 될 만큼 중요하지 않은 이미지(정보로서 중요하지 않은 이미지)의 경우에는, 다음과 같이 img 태그를 주석 처리 한 뒤에, no-image 속성을 할당하는 방법으로 작성할 수도 있다. 

 

<div class="feature" no-image>
  <!-- <img
    src="https://www..."
    alt="Bitbucket company image"
  /> -->
</div>

 

Audio

image 태그와 마찬가지로, 반드시 src 속성 값을 절대경로 또는 상대경로로 지정해 주어야 한다.

controls 속성을 사용하면, 볼륨 조정, 오디오의 길이 정보가 포함된 기본 UI를 보여줄 수 있다. 이 속성을 사용하지 않으면, 아무런 UI도 보여지지 않는다. autoplay는 자동 재생, loop는 반복재생을 켜는 속성이다.

 

<audio 
  src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav" 
  controls
  autoplay
  loop
>
</audio>

 

src 속성을 사용하는 대신, audio 태그 내부에 source 태그를 사용할 수도 있다. 특정 브라우저에서 wav나 mp3 파일을 지원하지 않는 경우, 다른 파일이 재생될 수 있도록 하고 싶을 때 여러개의 source 태그를 이용할 수 있다. 이 때 type 이라는 속성을 반드시 명시해야 한다.

+) audio의 source type

 

<audio>
  <source src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav" type="audio/wav"/>
  <source src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.mp3" type="audio/mpeg"/>
  <source src="https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.ogg" type="audio/ogg"/>
</audio>

 

Video

audio 태그와 완전히 동일하게 사용할 수 있다.

 

<video 
  src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" 
  controls
  autoplay
  loop
>
</video>

 

audio와 video의 기본 ui

 

iframe

html 문서 안에, 또 다른 html 문서를 embed 하고 싶을 때 iframe 태그를 이용한다.

 

<iframe 
  src="https://edu.goorm.io"
  frameborder="0"
>
</iframe>

 

유튜브의 share를 이용해서 동영상을 첨부할 때에도 iframe 태그를 이용한다.

 

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/H5v3kku4y6Q" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>