[HTML] 이미지 태그 & 멀티미디어

1. 이미지 태그

<img> 태그는 HTML 문서에 이미지를 넣습니다.

<img src="images/apple.jpg" alt="사과">

• src
  • 필수이며 이미지로의 경로를 지정합니다.
• alt
  • 이미지의 텍스트 설명이며 필수는 아니지만 웹 접근성 차원에서 매우 유용합니다.
• height
  • 이미지 높이를 지정하는 속성입니다.
• width
  • 이미지 너비를 지정하는 속성입니다.

---

2. 오디오 태그

• <audio> 태그는 HTML 문서에 소리 콘텐츠를 넣을 때 사용합니다.
• src 속성과 source 요소를 사용할 수 있습니다.

<!-- src 속성을 사용 -->
<audio controls src="/media/cc0-audio/t-rex-roar.mp3">

<!-- source 요소를 사용 -->
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
</audio>

---

3. 비디오 태그

• <video> 태그는 영상 콘텐츠를 HTML 문서에 삽입할 때 사용합니다.
• src 속성과 source 요소를 사용할 수 있습니다.

<!-- src 속성을 사용 -->
<video controls src="/media/cc0-videos/flower.mp4" type="video/mp4">

<!-- source 요소를 사용 -->
<video controls width="250">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
  <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
</video>

---

4. 오디오 & 비디오 태그 속성

• controls : 컨트롤 바(재생막대)를 표시합니다.
• autoplay : 오디오나 비디오를 자동으로 실행합니다.
• loop : 오디오나 비디오를 반복 재생합니다.
• muted : 오디오나 비디오의 소리를 제거합니다.
• preload : 오디오나 비디오를 어떻게 로딩할 것인지 지정합니다.
  • auto, metadata, none을 사용할 수 있습니다.
• width, height : 너비와 높이를 지정합니다.
• poster="파일 이름" : <video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다.

---

5. 하이퍼링크 태그

<a> 태그는 href 속성을 사용하여 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.

target="_blank" 속성을 사용하여 새 탭에서 화면을 열 수 있습니다.

• 같은 폴더 안에 있는 다른 페이지로 이동

<a href="inner.html">다른 페이지 이동</a>
<a href="inner.html" target="_blank">새탭으로 페이지 열기</a>

• 이미지에 하이퍼링크 걸기

<a href="inner.html"><img src="apple.png" alt="사과" width="200"></a>

• ID 속성이 apple인 특정 위치로 이동하는 하이퍼링크

<!-- id가 apple인 요소로 이동하는 하이퍼링크 -->
<a href="#apple">이동</a>

<!-- 해당 요소 위치로 스크롤이 이동함 -->
<div id="apple">사과</div>

• 이메일 보내기 하이퍼링크

<a href="mailto:bruce.lean17@gmail.com">이메일 보내기</a>

5-1. 속성

• href
  • 하이퍼링크가 가리키는 URL
  • 페이지 구획을 가리키는 fragment URL
  • tel : URL을 사용하는 전화번호
  • mailto : URL을 사용하는 이메일 주소
• target
  • _self : URL을 현재 브라우징 맥락에 표시합니다.
  • _blank : URL을 새로운 브라우징 맥락에 표시합니다.
  • _parent : URL을 현재 브라우징 맥락의 부모에 표시합니다.
  • _top : URL을 최상위 브라우징 맥락에 표시합니다.

---

6. 절대경로 vs 상대경로

6-1. 절대경로

절대적인 고유한 경로를 지정하는 것입니다.

• http 프로토콜로 시작해서 전체 경로를 입력
• 웹에서 이미지가 사라지거나 만든 파일을 다른 곳으로 옮길 때 절대 경로를 다시 수정해야 하는 불편함이 있습니다.

6-2. 상대경로

현재 문서를 기준으로 경로를 인식하는 방법입니다.

• 동일한 위치에 있는 이미지를 가져오는 방법 -> src="apple.png" 또는 src="./apple.png"
• 상위 폴더에 이미지가 있는 경우 -> src="../apple.png"
• 하위 폴더에 이미지가 있는 경우 -> src="하위폴더/apple.png"