HTML 과 친해지기 (8)

유수종·2025년 2월 10일

html

프론트엔드 스터디

목록 보기

8/12

이미지 & 멀티미디어 태그

`<img>` 태그

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

ex)

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

src: 이미지 태그에서 src는 필수값이며 사용할 이미지의 경로를 통해 이미지를 불러옵니다.
alt: 필수 요소는 아니지만 사용자에게 이미지를 설명하는 역할을 합니다. 문제가 발생하여 이미지를 표시할 수 없을때 해당 이미지가 어떤 이미지인지 설명할 수 있습니다.
height: 픽셀단위 이미지의 고유 크기.(정수)
width: 이미지의 픽셀 기준 고유 너비.(정수)

이미지 태그로 간단한 실습을 해보겠습니다. 먼저 태그에 사용할 이미지를 다운받기 위해 pixabay 라는 사이트를 이용해보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img src="../mountains.jpg" alt="산" />
  </body>
</html>

이제 다운받은 이미지를 폴더에 넣어주고 생성한 이미지 태그에 경로와 alt를 입력해줍니다.

다운받은 이미지를 잘 불러오는것을 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img src="" alt="산" />
  </body>
</html>

src의 경로를 한번 지워봤습니다. 이미지 아이콘 옆에 alt에 명시한 설명이 출력됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>이미지 태그</title>
  </head>
  <body>
    <h2>이미지 태그</h2>
    <img width="150" src="../mountains.jpg" alt="산" />
    <img height="200" src="../mountains.jpg" alt="산" />
    <img width="100" height="100" src="../mountains.jpg" alt="산" />
  </body>
</html>

width와 height를 통해 이미지의 크기를 조정할 수 있습니다. 픽셀(px) 단위로 명시하지 않고 정수값으로 크기를 명시해줍니다.

오디오/비디오 태그

<audio> 태그와 <video> 태그를 통해서 음성파일과 영상을 첨부할 수 있습니다. 태그 사용방식은 이미지 태그와 유사합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>오디오/비디오</title>
  </head>
  <body>
    <h2>오디오 태그</h2>
    <audio src="sound.mp3" controls></audio>
    <h2>비디오 태그</h2>
    <video width="300" src="video.mov" type="video/mov" controls></video>
  </body>
</html>

오디오/비디오 태그 속성

controls: 플레이어 화면에 컨트롤바(재생막대)를 표시합니다.
autoplay: 오디오나 비디오를 자동으로 실행합니다.
loop: 오디오나 비디오를 반복 재생합니다.
muted: 오디오나 비디오의 소리를 제거합니다.
preload: 페이지를 불러올 때 오디오/비디오를 어떻게 로딩할지 지정합니다. 기본적으로 preload="auto" 가 적용됩니다.(auto,metadata,none 지정 가능)
width height: 너비와 높이를 조절합니다. 너비와 높이 중 하나만 입력해주면 알아서 비율을 맞춰줍니다.
poster="파일이름": 비디오 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에서 사용할 포스터 이미지를 지정합니다.