HTML의 <img> 태그는 웹 페이지에 이미지를 삽입할 때 사용합니다. src 속성으로 표시할 이미지의 경로를 지정하고, alt 속성을 활용하면 이미지가 로드되지 못할 경우 대체 텍스트를 보여줄 수 있습니다.
HTML 이미지 태그 기본 사용법
웹 초창기에는 페이지에 텍스트만 표시할 수 있었지만, 이후 이미지를 삽입하는 기능이 빠르게 추가되었습니다. 지금은 로고부터 사진까지 이미지가 웹 전반에서 필수적인 요소로 자리 잡았습니다.
이 글에서는 웹 개발자 관점에서 <img> 태그로 HTML 이미지를 다루는 방법과, 함께 사용되는 주요 속성들을 하나씩 살펴봅니다.
img 태그 문법
HTML <img> 태그는 웹 문서에 이미지를 추가합니다. 삽입하려는 이미지의 위치는 src 속성으로 지정하며, 로컬 파일 경로나 외부 URL 모두 사용할 수 있습니다. 이미지가 로드되지 않을 때 표시할 대체 텍스트는 alt 속성에 담습니다.
기본 문법은 다음과 같습니다.
<img src="house.png"><img> 태그는 닫는 태그가 필요 없는 빈(void) 요소입니다. 태그 하나만으로 완결되며, 모든 브라우저에서 지원됩니다.
HTML은 기본적으로 HTML 파일이 있는 폴더와 참조하는 이미지가 같은 폴더에 있다고 가정합니다. 다른 위치의 이미지를 불러오려면 정확한 파일 경로나 URL을 직접 지정하면 됩니다.
위 예제에서는 house.png 파일을 참조하며, 이 파일은 작업 중인 HTML 파일과 같은 폴더에 있다고 가정합니다.
만약 이미지 파일이 pictures라는 별도 폴더에 저장되어 있다면 다음처럼 경로를 지정합니다.
<img src="pictures/house.png">외부 소스의 이미지를 삽입할 때는 절대 URL을 사용할 수 있습니다.
<img src="https://www.example.org/pictures/house.png">다만 가능하면 로컬 파일로 이미지를 참조하는 것이 좋습니다. 외부 이미지를 불러오면 브라우저가 더 많은 작업을 수행해야 하므로 로딩 성능에 영향을 줄 수 있기 때문입니다.
HTML 이미지 예제
실제 예제를 통해 확인해 보겠습니다. 동네 커피숍 '더 골든 로스트(The Golden Roast)'의 홈페이지를 만든다고 가정해 봅시다. 이 커피숍은 첫 화면에 커피 한 잔 사진을 넣길 원합니다.
전달받은 이미지 파일 이름은 coffee.png이며, HTML 페이지와 같은 폴더에 저장되어 있습니다. 다음 코드로 이미지를 추가할 수 있습니다.
<body>
<h1>The Golden Roast</h1>
<img src="coffee.png">
</body>
코드를 하나씩 살펴보겠습니다. 먼저 웹 페이지의 주요 요소를 감싸는 <body> 태그를 사용했고, 그 안에서 <h1> 태그로 'The Golden Roast'라는 제목을 정의했습니다.
다음 줄에서는 img 요소로 coffee.png 이미지를 추가했습니다. 이미지가 HTML 파일과 같은 폴더에 있으므로 src 속성에 폴더 경로 없이 파일 이름만 지정하면 됩니다.
대체 텍스트(alt) 설정하기
alt 속성은 이미지에 대한 텍스트 설명을 제공하며, HTML에서 이미지를 다룰 때 매우 중요한 요소입니다. alt 텍스트가 필요한 이유는 다음과 같습니다.
- 이미지가 없을 때 설명을 제공합니다. 지정한 경로에 파일이 존재하지 않는 등 이미지를 찾을 수 없을 때 유용합니다.
- 느리게 로드되는 이미지를 보완합니다. 방문자의 인터넷 연결이 느리면 이미지 로딩에 지연이 생길 수 있습니다.
- 접근성을 향상시킵니다. 스크린 리더를 사용하는 방문자가 이미지에 대한 설명을 들을 수 있게 해 줍니다.
alt 텍스트는 어떤 이유로든 이미지가 렌더링되지 않을 때 사용자에게 최소한의 정보를 전달해 줍니다. alt 텍스트를 지정하지 않으면 깨진 이미지 아이콘만 표시됩니다.
alt 텍스트 예제
앞선 커피숍 예제의 이미지에 alt 속성을 추가해 보겠습니다. 지정할 텍스트는 '연한 갈색 나무 테이블 위, 커피 원두 사이에서 로스팅되는 커피'입니다.
<body>
<h1>The Golden Roast</h1>
<img src="coffee.png" alt="연한 갈색 나무 테이블 위, 커피 원두 사이에서 로스팅되는 커피">
</body>이제 누군가 coffee.png 파일을 다른 폴더로 옮겨서 웹 페이지가 파일을 찾지 못하는 상황을 가정해 봅시다. 이 경우 이미지 대신 alt 텍스트가 화면에 표시됩니다.
alt 속성을 작성할 때는 간결하게 유지하면서 이미지 자체를 묘사하는 것이 좋습니다. 이미 페이지에 있는 텍스트를 반복하면 오히려 사용자에게 혼란을 줄 수 있습니다.
이미지 툴팁(title) 추가하기
title 속성을 사용하면 이미지에 대한 추가 정보를 제공할 수 있습니다. 사용자가 마우스를 이미지 위에 올리면 툴팁 형태로 나타납니다.
다만 title 속성은 스크린 리더를 지원하지 않고, 마우스가 없는 모바일 기기에서는 보이지 않는다는 한계가 있습니다. 따라서 필수 정보는 alt 텍스트에 담고, title은 보조 용도로 사용하는 것이 좋습니다.
<body>
<h1>The Golden Roast</h1>
<img src="coffee.png" alt="연한 갈색 나무 테이블 위, 커피 원두 사이에서 로스팅되는 커피" title="테이블 위의 커피 한 잔">
</body>
마우스 커서를 이미지 위에 올리면 title 속성에 담긴 내용이 툴팁으로 표시됩니다.
이미지 크기 조절(width, height)
width와 height 속성을 사용하면 이미지의 가로·세로 크기를 픽셀 단위로 지정할 수 있습니다.
커피숍 예제로 돌아가서, 커피 이미지를 가로 400픽셀, 세로 400픽셀 크기로 표시하고 싶다고 가정해 봅시다. 이미지가 페이지에서 차지하는 공간을 줄이고 싶은 경우에 유용합니다.
<body>
<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400">
</body>
첫 번째 예제에서 이미지는 500×500 크기로 표시됐지만, width와 height를 각각 400으로 지정했기 때문에 이번에는 400×400으로 더 작게 나타납니다.
이미지 정렬(float)로 배치하기
이미지를 페이지 왼쪽이나 오른쪽에 배치하고 싶다면 CSS의 float 속성을 활용할 수 있습니다. float는 이미지의 좌우 정렬 방향을 의미합니다.
커피 이미지를 페이지 오른쪽에 배치하려면 다음과 같이 작성합니다.
<body>
<h1>The Golden Roast</h1>
<img src="coffee.png" width="400" height="400" style="float:right;">
</body>
style 속성 안에 float:right; 값을 지정하여 이미지가 페이지 오른쪽에 배치되도록 했습니다.
마무리
HTML의 <img> 태그를 사용하면 웹 페이지에 이미지를 배치할 수 있으며, 이미지는 로컬 파일이나 외부 소스 어디에서든 불러올 수 있습니다.
이 글에서는 <img> 태그의 기본 사용법과 src, alt, title, width, height, float 등 주요 속성의 활용법을 살펴봤습니다. 이제 HTML에서 이미지를 능숙하게 다룰 준비가 되셨기를 바랍니다!
HTML을 더 깊이 학습하고 싶다면 검증된 온라인 강좌와 MDN Web Docs 같은 공식 문서를 함께 활용해 보세요.