Tooltip (툴팁) 에관하여 :: TITLE vs ALT(알트) :: (2009-02-12 수정) > 기술자료 | 해피정닷컴

Tooltip (툴팁) 에관하여 :: TITLE vs ALT(알트) :: (2009-02-12 수정) > 기술자료

본문 바로가기

사이트 내 전체검색

Tooltip (툴팁) 에관하여 :: TITLE vs ALT(알트) :: (2009-02-12 수정) > 기술자료

HTML Tooltip (툴팁) 에관하여 :: TITLE vs ALT(알트) :: (2009-02-12 수정)

페이지 정보


본문

툴팁(tooltip attribute)은 다른 말로 "도구설명"이라고도 합니다.
익스플로러나 워드프로세서 등의 프로그램들을 보면 도구단추들이 있는데,
이러한 도구단추 위로 마우스를 올리면 시작, 검색 등의 글자가 나타나 도구단추의 용도를 알려줍니다.
툴팁은 바로 이러한 것을 말합니다.  다른말로는 "풍선도움말"이라고도 하지요.



1.이미지에 설명글 달기.
img 태그에서 alt속성은 이미지를 로딩할 수 없는 상황에서 그 이미지를 대체하기 위한 텍스트입니다.
title속성은 base, head, html, meta, param, script, style, title 태그를 제외한 태그에 사용할 수 있으며, 해당 엘리먼트에 마우스를 가져가면 띄워줄 툴팁(tooltip) 메시지를 설정할 수 있습니다.

IE에서는 title속성이 없을 때 alt속성이 있으면 그것을 툴팁으로 보여줍니다.

<img src="그림 주소" alt="그림이 없을 때 나올 설명" title="말풍선에 나올 설명" />
- title :이미지에 대한 툴팁 설명을 제공하는 속성 (tooltip attribute)
- alt : 이미지를 대체하는 문구를 제공하는 속성, 흔히 "알트"라고 부르죠 (alternate attribute)

2. 링크에 설명글 달기
<a href="링크" title="말풍선에 나올 설명">여기를</a>

3. 텍스트(일반글)에 설명글 달기
<span title="말풍선에 나올 설명" style="CURSOR:hand;">일반 Text 에서 Tooltip 보기</span>

4. Text Box(입력상자)에 설명글 달기
<input type="text" value="Text Box Tooltip" style="CURSOR:hand;"  title="말풍선에 나올 설명" />

5. Button에 설명글 달기
<input type="button" value="버턴툴팁" style="CURSOR:hand;"  title="말풍선에 나올 설명" />

6. 줄바꿈
alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용할수 없습니다.
alt 나 title의 줄바꿈은 &#13; 을 넣어야 합니다.
<img src="체리.jpg" alt="체리그림" title="이것은&#13;체리그림&#13;입니다" />

7. 속성들이 전부 제공되어 있을 경우 우선순위
title > alt

참고자료
http://hinaki.tistory.com/99 
http://hooney.net/2006/05/14/273/ 
http://mysesang.com/buty/tooltip.html 

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 100 페이지
  • RSS
기술자료 목록
654
Editor   23701  2009-03-05 20:53 ~ 2017-10-25 12:23  
653
일반   17720  2009-03-04 14:12  
652
일반   17837  2009-03-03 12:10  
651
일반   22874  2009-03-03 12:00  
650
HTML   16822  2009-02-19 07:43  
649
HTML   23363  2009-02-19 02:13 ~ 2015-10-12 00:00  
648
그누보드   16805  2009-02-18 15:10  
647
Search   19171  2009-02-17 08:32  
646
그누보드   12614  2009-02-16 19:30  
645
SNS   19646  2009-02-15 16:05  
644
Search   10909  2009-02-13 18:00  
643
SNS   13054  2009-02-13 16:40  
642
HTML   21798  2009-02-12 22:01  
641
HTML   12901  2009-02-12 21:48  
640
HTML   14046  2009-02-12 21:16  
열람
HTML   29934  2009-02-12 20:55  
638
HTML   16865  2009-02-12 20:08  
637
JavaScript   12378  2009-02-12 19:05 ~ 2009-02-11 00:00  
636
일반   14948  2009-02-03 14:10  
635
ClassicASP   19840  2009-01-31 10:55  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.