alt속성과 title 속성 비교

안녕하세요? 오늘은 title과 alt의 차이점에 대해 설명해 보겠습니다.
alt와 title 모두 이미지에서 말풍선을 보여주기 때문에, 다수의 사람들이 차이점을 모르는 경우가 많습니다.(저만 그런건 아니겠죠..?)
그래서 정리를 해보려고 합니다.

1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다. 용도는
① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)
② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.
③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.

2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.
① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.
② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 됨.
③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.

IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성이다.
출처 - http://okkks.tistory.com/29

이 설명만 보시고 이해가 가능하시겠어요?
'IE가 표준을 얼마나 지키지 않으며, 사람 바보로 만드는 지 확인할 수 있는 대목' 입니다.
IE 이미지에서는 alt 속성과 title에 관계 없이 말풍선을 보여주므로, 많은 사람들이 헷갈리게 되는 것입니다.
위의 글을 요약하자면..

alt 속성은 그림을 불러올 수 없거나, 인터넷이 느려 그림을 보지 않도록 설정해 놓는 사람들을 위한 그림에 대한 설명입니다.

▲ 사진의 경로가 달라서, 사진이 안보이고 alt속성에 있는 글씨가 사진 대신 보임.

title 속성은 특정영역에 마우스를 올려 놓았을 때, 간단한 말풍선 도움말 형식을 보여주도록 하는 것 입니다.<div style="border:2px solid red; width:100px; height:100px;" title="가로 100픽셀, 세로100픽셀의 <div>이다."> </div> ▲ 네모난 박스에 마우스를 올려놓으면 title속성의 글씨가 말풍선으로 나온다.

간단한 설명에 대해 말풍선을 보이기 위해서는 title 속성이 맞는 것이지요
결국 alt / title 속성 중 무엇을 써야하는지 고민할 것이 아니라, 필요에 따라서는 두 속성 다 꼭 써줘야하는 필수 요소라고 볼 수 있습니다.
간결하고 빈틈없는 코딩을 위해 표준을 지키며, 사용자에게 도움을 줄 수 있는 개발자가 되도록 노력합시다.

출처: https://bbaksae.tistory.com/25 [QRD]