웹 페이지에 이미지를 표시하려면 <img> 태그를 사용합니다. 이 태그에는 이미지 소스(src), 대체 텍스트(alt), 너비(width), 높이(height) 등 다양한 속성을 지정할 수 있습니다.
특히 src 속성은 이미지가 위치한 URL을 지정하는 역할을 하며, 여기에 다른 도메인의 주소를 입력하면 외부 사이트의 이미지도 자유롭게 가져와 표시할 수 있습니다. alt 속성은 대체 텍스트로, 이미지 로딩에 실패했을 때 화면에 나타나는 설명 문구입니다.
<img> 태그의 주요 속성 정리
<img> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | alt 이미지가 로드되지 않을 때 표시되는 대체 텍스트입니다. |
| 2 | height 이미지의 세로 높이를 지정합니다. |
| 3 | ismap 이미지를 서버 측 이미지 맵(server-side image-map)으로 사용할 때 지정합니다. |
| 4 | longdesc 이미지에 대한 상세 설명이 담긴 문서의 URL을 지정합니다. |
| 5 | src 표시할 이미지의 URL을 지정합니다. 필수 속성입니다. |
| 6 | usemap 이미지를 클라이언트 측 이미지 맵(client-side image-map)으로 사용할 때 지정합니다. |
| 7 | width 이미지의 가로 너비를 지정합니다. |
다른 도메인의 이미지를 불러오는 예제
아래 예제처럼 src 속성에 다른 도메인의 전체 URL을 그대로 작성하면, 해당 서버에 호스팅된 이미지를 내 웹 페이지에서 바로 사용할 수 있습니다.
<!DOCTYPE html> <html> <head></head> <body> <h2>Qries</h2> <img src="https://www.qries.com/images/banner_logo.png" alt="Qries" width="200" height="90"> </body> </html>
위 코드는 qries.com이라는 외부 도메인에 저장된 배너 로고 이미지를 불러와 화면에 표시하는 예시입니다. 이처럼 src 값에 완전한 URL(https://로 시작하는 절대 경로)을 넣으면 도메인이 달라도 이미지를 문제없이 출력할 수 있습니다.
참고 사항
<img> 태그는 닫는 태그(closing tag)가 없는 빈 요소(empty element)라는 점을 기억해 두세요. 또한 외부 이미지를 사용할 경우, 해당 이미지의 저작권과 핫링크(hotlinking) 방지 정책 여부를 확인하는 것이 좋습니다.