이미지와 대체 텍스트 넣기

소개 페이지에 이미지를 넣을 때는 그림을 보여 주는 것과 그림을 볼 수 없는 사람에게 같은 의미를 전달하는 것을 함께 생각해야 합니다. img 요소의 src에 이미지 주소를, alt에 대체 텍스트를 지정하면 두 가지를 표현할 수 있습니다.

이미지와 대체 텍스트

img는 이미지를 문서에 넣는 요소입니다. src 속성은 이미지가 있는 주소를 지정하고, alt 속성은 이미지를 대신할 텍스트를 지정합니다. 화면 읽기 프로그램은 대체 텍스트를 이용해 이미지의 의미를 전달할 수 있습니다. 이미지를 불러오지 못했을 때 브라우저가 이 텍스트를 보여 주기도 합니다.

img는 콘텐츠를 안에 넣지 않는 빈 요소이므로 </img> 같은 종료 태그를 쓰지 않습니다. 환경은 Chromium을 기준으로 합니다.

이미지가 보이는 경우와 보이지 않는 경우

다음 HTML은 노란 해 그림과 불러올 수 없는 이미지 하나를 넣습니다. 별도 파일 없이 살펴볼 수 있도록 이미지 데이터를 src에 직접 담았습니다. 입력은 코드에 적힌 두 src 값이며, 사용자가 따로 입력할 값은 없습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>이미지와 대체 텍스트</title>
</head>
<body>
  <h1>나의 소개 이미지</h1>
  <p>맑은 날처럼 밝게 배우고 싶습니다.</p>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='45' fill='gold'/%3E%3C/svg%3E" alt="노란 해 그림" width="120" height="120">
  <p>이미지를 불러오지 못하는 경우:</p>
  <img src="data:image/png;base64,AAAA" alt="책을 읽는 사람 그림">
</body>
</html>

예상 화면에는 제목과 첫 문장 아래 노란 원으로 그린 해가 나타납니다. 그 아래에는 이미지를 불러오지 못하는 경우:와 대체 텍스트 책을 읽는 사람 그림이 표시될 것으로 예상합니다. 이 화면은 아직 실측하지 않았으며, 실패 표시의 모양은 브라우저에 따라 다를 수 있습니다.

첫 번째 src의 data: 주소에는 그림 데이터가 직접 들어 있습니다. width와 height는 이미지가 표시될 너비와 높이를 픽셀 단위로 지정합니다. 두 번째 src에는 정상적인 PNG 이미지가 아닌 데이터를 넣었기 때문에 그림을 표시할 수 없습니다. 이때 alt가 그림을 대신할 내용을 제공합니다.

이미지 파일의 상대 경로와 흔한 실수

실제 이미지 파일을 사용할 때는 src에 상대 경로를 적을 수 있습니다. 예를 들어 HTML 문서와 같은 폴더에 sun.png가 있다면 src="sun.png"로 지정합니다. 문서가 있는 폴더 안의 images 폴더에 파일이 있다면 src="images/sun.png"로 지정합니다. 경로는 현재 HTML 문서의 위치를 기준으로 해석됩니다.

파일 이름이나 폴더 이름이 실제 위치와 다르면 이미지를 찾지 못할 수 있습니다. 확장자와 대소문자까지 확인하세요. 이 예제의 data: 주소는 독립 실행을 위한 방법이며 상대 파일 경로는 아닙니다.

alt="이미지"처럼 적으면 이미지가 무엇을 전달하는지 알기 어렵습니다. 반대로 주변 문맥에서 이미 전달한 내용을 그대로 반복할 필요도 없습니다. 이미지가 순수한 장식이고 추가 정보를 전달하지 않는다면 alt=""로 빈 대체 텍스트를 지정합니다. 속성을 생략하는 것과 빈 값을 명시하는 것은 다릅니다.

연습과 해설

소개 문서와 같은 폴더에 profile.png가 있고, 그 그림이 책을 읽는 사람을 보여 준다고 가정해 보세요. 이미지 요소의 src와 alt를 어떻게 적을까요?

풀이: <img src="profile.png" alt="책을 읽는 사람">입니다. 같은 폴더에 있으므로 파일 이름만 상대 경로로 적고, 대체 텍스트에는 그림이 전달하는 내용을 담습니다. 실제로 표시하려면 해당 위치에 이미지 파일이 있어야 합니다.