실행 가능한 HTML 문서: 이미지 넣기

Q: HTML에서 이미지는 어떻게 넣나요?

src에 파일을, alt에 설명을 넣어 태그를 쓰세요. 처럼요. 에는 닫는 태그가 없어요.

Q: HTML에서 이미지 크기는 어떻게 바꾸나요?

width와 height 속성을 픽셀 단위로 주거나, img { width: 300px; height: auto; } 같은 CSS를 쓰세요. 한쪽만 정하고 다른 쪽을 auto로 두면 비율이 유지돼요.

Q: HTML에서 이미지가 왜 안 보이나요?

대개 src 경로가 잘못됐어요. 경로는 HTML 파일 기준의 상대 경로이고, 대부분의 서버에서 파일 이름은 대소문자를 구분하며, C:\photos\cat.jpg 같은 경로는 내 컴퓨터에만 있어요. 브라우저에서 이미지 URL을 직접 열어 확인해 보세요.

Q: HTML에서 alt 텍스트란 무엇인가요?

alt 속성은 이미지를 대신하는 텍스트예요. 스크린 리더가 읽어 주고, 이미지를 불러오지 못하면 브라우저가 보여 줘요. 이미지가 무엇을 보여 주는지 또는 무슨 역할을 하는지 설명하고, 순전히 장식용 이미지에는 alt=""를 쓰세요.

Q: 이미지를 반응형으로 만들려면 어떻게 하나요?

CSS에서 max-width: 100%; height: auto;를 추가하세요. 그러면 이미지가 좁은 컨테이너에 맞게 줄어들고, 원래 너비보다 커지지는 않아요.

HTML에서 이미지 넣는 법

<img> 요소를 쓰세요. src는 이미지 파일, alt는 그 설명, width와 height는 픽셀 단위 크기예요. <img>는 빈 요소라서 닫는 태그가 없어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image</title>
</head>
<body>
  <img
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3Cpath d='M0 150 Q80 90 160 140 T300 130 V200 H0Z' fill='%2316a34a'/%3E%3C/svg%3E"
    alt="Green hills under a yellow sun"
    width="300"
    height="200">
</body>
</html>

여기서 src는 예제가 오프라인에서도 동작하도록 URL 안에 직접 쓴 작은 SVG(data URI)예요. 실제 사이트에서는 src가 파일 경로예요.

`src`	불러오는 곳
`photo.jpg`	HTML 파일과 같은 폴더의 `photo.jpg`
`images/photo.jpg`	HTML 파일 옆의 `images` 폴더
`../photo.jpg`	한 단계 위 폴더
`/images/photo.jpg`	사이트 루트의 `images` 폴더
`https://example.com/photo.jpg`	다른 사이트(옮겨지거나 사라질 수 있어요)

대부분의 웹 서버에서 경로는 대소문자를 구분해요. Photo.JPG와 photo.jpg는 다른 파일이에요.

alt 텍스트

alt 텍스트는 이미지를 대신해요. 스크린 리더가 소리 내어 읽고, 이미지를 불러올 수 없으면 브라우저가 보여 줘요. 여기 있는 두 이미지는 모두 존재하지 않는 파일을 가리켜요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alt text</title>
  <style>
    img { border: 2px dashed #e5e7eb; }
  </style>
</head>
<body>
  <p><img src="missing-logo.png" alt="Coddy logo" width="160" height="60"></p>
  <p><img src="missing-chart.png" alt="" width="160" height="60"> (decorative, empty alt)</p>
</body>
</html>

첫 번째는 이미지가 있어야 할 자리에 alt 텍스트 "Coddy logo"를 보여 줘요. 두 번째는 alt가 비어 있어서 보여 줄 텍스트가 없고, 스크린 리더도 건너뛰어요. alt 쓰는 법은 이래요.

맥락에서 중요한 것을 설명하세요. "막대 그래프: 3월부터 6월까지 매출이 두 배로 늘었음"이 "그래프"보다 훨씬 많은 걸 알려 줘요.
"~의 이미지"로 시작하지 마세요. 스크린 리더가 이미 이미지라고 알려 줘요.
장식용(구분선, 배경 꾸밈)에는 alt=""를 쓰세요. 그러면 스크린 리더가 건너뛰어요.
alt를 절대 빼먹지 마세요. 없으면 어떤 스크린 리더는 "IMG 밑줄 4032 점 jpg"처럼 파일 이름을 대신 읽어요.
링크 안의 이미지라면 목적지를 설명하세요. <a href="/"><img src="logo.svg" alt="Home"></a>처럼요.

이미지 크기 정하기

width와 height 속성은 단위 없이 픽셀로 써요. CSS 크기가 이 속성보다 우선해요. 이미지에 가장 쓸모 있는 CSS는 이 두 줄이에요. 이미지가 컨테이너와 함께 줄어들되 원래 너비보다 늘어나지는 않게 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Image size</title>
  <style>
    .box { width: 180px; border: 2px solid #2563eb; margin-bottom: 12px; }
    .responsive { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <div class="box">
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Overflowing" width="300" height="200">
  </div>
  <div class="box">
    <img class="responsive" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='300' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='230' cy='60' r='28' fill='%23f59e0b'/%3E%3C/svg%3E"
      alt="Fits" width="300" height="200">
  </div>
</body>
</html>

첫 번째 이미지는 300픽셀을 유지해서 180픽셀 상자 밖으로 넘쳐요. 두 번째는 3:2 비율을 유지하며 가로 180, 세로 120으로 줄어들어요. height: auto가 중요해요. 이게 없으면 height="200" 속성 때문에 이미지 높이가 200픽셀로 유지되어 찌그러져요.

반응형 이미지라도 HTML에는 항상 width와 height를 쓰세요. 브라우저가 파일이 도착하기 전에 알맞은 공간을 확보해서, 이미지가 로드될 때 아래 텍스트가 밀려 내려가지 않아요.

object-fit으로 자르기

이미지가 모양이 다른 상자를 채워야 할 때(넓은 사진으로 만든 정사각형 프로필 사진, 높이가 같은 카드들) object-fit이 남는 부분을 어떻게 할지 정해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>object-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 12px; }
    figure { margin: 0; text-align: center; }
    img { width: 120px; height: 120px; border: 2px solid #111827; display: block; }
  </style>
</head>
<body>
  <figure>
    <img style="object-fit: fill" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>fill</figcaption>
  </figure>
  <figure>
    <img style="object-fit: contain" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>contain</figcaption>
  </figure>
  <figure>
    <img style="object-fit: cover" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23bfdbfe'/%3E%3Ccircle cx='150' cy='75' r='50' fill='%23f59e0b'/%3E%3C/svg%3E">
    <figcaption>cover</figcaption>
  </figure>
</body>
</html>

원본은 원이 그려진 2:1 그림이고, 정사각형 상자에 표시했어요.

fill(기본값)은 이미지를 상자에 맞게 늘려서 원이 타원이 돼요.
contain은 이미지 전체를 안에 맞추고 빈 띠를 남겨요.
cover는 상자를 채우고 넘치는 부분을 잘라서 원을 둥글게 유지해요. 썸네일과 프로필 사진에 주로 써요.

object-position은 자를 때 어느 부분을 보이게 할지 정해요. 예를 들어 인물 사진에는 object-position: top을 써요.

figure와 figcaption으로 캡션 달기

이미지에 딸린 캡션은 <figcaption>에 넣고, 둘 다 <figure>에 넣어요. 스크린 리더에게 둘을 하나로 묶어 주고, figure를 한 단위로 꾸밀 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Figure</title>
  <style>
    figure { display: inline-block; margin: 0; padding: 8px; border: 1px solid #e5e7eb; }
    img { display: block; }
    figcaption { font: 14px system-ui, sans-serif; color: #4b5563; padding-top: 6px; }
  </style>
</head>
<body>
  <figure>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23e5e7eb'/%3E%3Crect x='20' y='70' width='40' height='40' fill='%232563eb'/%3E%3Crect x='80' y='40' width='40' height='70' fill='%232563eb'/%3E%3Crect x='140' y='20' width='40' height='90' fill='%232563eb'/%3E%3C/svg%3E"
      alt="Bar chart: signups rose each quarter" width="240" height="120">
    <figcaption>Figure 1. Signups per quarter.</figcaption>
  </figure>
</body>
</html>

캡션이 alt를 대신하지는 않아요. alt는 이미지가 무엇을 보여 주는지 말하고, 캡션은 보는 독자에게도 필요한 내용을 더해요.

이미지 아래 틈

이미지는 글자처럼 텍스트 기준선 위에 놓여서, 컨테이너는 그 아래에 g나 y 같은 글자의 하강부를 위한 공간을 남겨요. 테두리를 주면 틈이 보여요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Gap under image</title>
  <style>
    div { display: inline-block; border: 2px solid #dc2626; margin-inline-end: 12px; }
    .fixed img { display: block; }
  </style>
</head>
<body>
  <div><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
  <div class="fixed"><img alt="" width="100" height="60" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Crect width='100' height='60' fill='%232563eb'/%3E%3C/svg%3E"></div>
</body>
</html>

첫 번째 테두리 안에는 파란 이미지 아래 흰 띠가 있어요. 이미지에 display: block을 주면(두 번째 상자) 사라지고, 이미지를 인라인으로 두어야 한다면 vertical-align: middle로도 사라져요.

지연 로딩과 반응형 소스

긴 페이지 아래쪽에 있는 이미지에는 loading="lazy"를 주면 독자가 그 근처까지 스크롤할 때까지 다운로드를 미뤄요.

<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">

페이지 맨 위의 주요 이미지는 지연 로딩하지 마세요. 독자가 가장 먼저 보는 부분이 늦게 나와요.

작은 화면에 더 작은 파일을 보내려면 srcset에 여러 크기를 나열하고, 이미지가 얼마나 넓게 표시될지 sizes로 브라우저에 알려 주세요. 파일은 브라우저가 골라요.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Harbor at dusk" width="800" height="533">

<picture>는 한발 더 나아가 서로 다른 형식을 제공하고, <img>는 alt도 담는 대체 요소 역할을 해요.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>

이미지 형식

형식	알맞은 용도
JPEG	사진
PNG	스크린샷, 가장자리가 선명하거나 투명해야 하는 이미지
WebP	사진과 그래픽, JPEG와 PNG보다 작고 투명도 지원
AVIF	사진, 보통 WebP보다 작음
SVG	로고, 아이콘, 다이어그램. 어떤 크기로든 흐려지지 않고 확대됨
GIF	짧은 애니메이션. 다만 음소거된 반복 `<video>`가 훨씬 작아요

자주 하는 실수

내 컴퓨터의 경로를 씀. src="C:\Users\me\photo.jpg" 같은 경로는 내 컴퓨터에서만 동작해요. 파일을 HTML 옆에 두고 상대 경로를 쓰세요.
alt가 없음. 모든 <img>에 필요해요. 장식용이면 비워 두세요.
CSS에서 width와 height를 모두 다른 비율로 지정함. 이미지가 늘어나요. 한쪽만 정하고 다른 쪽은 auto로 두거나 object-fit을 쓰세요.
width와 height 속성이 없음. 이미지가 로드될 때 페이지가 들썩여요.
거대한 파일을 CSS로 줄여 보여 줌. 4000픽셀 사진을 400픽셀로 보여 줘도 전체를 다운로드해요. 크기를 줄이거나 srcset을 쓰세요.
닫는 </img> 태그를 씀. <img>는 빈 요소라서 닫을 게 없어요.

위 예제의 이미지는 작은 인라인 SVG예요. 같은 코드를 내 사진으로 해 보려면 HTML 플레이그라운드에 붙여 넣으세요.

자주 묻는 질문

HTML에서 이미지는 어떻게 넣나요?

src에 파일을, alt에 설명을 넣어 <img> 태그를 쓰세요. <img src="photo.jpg" alt="A red bicycle" width="600" height="400">처럼요. <img>에는 닫는 태그가 없어요.

HTML에서 이미지 크기는 어떻게 바꾸나요?

width와 height 속성을 픽셀 단위로 주거나, img { width: 300px; height: auto; } 같은 CSS를 쓰세요. 한쪽만 정하고 다른 쪽을 auto로 두면 비율이 유지돼요.

HTML에서 이미지가 왜 안 보이나요?

대개 src 경로가 잘못됐어요. 경로는 HTML 파일 기준의 상대 경로이고, 대부분의 서버에서 파일 이름은 대소문자를 구분하며, C:\photos\cat.jpg 같은 경로는 내 컴퓨터에만 있어요. 브라우저에서 이미지 URL을 직접 열어 확인해 보세요.

HTML에서 alt 텍스트란 무엇인가요?

alt 속성은 이미지를 대신하는 텍스트예요. 스크린 리더가 읽어 주고, 이미지를 불러오지 못하면 브라우저가 보여 줘요. 이미지가 무엇을 보여 주는지 또는 무슨 역할을 하는지 설명하고, 순전히 장식용 이미지에는 alt=""를 쓰세요.

이미지를 반응형으로 만들려면 어떻게 하나요?

CSS에서 max-width: 100%; height: auto;를 추가하세요. 그러면 이미지가 좁은 컨테이너에 맞게 줄어들고, 원래 너비보다 커지지는 않아요.

이미지 아래에 왜 틈이 생기나요?

이미지는 기본적으로 인라인이고 텍스트 기준선 위에 놓여서, 아래쪽에 글자의 하강부를 위한 공간이 남아요. 이미지에 display: block이나 vertical-align: middle을 주면 틈이 사라져요.

HTML 이미지 넣기: img 태그, alt, 크기 조절