mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Friday, May 26, 2006

HTML] title(타이틀;말풍선) 속성과, img 태그의 alt 속성의, 차이점


HTML 태그의 title 속성은, 설명(Advisory Information)이나 도움말이 든, 말풍선을 만드는 속성입니다. 참조: "[HTML] 웹페이지에서 마우스 툴팁(Tooltip; 말풍선) 태그(Tag)"


alt 속성은 img 태그 안에서만 쓰입니다. 즉 JPG/GIF 등의 그림에 관련된 속성(Attribute)입니다. 그림이 서버에서 지워졌거나, 또는 인터넷 종량제 등으로 인해 그림을 일부러 표시하지 않도록 브라우저를 설정한 경우 등, 그림을 표현할 수 없는 경우가 있습니다. 이때는 그림이 있어야 할 자리를 텅 비워 두는 것보다는 글자들을 대신 채워 넣는 것이 좋습니다. 바로 alt 속성 안에 들어 있는 글자들이 그림 대신으로 (Text Alternative) 출력되는 것입니다.


이것이 alt 속성의 사용법입니다:

<img src="그림 주소" alt="그림이 없을 때 나올 설명" />




브라우저에 따라 주의할 점



인터넷 익스플로러에서는 alt 속성도 말풍선을 출력합니다.

<img src="그림 주소" alt="그림이 없을 때 나올 설명" />

즉 위와 같이만 해주어도 alt 속성의 내용이 말풍선으로 나옵니다. 그러나 이것은 표준이 아닌 것으로 알고 있습니다. 파이어폭스에서는 alt 속성으로 말풍선을 출력하지 않고 title 속성으로만 말풍선을 출력할 수 있습니다. 따라서 그림에 말풍선으로 설명을 추가할 때는 title 속성을 사용해야 합니다.


<img src="그림 주소" alt="그림이 없을 때 나올 설명" title="말풍선에 나올 설명" />

이렇게 설명을 이중으로 해주는 것이 정석입니다. 물론 설명이 같을 수도 있고 다를 수도 있습니다. 그리고 title 속성은 선택적이지만 alt 속성은 사실상 필수적인 매우 중요한 속성입니다. 그림에는 반드시 alt 속성으로 설명을 추가하는 것이 좋습니다. (그러나 alt 속성을 추가하지 않는다고 해서 에러가 나는 것은 아닙니다.)


외국에서는 인터넷 요금이 비싸서 그림이나 사진이 나오지 않고 글만 나오게 해서 서핑하는 네티즌들이 많습니다. 이때 alt 속성이 도움이 됩니다. 물론 한국에서는 종량제가 실시되지 않기에 큰 의미는 없지만, 구글 같은 검색엔진에서는 그림의 alt 속성을 중요하게 여기고 인덱스합니다. 따라서 그림에 alt 속성으로 설명을 추가하면 여러모로 도움이 됩니다.




▶▶ [HTML-CSS] 그림/사진 태그인 img 태그의 속성

▶▶ HTML title 태그, 페이지 제목 넣기; 타이틀 Tag




tag: html
HTML | CSS | 자바스크립트 JavaScript

2 Comments:
At June 27, 2006 at 10:21 PM, Anonymous Anonymous said...

IE에서는 그림의 url이 깨지면(로딩이 되지 않으면) x표시의 박스가 나오면서 텍스트가 나오지요. 불여우의 경우에는 아예 없었다는 듯이 alt 속성에 넣은 텍스트만 나오구요.

 
At June 28, 2006 at 10:48 AM, Blogger mwultong said...

IE와 파폭에서 이미지 렌더링에 미묘한 차이가 많더군요..

(∩_∩)

 

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top