오늘 별것 아니지만 IE8 이후버전에서 나타나는 변화에 대해서 이슈가 발생했었다.
이미지 테그에 alt속성을 입력했지만 마우스 롤오버를 해도 툴팁이 나타나지 않는 것이었다!
이게 뭔일인가 싶어서 여기저기 기웃기웃 하다가 네이버 메인에서는 이미지에 롤오버를 했더니 툴팁이 나온다.
그래서 소스를 확인했더니 title 속성이 자리하고 있었다.

이게 뭔가해서 조사를 좀 해봤더니 
아주 상세하고도 정확하게 설명된 블로그를 찾을 수 있었다.
http://ilmol.com/wp/2008/04/04/391

2008년에 포스팅된걸보니 난 아직도 웹표준에 둔감한 모양이다. 반성해야지 ㅠ
여기서 씌여진 내용을 간단히 정리하면 아래와 같다.

- alt : 이미지가 표지되지 않거나 이미지를 표시하지않을 때 이미지를 대신하여 표현되는 대체 텍스트
- titile : 이미지의 제목

요런거다.

alt라는 속성은 "alternative"의 의미로 alt에 들어갈 내용은 "저 이미지가 만약 없다면 저 이미지를 대신할 다른 텍스트"라는 의미가 있다면 "title"속성은 "저 이미지의 제목"이라는 의미가 있다는 이야기.

무슨말인지 잘 이해하기 힘들면 아래의 예를 보면서 생각해보자.

 

위의 사진은 빈센트 반 고흐의 "해바라기"로 고흐의 대표작품으로 알려진 이 작품에 alt와 title속성을 부여하면 아래와 같을 것이다.

- title : 빈센트 반 고흐의 해바라기
- alt : 빈센트 반 고흐가 그린 해바라기로 주로 고흐에게 희망을 의미하는 노란색과 주황색으로 그려졌고 이 그림으로 인해 "태양의 화가"라는 호칭이 지어졌다.

라고 써야 옳다는 이야기.
W3C에 정의되어 있는 내용은 링크를 따라 확인할 것.
http://www.w3.org/community/webed/wiki/HTML/Elements/img 


아래는 쓰다보니 "어떻게하면 브라우저에서 툴팁이 뜨게 할까요?"라는 질문에 답을 하는 것 같아서 덧붙이는 내용.

보통 img테그의 alt 속성을 반드시 넣어줘야 한다고는 하는데 alt와 title의 사용용도를 헷깔려하는 사람. 혹은 잘못된 사용법으로 문서를 작성하는 사람들이 있다.
"alt와 title. 이 둘중 어떤걸 사용해야하나요?"는 잘못된 질문이다. 두개 다 써야하고 title과 alt의 용법에 맞춰 잘 사용해야한다. 툴팁은 어디까지나 브라우저의 친절이고 title은 이미지의 제목, alt는 이 이미지의 의미를 알려주는 역할이기 때문이다.

눈에 보이지 않는 부분까지 신경을 써야 눈이 보이지 않는 분들이나 이미지를 볼 수 없는 기기, 이미지를 사용할 수 없는 상황에서 이미지를 대신 전달 할 수 있다.

눈에 보이는 것만이 전부는 아니다. 요즘들어 HTML 표준을 살펴보면서 느끼는 점이다.

아주쉽고 재미있게 설명하고 있네요. 감사합니다.

출처 : http://igna.tistory.com/23