img 태그의 기본 개념
웹페이지에서 이미지를 표시하려면 <img> 태그를 사용합니다. 이 태그에는 이미지 소스(src), 대체 텍스트(alt), 가로 크기(width), 세로 크기(height) 등 다양한 속성을 지정할 수 있습니다.
src는 불러올 이미지의 URL을 지정하는 속성이며, alt는 대체 텍스트 속성으로 이미지가 정상적으로 로드되지 못했을 때 화면에 표시되는 문구입니다.
시스템 드라이브 경로를 src로 지정하기
HTML에서는 이미지 소스를 시스템 드라이브의 파일 경로로 직접 지정할 수 있습니다. 이 경우 src 속성 값에 이미지가 저장된 드라이브 경로를 그대로 입력하면 됩니다.
예를 들어 다음과 같은 형식으로 작성합니다.
file:/D:/images/logo.png
img 태그의 주요 속성
| 번호 | 속성 및 설명 |
|---|---|
| 1 | Alt 이미지가 표시되지 않을 때 보여줄 대체 텍스트 |
| 2 | Height 이미지의 세로 크기 |
| 3 | Ismap 이미지를 서버 측 이미지 맵으로 지정 |
| 4 | Longdesc 이미지에 대한 상세 설명 페이지의 URL |
| 5 | Src 불러올 이미지의 URL 또는 경로 |
| 6 | Usemap 이미지를 클라이언트 측 이미지 맵으로 지정 |
| 7 | Width 이미지의 가로 크기 |
참고로 <img> 태그에는 종료 태그(closing tag)가 없다는 점도 기억해 두세요.
실전 예제 코드
다음 코드를 실행하면 HTML img 태그의 src에 시스템 드라이브 경로를 지정한 결과를 확인할 수 있습니다.
주의: 아래 경로는 로컬 드라이브 기준이므로 해당 이미지가 저장된 자신의 PC(로컬 환경)에서만 정상적으로 동작합니다.
<!DOCTYPE html> <html> <head> <title> HTML img tag </title> </head> <body> <img src="file:/D:/images/logo.png" alt="Site Logo" width="50" height="50"> </body> </html>