HTML 이미지 삽입 - <img> 태그

<img> 태그는 HTML 문서에 이미지를 삽입시키기 위한 태그이다.

 

<img> 태그의 기본 속성으로는

• src - 이미지의 source(출처/경로)
• width - 이미지의 너비
• height - 이미지의 높이
• alt - 설명

가 있으며 아래와 같은 방식으로 사용한다.

<img src = money.png width = "300" height = "200" alt="동전과 지폐">

alt는 alternative text의 약자로 '대체 가능한 텍스트'라는 의미이다.

이미지에 대한 부가 설명을 나타내는 속성인데 이를 넣어주는 이유는 다음과 같다.

 

첫째, 만약 이미지의 경로가 잘못되거나 웹서버에서 img 파일이 사라졌을 경우 "엑박 + 설명" 형태로 출력되게 하므로 사용자 출력되지 않은 이미지가 무엇인지를 대략적으로 알 수 있다.

 

둘째, 시각장애인분들께서 음성인식 기반의 웹서핑을 할 때 img 태그에 적혀있는 alt를 듣게 됨으로써 이미지에 대한 정보를 얻을 수 있다.

셋째, SE (Search Engine), 즉 구글의 검색엔진에 사용되어 검색순위를 점하는데 도움이 됩니다.

 

---

실행화면

<img> 태그 사용