[HTML] HTML 멀티미디어

 

---

 

<img> : 이미지 삽입

 

 웹 사이트에 이미지를 표시하기 위해서는 <img>태그를 사용한다.

 

<img>태그의 속성에는 무엇이 있을까?

 

   # src 속성

   이미지 파일의 경로를 지정한다.

 

   쉽게 말해 어떤 사진을 넣을 것인지를 정한다고 생각하면 된다.

 

 

   #  alt 속성

    이미지를 대체하는 텍스트를 지정하는 속성으로, 이미지가 표시되지 않는 경우 사용자에게 이미지에 대한 정보를 전달하기 위해 사용한다.

 

 

 

   # width 속성, height 속성

    이미지의 너비와 높이를 지정하는 속성으로 픽셀 단위로 값을 지정 가능하다.

 

 

그 외에도 여러 다른 속성이 있지만,  자주 쓰는 속성들만 정리했다.

 

---

 

<video> : 비디오 삽입

 

 웹 사이트에 비디오를 삽입하기 위해서는 <video>태그를 사용한다.

 

 <video> 태그의 속성에는 무엇이 있을까?

 

   # src 속성

    동영상 파일의 경로를 지정하는 속성이다.

   삽입하고 싶은 동영상 파일의 경로를 가져온다고 생각하면 된다.

 

 

   # control 속성

    동영상 재생을 제어할 수 있는 컨트롤러를 표시하는 속성이다.

    이를 사용하면, 사용자가 동영상을 재생, 일시정지, 음소거 등을 조절할 수 있다.

 

 

   # width속성, height 속성

    이미지의 너비와 높이를 지정하는 속성으로 픽셀 단위로 값을 지정 가능하다.

  # autoplay 속성

    페이지가 로드될 때 동영상을 자동으로 재생하도록 설정하는 속성이다.

 

   # loop 속성

    동영상을 반복 재생하도록 설정하는 속성이다.

 

   # muted 속성

    동영상을 음소거 상태로 시작하도록 설정하는 속성

 

   # poster 속성

    동영상이 재생되기전에 표시되는 이미지(커버 이미지)를 지정하는 속성이다.

 

---

 

<audio> : 오디오 삽입

 

 웹 사이트에 오디오를 삽입하기 위해서는 <audio>태그를 사용한다.

 

 <audio> 태그의 속성에는 무엇이 있을까?

 

 

   # src 속성

   오디오 파일의 경로를 지정하는 속성이다.

   삽입하고 싶은 오디오 파일의 경로를 가져온다고 생각하면 된다.

 

   # controls 속성

   # autoplay 속성

   # loop 속성

   # muted 속성

 

   # volume 속성

    오디오의 볼륨을 조절하는 속성으로 0.0에서 1.0 상이의 값을 가진다.

 

---

inframe

  인라인 프레임이라는 뜻으로 html 문서 안에서 다른 html 문서를 보여준다.

 대표적인 예로는 지도를 삽입하는 경우가 있다.

 

  <inframe> 태그 내에 src 속성을 이용해 다른 html 문서를 보여줄 수 있는데, 이 때 src 속성에는 다른 html 파일을 넣으면 된다.

 

 다음이 그 예시이다.

 

---