이미지 태그 <img>의 alt와 title 속성

일반적으로 이미지 태그는 아래와 같이 사용한다. 

<img scr="이미지 경로">

baby.jpg 라는 파일명의 이미지 파일을 불러온 것이다. 그런데 이러한 이미지 태그 <img>에 alt나 title 속성을 사용한 것을 볼 수 있다. 이 속성들은 각각 무엇이고 어떤 상황에 사용해야 할까?

 

alt의 의미와 사용

이미지 태그의 alt 속성은 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. 대체 텍스트이므로 당연히 이미지의 내용을 대체할 수 있는 이미지 설명이어야 하며, 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다.

<img src="이미지 경로" alt="이미지를 표시할 수 없을 때 출력하는 이미지 설명">

시각장애인들은 alt의 내용을 리더기로 듣게 되는데, 현재 국가지침으로 정해져 있는 alt 텍스트의 글자수 제한은 없으나 통상 200~250자 정도까지를 권장하고 있다. (그 이상이 될 경우 대체 콘텐츠나 longdesc을 통해 제공)

더해서, 의미가 없는 이미지의 경우에는 괜히 혼란을 줄 수 있으므로 alt를 넣지 않는다. 예를 들어 리스트 목록 앞에 빨간 동그라미 모양의 이미지를 삽입한 경우 alt에 "빨간 동그라미"라는 설명을 넣을 필요가 없다.

 

title의 의미와 사용

이미지를 표시할 수 없을 때 출력하는 것이 alt 속성이었다면 title은 이미지 위에 마우스 커서가 위치했을 때 보여지는 말풍선 즉, 이미지 제목이라고 생각하면 된다.

<img src="이미지 경로" title="마우스 커서가 위치했을 때 보여지는 말풍선(이미지 제목)">

위 이미지는 title 속성에 "아기와 인형"이라는 텍스트를 적용한 것이다. 마우스 커서를 가져다 대면 해당 텍스트가 말풍선으로 보여진다.

---

<img src="이미지 경로" alt="이미지를 표시할 수 없을 때 출력하는 이미지 설명" title="마우스 커서가 위치했을 때 보여지는 말풍선(이미지 제목)">

alt 속성과 title 속성을 한꺼번에 사용할 수 있으며, title 속성은 선택이지만 alt 속성은 되도록이면 추가해 주는 것이 좋다. 물론 alt를 사용하지 않았다고 해서 오류가 발생하지는 않는다.