🏷️멀티미디어 삽입

📌이미지 삽입

• <img>태그로 이미지를 삽입할 수 있다.

• 이미지 태그는 쌍으로 안이루어져있다.

• 이미지 태그의 속성을 정리하면 다음과 같다.

  속성	의미
  src	파일 경로를 지정
  width	이미지 너비 지정
  height	이미지 높이 지정
  title	이미지에 마우스를 올렸을 때, 나타나는 설명 글

• 🔍ex)

<img src="./img/fish.jpg" width="200" title="구피">

• width만 지정하면 원본 사진의 비율에 기반해서 height가 자동으로 정해진다.
• width와 height를 원본 비율을 고려하지 않고 지정하면 사진이 찌그러진다.

📌오디오 삽입

• <audio>태그로 오디오를 삽입할 수 있다.

• 오디오 태그는 쌍으로 이루어져있다.

• 오디오 태그의 속성을 정리하면 다음과 같다.

  속성	의미
  src	파일 경로를 지정
  controls	플레이어를 화면에 표시
  autoplay	자동 시작
  loop	무한 반복

• 🔍ex)

<aduio src="bass.mp3" controls autoplay loop></audio>

📌비디오 삽입

• <video>태그로 영상을 삽입할 수 있다.

• 비디오 태그는 쌍으로 이루어져있다.

• 웹 페이지에서 웹 브라우저가 비디오 파일을 재생하라면 사용자 컴퓨터에 지정한 format의 코덱이 반드시 있어야 한다.

• 비디오 태그 안에 <source>태그를 넣어 src와 type속성을 이용해 여러가지 파일 포맷을 지정할 수 있다.

• 비디오 태그의 속성을 정리하면 다음과 같은데, 이미지와 오디오 태그의 속성을 거의 다 포함하고 있다.

  속성	의미
  src	파일 경로를 지정
  controls	플레이어를 화면에 표시
  autoplay	자동 시작
  loop	무한 반복
  width	비디오 너비 지정
  height	비디오 높이 지정

• 🔍ex)

<video width="320" height="240" controls autoplay loop>
  
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogg" type="video/ogg">
  
</video>

---

🏷️링크 삽입

• 웹 페이지와 웹 페이지 간에 이동할 수 있게 링크를 삽입할 수 있다.
• <a>태그의 href속성에 html 파일 경로나 웹사이트 주소를 지정하면 된다.
• a 태그는 쌍으로 이루어져 있다.
• a 태그 안에 이미지를 넣으면 이미지에 링크를 걸 수도 있다.
• target속성의 값으로 _blank를 주면 클릭시 새로운 탭에서 열도록 할 수 있다.
• a stands for anchor
  • 🗽voca) anchor: 닻
• href stands for hypertext reference
• 🔍ex)

<a href="page1.html" target="_blank">뒤로 가기</a>
<a href="https://www.naver.com"><img src="./img/fish.jpg" width="200" title="구피"></a>