티스토리 뷰

알짜팁

[html] alt와 title의 차이

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


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


IE에서 alt속성의 내용을 마우스 오버시 보여줌으로 인해 alt와 title의 구별에 혼동을 주곤 하지만, alt와 title은 용도와 기능 면에서 확실히 다른 속성입니다.
TAG
댓글
댓글쓰기 폼