[HTML] img태그(alt)
[HTML] img태그(alt)
<img src="image.jpg" alt="이미지의 묘사 내용" />
- 위와 같이 src속성에 이미지 주소를 넣어 사용한다.
- img요소에서 src속성과 alt의 속성은 필수 속성
- ex) img src ="http://www.everdevel.com/material/images/HTML/asimo.png"
alt 속성
- img요소의 alt속성은 Alternate(대체하다)의 줄임 말
- 즉, 이미지의 대안
- 이미지는 외부의 주소이기 때문에, 주소가 잘못되었거나, 해당 위치의 서버에 문제가 있다면 이미지를 못 읽어 올 수도 있음
- 이럴 때 이 alt속성의 내용이 해당 이미지를 대체하여 나타냄
- 하지만 이미지가 제대로 로드가 될 경우에는 이 속성 값이 브라우저에 보이지 않음
- 그러나 꼭 써야하는 속성
- 왜냐하면 alt속성은 이미지를 보지 못하는 분들이 봄
- 시각장애인은 이미지를 볼 수 없기 때문에, alt속성을 스크린리더로 들음
- 또한, 이미지를 제대로 이해하지 못하는 검색엔진 역시 이 alt속성을 받아드림
<p><img src="bullet.png" alt="블릿" /> 항목 1</p> <!-- X -->
<p><img src="bullet.png" alt="" /> 항목 2</p> <!-- O -->
- 만약, 위와 같이 alt로 블릿을 넣을 경우, 스크린 리더에서 '블릿 이미지. 항목 1', '블릿 이미지, 항목2' 이런 식으로 읽게 됨
- 무의미한 내용을 읽게 되므로 이럴 때는 alt속성을 비워야 함
댓글
댓글 쓰기