본문 바로가기
프론트엔드/HTML

이미지 & 멀티미디어 태그

by alswlfl 2022. 11. 18.

이미지 & 멀티미디어 태그

이미지 태그

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

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

속성

  • src
    • 필수이며, 이미지로의 경로를 지정
  • alt
    • 이미지의 텍스트 설명으로, 필수는 아님
    • 스크린 리더가 alt값을 읽어 사용자에게 이미지를 설명하므로, 웹 접근성 차원에서 매우 유용
    • 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줌.
  • height
    • 필셀 단위의 이미지의 고유 크기, 단위 없는 정수이어야 함
  • width
    • 픽셀 기준 고유 너비, 단위 없는 정수이어야 함

절대 경로 vs 상대 경로

절대 경로

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

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

✨ 절대 경로를 이용하면 웹 에서 이미지가 사라지거나 내 컴퓨터에서 만든 파일을 다른 곳으로 옮길 때 해당 절대 경로를 다시 수정해야하는 번거로움 존재

 

상대 경로

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

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

오디오 태그

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

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

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

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

비디오 태그

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

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

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

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

오디오&비디오 태그 속성

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

하이퍼링크 태그

<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을 새로운 브라우징 맥락에 표시, 새로운 탭
    • _parant: URL을 현재 브라우징 맥락의 부모에 표시, 부모가 존재하지 않으면 _self와 동일하게 행동
    • _top: URL을 최상단 브라우징 맥락에 표시, 부모가 존재하지 않으면 _self와 동일하게 행동
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>img media</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img width="200" src="../assets/images/wind-energy.jpg" alt="풍차" />
    <img height="120" src="../assets/images/wind-energy.jpg" alt="풍차" />
    <img height="120" src="/assets/images/sunflowers.jpg" alt="해바라기" />

    <h2>오디오 태그</h2>
    <audio src="../assets/audio.mp3" controls></audio>

    <h2>비디오 태그</h2>
    <video
      width="400"
      src="../assets/video (2).mp4"
      controls
      type="video.mp4"
    ></video>

    <h2>하이퍼링크</h2>
    <a href="http://www.naver.com" target="_blank">네이버</a>와
    <a href="http://google.com">구글</a>은 포털 사이트 이다.
  </body>
</html>

'프론트엔드 > HTML' 카테고리의 다른 글

Head 태그  (0) 2022.11.18
Form 태그  (0) 2022.11.18
Block 레벨 요소와 Inline 레벨 요소  (0) 2022.11.18
Semantic태그  (0) 2022.11.18
Table태그  (0) 2022.11.18

관련글

티스토리툴바