[HTML] 🖼️ 이미지 & 멀티미디어

목차

 

• 이미지 태그

• 절대경로 vs 상대경로

• 오디오 태그

• 하이퍼링크 태그

 

 

이미지 태그 <img>

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

 

속성

src

• 필수이며, 이미지로의 경로를 지정한다.

alt

• 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt 의 값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용하다.
• 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.

height

• 이미지 높이를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 된다.

width

• 이미지 너비를 지정하는 속성이며, 값으로 픽셀(px)과 퍼센트(%) 단위로 지정할 수 있으며 픽셀로 설정시에는 숫자만 입력하면 된다.

그외의 속성 링크

<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

---

절대경로

 

리소스(이미지)의 절대경로는 말 그대로 절대적인 고유한 경로를 지정하는 것.

• 웹 이미지 절대경로 예) - http://www.naver.com/apple.png ➔ http 프로토콜로 시작해서 전체 경로를 입력함
• 웹 이미지 절대경로 예) - /apple.png 루트('/') 디렉토리 부터 시작하는 경우 현재 도메인이 자동으로 앞에 붙음
• PC 컴퓨터 절대경로 예) - C:\user\ssambbongcoding\apple.png

그러나 절대경로를 이용하면 웹 에서 이미지가 사라지거나 내 컴퓨터에서 만든 파일을 다른 곳으로 옮길 때 해당 절대경로를 다시 수정해야 하는 불편함이 있습니다. 그래서 작업중인 폴더에 이미지를 옮기고 상대적인 위치를 가리킴으로써 이러한 불편함을 해소할 수 있습니다.

 

상대경로

상대경로는 현재 문서를 기준으로 경로를 인식하는 방법.

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

---

🔊 오디오 태그 <audio>

<audio> 태그는 HTML 문서에 소리 콘텐츠를 넣을 때 사용합니다.

src 속성 또는 <source> Element를 사용하여 한 개 이상의 오디오 소스를 지정할 수 있으며,

다수를 지정한 경우 가장 적절한 소스를 브라우저가 선택한다.

<!-- 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>

---

📹 비디오 태그<video>

<video> 태그는 영상 콘텐츠를 HTML 문서에 삽입할 때 사용한다.

src 속성 또는 <source> Element를 사용하여 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 선택한다.

<!-- 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>

---

오디오&비디오 태그 속성

• controls - 플레이어 화면에 컨트롤 바(재생막대)를 표시한다.
• autoplay - 오디오나 비디오를 자동으로 실행한다.
  • 단, 크롬, 파이어폭스 브라우저는 자동 재생을 지원하지 않는다.
  • 만약 자동 재생을 하고 싶다면 muted 속성을 사용하여 소리를 제거해야 한다.
• loop - 오디오나 비디오를 반복 재생한다.
• muted - 오디오나 비디오의 소리를 제거한다.
• preload - 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다.
  • 사용할 수 있는 값은 auto, metadata, none 이다.
  • 기본적으로 preload="auto" 가 사용된다.
• width height - 비디오 플레이어의 너비와 높이를 지정한다.
  • width 나 height 의 값 중에서 하나만 지정하면 나머지는 자동으로 계산해서 표시힌다.
• poster="파일 이름" - <video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.

---

🔗 하이퍼링크 태그 <a>

<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>

 

속성 href

하이퍼링크가 가리키는 URL.

링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있다.

• 페이지 구획을 가리키는 프래그먼트 URL
• 미디어 파일 일부를 가리키는 미디어 프래그먼트
• tel: URL을 사용하는 전화번호
• mailto: URL을 사용하는 이메일 주소
• 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있다.

 

속성 target

• _self: URL을 현재 브라우징 맥락에 표시한다. 기본값.
• _blank: URL을 새로운 브라우징 맥락에 표시한다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있다.
• _parent: URL을 현재 브라우징 맥락의 부모에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동한다.
• _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시한다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

---

본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!