이미지와 파일을 페이지에 넣기

사진 한 장이 페이지의 분위기를 바꿉니다

지금까지는 제목, 문단, 링크처럼 글 중심의 HTML을 다뤘습니다. 이것만으로도 안내 페이지를 만들 수 있습니다. 하지만 사진 한 장이 들어가면 페이지가 훨씬 실제처럼 느껴집니다.

예를 들어 작은 카페 안내 페이지를 만든다고 해 보겠습니다.

• 카페 정문 사진

• 대표 메뉴 사진

• 찾아오는 길 약도 이미지

• 메뉴판 PDF 파일

이런 자료를 넣으면 방문자는 글을 읽기 전에 먼저 분위기를 이해합니다. 이번 장에서는 그중 가장 자주 쓰는 이미지 넣는 방법을 익힙니다. 그리고 PDF나 안내문 파일을 페이지에 연결하는 방법도 가볍게 살펴보겠습니다.

AI 생성 이미지

이미지는 img 태그로 넣습니다

HTML에서 이미지를 넣을 때는 img 태그를 사용합니다.

<img src="cafe-front.jpg" alt="햇살이 비치는 카페 정문">

이 한 줄을 문장처럼 읽어 보면 이렇습니다.

"cafe-front.jpg라는 이미지 파일을 보여 주고, 이미지를 볼 수 없는 상황에서는 햇살이 비치는 카페 정문이라고 설명해 주세요."

img 태그에는 중요한 특징이 있습니다.

첫째, 닫는 태그가 없습니다.

<img src="cafe-front.jpg" alt="햇살이 비치는 카페 정문">

아래처럼 쓰지 않습니다.

<img src="cafe-front.jpg" alt="햇살이 비치는 카페 정문"></img>

이미지는 문단처럼 어떤 글을 감싸는 태그가 아닙니다. 그 자리에 이미지 하나를 놓는 태그입니다.

둘째, src 속성이 꼭 필요합니다. src는 source의 줄임말입니다. 여기서는 "이미지 파일이 어디에 있나요?"라는 뜻으로 생각하면 됩니다.

셋째, alt 속성도 중요합니다. alt는 alternative text, 즉 대체 텍스트입니다. 이미지를 설명하는 글입니다. 잠시 뒤에 더 자세히 보겠습니다.

같은 폴더에 있는 이미지 넣기

가장 쉬운 경우부터 보겠습니다. HTML 파일과 이미지 파일이 같은 폴더에 있는 경우입니다.

폴더가 이렇게 되어 있다고 해 보겠습니다.

my-page/
  index.html
  cafe-front.jpg

index.html 안에서는 이렇게 씁니다.

<img src="cafe-front.jpg" alt="카페 정문 앞에 놓인 작은 입간판">

여기서 src="cafe-front.jpg"는 이렇게 말하는 것과 같습니다.

"지금 HTML 파일이 있는 폴더에서 cafe-front.jpg 파일을 찾아 주세요."

파일 이름은 정확히 같아야 합니다. 아래는 서로 다른 이름입니다.

cafe-front.jpg
cafe-front.jpeg
Cafe-Front.jpg
cafe front.jpg

컴퓨터와 웹브라우저는 사람처럼 "비슷한 이름이니까 이거겠지" 하고 짐작하지 않습니다. 특히 웹에 올렸을 때는 대문자와 소문자 차이도 문제가 될 수 있습니다.

처음 실습할 때는 파일 이름을 짧고 단순하게 만드는 것이 좋습니다.

cafe.jpg
menu.jpg
map.png

가능하면 영어 소문자, 숫자, 하이픈(-) 정도만 사용해 보세요.

images 폴더에 넣으면 경로도 달라집니다

이미지가 많아지면 HTML 파일과 사진 파일이 한 폴더에 섞여 복잡해집니다. 그래서 보통 이미지만 따로 images 폴더에 모읍니다.

폴더가 이렇게 바뀌었다고 해 보겠습니다.

my-page/
  index.html
  images/
    cafe-front.jpg
    latte.jpg

이제 이미지는 index.html과 같은 위치에 있지 않습니다. images 폴더 안으로 한 번 들어가야 합니다.

그래서 src도 이렇게 씁니다.

<img src="images/cafe-front.jpg" alt="카페 정문 앞에 놓인 작은 입간판">

images/cafe-front.jpg는 이렇게 읽으면 됩니다.

"현재 HTML 파일이 있는 곳에서 images 폴더로 들어간 다음, 그 안의 cafe-front.jpg 파일을 찾아 주세요."

슬래시(/)는 폴더 안으로 들어간다는 표시입니다.

images/cafe-front.jpg

이 경로를 처음 보면 낯설 수 있습니다. 하지만 실제로는 길 안내와 비슷합니다.

• images 폴더로 들어간다

• cafe-front.jpg 파일을 찾는다

이 순서입니다.

외부 이미지 주소를 사용할 수도 있습니다

내 컴퓨터에 있는 이미지가 아니라 인터넷에 올라와 있는 이미지 주소를 사용할 수도 있습니다.

<img src="https://example.com/images/cafe-front.jpg" alt="카페 정문 사진">

이런 주소는 보통 https://로 시작합니다. 이전 장에서 배운 외부 링크 주소와 비슷합니다. 다만 a 태그는 누르면 이동하는 링크를 만들고, img 태그는 그 주소에 있는 이미지를 페이지 안에 보여 줍니다.

하지만 실습에서는 가능하면 내 폴더 안에 이미지를 넣고 연습하는 편이 좋습니다. 외부 이미지는 나중에 주소가 바뀌거나 삭제될 수 있습니다. 또 다른 사람이 만든 이미지를 허락 없이 가져다 쓰면 저작권 문제가 생길 수 있습니다.

처음에는 직접 찍은 사진이나 사용이 허용된 이미지를 내려받아 images 폴더에 넣고 사용해 보세요.

alt는 이미지를 위한 설명문입니다

alt 속성은 이미지가 안 보일 때 대신 보여 줄 글입니다. 동시에 화면을 읽어 주는 보조 기술을 사용하는 사람에게 이미지의 의미를 전달하는 역할도 합니다.

쉽게 말해 alt는 "이 이미지를 말로 설명하면 무엇인가요?"에 대한 답입니다.

예를 들어 꽃집 소개 페이지에 꽃다발 사진을 넣는다고 해 보겠습니다.

<img src="images/bouquet.jpg" alt="분홍색 튤립과 흰색 안개꽃으로 만든 봄 꽃다발">

이 설명은 단순히 "이미지"라고 쓰는 것보다 훨씬 좋습니다.

좋지 않은 예:

<img src="images/bouquet.jpg" alt="이미지">

조금 나은 예:

<img src="images/bouquet.jpg" alt="꽃다발 사진">

더 좋은 예:

<img src="images/bouquet.jpg" alt="분홍색 튤립과 흰색 안개꽃으로 만든 봄 꽃다발">

좋은 alt는 이미지의 목적에 맞게 씁니다.

예를 들어 같은 사진이라도 페이지의 목적에 따라 설명이 달라질 수 있습니다.

꽃집 상품 소개라면:

<img src="images/bouquet.jpg" alt="분홍색 튤립 10송이와 흰색 안개꽃으로 구성된 꽃다발">

가게 분위기 소개라면:

<img src="images/bouquet.jpg" alt="나무 테이블 위에 놓인 봄 꽃다발과 따뜻한 조명의 매장 내부">

이미지를 보는 사람이 무엇을 알아야 하는지 생각해 보세요. 그 답이 alt에 들어가면 됩니다.

반대로 단순 장식용 이미지라면 설명을 길게 쓰지 않아도 됩니다. 내용 이해에 필요 없는 장식이라면 빈 값으로 둘 수도 있습니다.

<img src="images/line-decoration.png" alt="">

빈 alt는 "이 이미지는 중요한 정보가 아닙니다"라는 뜻에 가깝습니다. 다만 처음 연습할 때는 대부분의 사진에 짧은 설명을 붙이는 습관을 들이면 좋습니다.

작은 소개 페이지에 이미지 넣어 보기

이제 실제 페이지 안에 이미지를 넣어 보겠습니다. index.html 파일과 images 폴더를 준비하세요.

폴더는 이렇게 만듭니다.

my-page/
  index.html
  images/
    flower-shop.jpg

그리고 index.html에 아래 코드를 입력합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>소소한 꽃집</title>
</head>
<body>
  <h1>소소한 꽃집</h1>

  <p>계절에 어울리는 꽃다발을 만드는 작은 꽃집입니다.</p>

  <img src="images/flower-shop.jpg" alt="꽃다발이 진열된 작은 꽃집 내부">

  <h2>오늘의 안내</h2>
  <p><strong>금요일 오후 3시</strong>부터 봄 꽃다발 예약을 받습니다.</p>

  <p>
    문의는
    <a href="mailto:[email protected]">[email protected]</a>으로 보내 주세요.
  </p>
</body>
</html>

브라우저에서 열면 제목과 문단 사이에 사진이 보일 것입니다. 사진이 너무 크게 보일 수도 있습니다. 일단은 괜찮습니다. 이번 장에서는 이미지를 "넣는 법"을 먼저 익히는 것이 목표입니다.

그래도 화면에서 너무 부담스럽다면 임시로 width 속성을 사용할 수 있습니다.

<img src="images/flower-shop.jpg" alt="꽃다발이 진열된 작은 꽃집 내부" width="400">

width="400"은 화면에 보이는 이미지 너비를 400픽셀 정도로 맞추겠다는 뜻입니다. 픽셀은 화면을 이루는 아주 작은 점이라고 생각하면 됩니다.

다만 중요한 점이 있습니다. width로 작게 보이게 해도 원본 이미지 파일 자체가 작아지는 것은 아닙니다. 큰 사진을 작게 표시할 뿐입니다.

이미지가 안 보일 때 확인할 것

이미지를 넣다 보면 엑스 표시가 나오거나, 아무것도 보이지 않을 때가 있습니다. 대부분은 경로 문제입니다.

아래 순서대로 확인해 보세요.

1. 이미지 파일이 정말 그 폴더에 있는가?

2. 파일 이름을 정확히 썼는가?

3. .jpg, .jpeg, .png 같은 확장자가 맞는가?

4. images/ 폴더 이름을 정확히 썼는가?

5. 슬래시 방향을 /로 썼는가?

6. HTML 파일을 저장한 뒤 브라우저를 새로고침했는가?

예를 들어 실제 파일 이름이 flower-shop.jpeg인데 HTML에는 이렇게 썼다면 이미지가 보이지 않습니다.

<img src="images/flower-shop.jpg" alt="꽃집 내부">

jpg와 jpeg는 비슷해 보이지만 파일 이름으로는 다릅니다. 실제 파일 이름에 맞춰야 합니다.

또 실제 폴더 이름이 image인데 HTML에 images라고 써도 찾을 수 없습니다.

<img src="images/flower-shop.jpg" alt="꽃집 내부">

경로는 주소와 같습니다. 한 글자만 달라도 다른 장소를 가리킵니다.

PDF나 안내 파일은 링크로 연결합니다

이미지는 img 태그로 페이지 안에 보여 줍니다. 반면 PDF, 한글 문서, 압축 파일 같은 자료는 보통 링크로 연결합니다.

예를 들어 행사 안내문 PDF를 올리고 싶다고 해 보겠습니다.

my-page/
  index.html
  files/
    event-guide.pdf

HTML에서는 이렇게 씁니다.

<a href="files/event-guide.pdf">행사 안내문 PDF 보기</a>

브라우저와 사용자 설정에 따라 PDF가 새 화면에서 열릴 수도 있고, 내려받아질 수도 있습니다. 중요한 것은 링크 문구를 분명하게 쓰는 것입니다.

좋지 않은 예:

<a href="files/event-guide.pdf">여기</a>

좋은 예:

<a href="files/event-guide.pdf">행사 안내문 PDF 보기</a>

파일을 내려받는 행동을 더 분명히 알리고 싶다면 이렇게 쓸 수도 있습니다.

<a href="files/event-guide.pdf" download>행사 안내문 PDF 내려받기</a>

download 속성은 링크한 파일을 내려받도록 브라우저에 알려 줍니다. 다만 브라우저나 파일 위치에 따라 동작이 조금 달라질 수 있습니다. 그래서 링크 문구 자체에도 "내려받기"라고 써 주는 것이 좋습니다.

너무 큰 이미지는 페이지를 느리게 만듭니다

휴대폰으로 찍은 사진은 생각보다 큽니다. 사진 한 장이 몇 MB가 되는 경우도 흔합니다. 이런 사진을 그대로 여러 장 넣으면 페이지가 늦게 열릴 수 있습니다.

방문자는 화면에 사진이 보이기까지 기다려야 합니다. 특히 휴대폰 데이터 환경에서는 더 느리게 느껴질 수 있습니다.

여기서 기억할 점은 하나입니다.

화면에 작게 보여 줄 사진이라면, 파일도 적당히 작게 준비하는 것이 좋습니다.

예를 들어 웹페이지에 가게 전경 사진을 넣는다면 원본 사진을 그대로 쓰기보다 복사본을 만들어 크기를 줄여 사용하세요. 사진 편집 앱이나 온라인 이미지 압축 도구를 이용해도 됩니다.

width="400"으로 작게 보이게 하는 것과 이미지 파일 자체를 줄이는 것은 다릅니다.

<img src="images/large-photo.jpg" alt="카페 내부" width="400">

이 코드는 화면에서는 400픽셀 너비로 보이게 할 수 있습니다. 하지만 브라우저는 여전히 large-photo.jpg라는 큰 파일을 내려받아야 합니다. 겉보기만 작아진 것입니다.

처음에는 이렇게 생각하면 충분합니다.

• 사진은 필요한 만큼만 크게 준비한다.

• 같은 사진을 여러 장 반복해서 넣지 않는다.

• 너무 큰 원본 사진은 줄여서 사용한다.

• 중요한 이미지는 설명을 alt에 적는다.

이번 장에서 기억할 것

이미지를 넣는 기본 코드는 짧습니다.

<img src="images/photo.jpg" alt="사진에 대한 설명">

여기서 src는 이미지 파일의 위치입니다. 같은 폴더에 있으면 파일 이름만 씁니다. images 폴더 안에 있으면 images/photo.jpg처럼 폴더 이름을 함께 씁니다. 인터넷에 올라온 이미지는 https://로 시작하는 전체 주소를 쓸 수 있습니다.

alt는 이미지를 대신 설명하는 글입니다. 이미지를 볼 수 없는 사람이나 이미지가 불러와지지 않는 상황을 위해 꼭 신경 써야 합니다.

PDF 같은 파일은 이미지처럼 보여 주기보다 a 태그로 연결합니다.

<a href="files/menu.pdf">메뉴판 PDF 보기</a>

사진 한 장을 제대로 넣을 수 있으면 소개 페이지, 행사 공지, 포트폴리오가 훨씬 풍부해집니다. 다음에 이미지를 넣을 때는 파일 위치와 설명문, 그리고 이미지 크기까지 함께 떠올려 보세요.