html기초 : 멀티미디어 관련 태그

1.개념

멀티미디어 태그란 텍스트뿐만 아니라 이미지, 음악, 영상 등 다양한 멀티미디어를 웹컨텐츠로 사용하는 것이다.

<예시 1 : 멀티미디어 태그>

  1) 이미지 태그<img>

• 이미지태그는 넣고자 하는 이미지에 대한 속성을 작성하는 태그이며, 빈 요소이기에 종료 태그가 없다.
• <img src="이미지 url" alt="이미지 대체 문구" width="430px" height="320px"/>
  - src속성(property)은 source의 약자로 <a>태그의 href속성처럼 불러올 이미지의 파일경로 또는 URL을 값(value)으로 갖는다.
  - alt는 Alternative text의 약자로 대체 문구라는 뜻을 갖는다. alt 속성은 말 그대로 이미지가 정상 출력되지 않거나
    이미지 파일이 존재하지 않는 경우, 이미지 대신 표시할 문구를 값으로 갖는다.
  - width와 height속성은 이미지의 높이나 너비를 지정하는 속성이다. 그러나 특별한 경우를 제외하곤 이미지
    사이즈조정 등 스타일과 관련된 부분은 CSS로 조정하는 것이 좋다.

  2) 오디오 태그<audio>

• 오디오태그는 오디오 파일이 저장된 경로를 src(source)값으로 설정하면, 웹 페이지에 해당 오디오 파일을 재생하는 플레이어가 추가된다.
• <audio countrols>
      <source src="assets/audio/music.mp3" type="audio/mpeg">
  </audio>
  - src 속성(property)은 오디오파일이 저장된 경로를 값(value)으로 갖는다.
  - type 속성은 생략할 수 있다.

  3) 비디오 태그<video>

• 비디오태그는 비디오 파일이 저장된 경로를 src(source)값으로 설정하면, 해당 비디오 파일을 재생할 수 있는 플레이어가 웹 페이지에 추가된다.
• <video controls>
      <source src="assets/video/video1.mp4" type="video/mp4" height="640" width="360" >
  </video>
  - src 속성(property)은 비디오파일이 저장된 경로를 값(value)으로 갖는다.
  - type 속성은 생략할 수 있다.
  - video 태그는 height와 width속성을 지정할 수 있다.

  4)iframe태그

• iframe이란 inline frame의 약자, 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다. 영상도 가능.
• <iframe src="https://www.youtube.com/embed/dkfmsldfk" style="width:100%; height:300px; border:3px; dashed maroon"></iframe>

 

**TIP src속성을 사용할 때 경로주소를 넣어야한다. 상대주소를 사용할 때 ' ./ '는 현재폴더, ' ../ '는 상위폴더를 칭한다.