웹 페이지에 이미지를 삽입하려면 HTML의 <img> 태그를 사용합니다. 이 태그를 활용하면 이미지의 출처(src), 대체 텍스트(alt), 너비(width), 높이(height) 등 다양한 속성을 지정할 수 있습니다.
특히 alt 속성은 대체 텍스트(alternate text)를 지정하는 속성으로, 이미지가 정상적으로 로드되지 않을 때 화면에 표시되는 텍스트입니다. 시각 장애인을 위한 스크린 리더 접근성과 SEO 측면에서도 매우 중요한 역할을 합니다.
img 태그의 주요 속성
다음은 <img> 태그에서 사용할 수 있는 주요 속성 목록입니다.
| 속성 | 설명 |
|---|---|
| alt | 이미지가 로드되지 않을 때 표시되는 대체 텍스트 |
| height | 이미지의 높이 지정 |
| ismap | 이미지를 서버 측 이미지 맵(server-side image-map)으로 지정 |
| longdesc | 이미지에 대한 상세 설명이 담긴 문서의 URL |
| src | 이미지 파일의 URL(필수 속성) |
| usemap | 이미지를 클라이언트 측 이미지 맵(client-side image-map)으로 지정 |
| width | 이미지의 너비 지정 |
참고: <img> 태그는 종료 태그(closing tag)가 없는 빈 요소(void element)입니다. 따라서 </img>와 같은 종료 태그를 작성할 필요가 없습니다.
예제 코드
아래 코드를 실행하면 HTML 웹 페이지에서 이미지를 사용하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML img 태그</title> </head> <body> <h1>Tutorialspoint</h1> <h2>Simply Easy Learning</h2> <img src="/green/images/logo.png" alt="Tutorialspoint" width="260" height="100"> </body> </html>
위 예제에서 src 속성으로 이미지 경로를 지정하고, alt 속성으로 대체 텍스트를 설정하며, width와 height 속성으로 이미지 크기를 조절합니다. 이처럼 img 태그의 속성들을 적절히 조합하면 웹 페이지에 원하는 이미지를 손쉽게 표시할 수 있습니다.