[CSS] alt 와 title 비교

[CSS] alt 와 title 비교

말풍선을 띄울 일이 생겨 검색을 하던도중 

alt와 title의 기준이 애매해서 정리해볼까한다.

alt와 title 둘다 이미지 / 응용할시 다른곳 에서도 말풍선을 보여주기 떄문에 차이점이 햇갈릴수도있는데 아래의 메시지를 참고하면 좋을듯 함.

1. alt(alternative) : '이미지의 대안, 이미지에 대한 설명'이라고 보시면 됩니다.

① 인터넷 속도, 또는 컴퓨터 사양 문제로 웹브라우저 설정을 '이미지 출력 안 함'으로 한 사용자에게 이미지에 대한 간략한 설명을 볼 수 있음. (데스크탑이 아닌 모바일기기로 접속시에도 유용함.)

② 시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt태그 안의 설명을 읽어줌.

③ 일반인 웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 배꼽과 함께 이미지 설명을 보여줌.

2. title : 이미지 위에 마우스 포인터를 올려 놓았을 때 풍선 도움말처럼 뜨게 함.

① 이미지뿐 아니라, a태그, span태그, td태그 등 거의 대부분의 태그에 사용할 수 있고, '클릭하시면 다음 사진으로 바뀝니다.' 등의 간단한 풍선도움말 형식을 사용할 수 있음. 특히 웹표준에서는 a태그에 title 속성은 필수항목임. 링크주소에 대한 설명을 넣어, 링크주소에도 의미를 부여할 수 있음.

② 터치스크린 모바일기기에서 웹브라우징시에는 a링크 또는 이미지에 마우스 포인터를 올려놓을 수 없으므로, 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크

로 접속이 됨.

③ 일반적인 게시판 리스트 페이지에서 게시물 제목을 일정 길이로 잘랐을 때, title속성에 전체 제목을 넣어주면, 해당 게시물을 클릭할 필요 없이 마우스 오버만으로 전체 제목을 볼 수 있음.

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

또한 테이블에 사용할시 title은 alt 없이 사용하면 안됩니다.