HTML 페이지에서는 원하는 위치 어디든 이미지를 손쉽게 삽입할 수 있습니다. 이미지를 삽입하려면 <img> 태그를 사용하며, 이 태그는 닫는 태그가 필요 없는 빈 태그(empty tag)로 속성만으로 구성됩니다.
<img> 태그의 기본 규칙
<img> 태그는 반드시 <body>...</body> 태그 안에 작성해야 합니다. 주요 속성은 다음과 같습니다.
- src: 삽입할 이미지의 경로, 즉 이미지 URL을 지정합니다.
- alt: 이미지가 로드되지 않거나 스크린 리더를 사용할 때 표시되는 대체 텍스트를 지정합니다.
- width: 이미지의 너비를 지정합니다.
- height: 이미지의 높이를 지정합니다.
예제
아래 코드를 실행하면 HTML 페이지에 이미지를 삽입할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML img Tag</title> </head> <body> <img src="https://www.tutorialspoint.com/html/images/test.png" alt="Simply Easy Learning" width="200" height="80"> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 지정한 크기(200×80)로 이미지가 화면에 출력됩니다. 만약 이미지 경로가 잘못되어 로드에 실패하면, alt 속성에 설정한 대체 텍스트가 대신 표시됩니다.
정리
HTML에서 이미지를 삽입하는 것은 <img> 태그 하나만으로 가능합니다. src로 이미지 경로를 지정하고, 웹 접근성을 위해 alt 대체 텍스트를 반드시 함께 작성하며, 필요에 따라 width와 height로 크기를 조절하면 됩니다.