상세 컨텐츠

본문 제목

웹페이지 툴팁에 대한 Tip

Web

by Werbershinta 2011. 3. 24. 10:36

본문

말풍선 또는 툴팁(tooltip)은 공통 그래픽 사용자 인터페이스 요소이다. 마우스 포인터라 불리는 커서와 함께 동작한다. 
사용자가 커서에 항목을 클릭하지 않고 가리키면 조그마한 상자가 항목 위에 나타나서 보충 설명을 보여 준다

다른말로는 "풍선도움말" 웹페이지에서의 툴팁은 주로 링크가 되어있는 텍스트나 이미지위에 마우스가 위치할때 링크되어있는 페이지에 대한 정보를 제공해주는 것이 대부분 이다. 툴팁에는 수없이 많은 형태가 있습니다. 일반 태그를 이용하는 간단한 방법에서 부터 dhtml과 css, 자바 스크립트를 이용한 다양한 방법이 있습니다. 우선 쉬운거 부터

1.이미지에 설명글 달기.
   <img src="그림주소" alt="설명글">
이미지에 설명글을 넣을때는 alt를 사용

2.링크에 설명글 달기.
   <a href="링크주소" title="설명글">
   이미지에 설명글을 넣을때는 title을 사용 title 뒤에 설명글을 넣어주면 링크에 마우스 오버 1~2초후에 설명글이 나타남
 
3.텍스트(일반글)에 설명글 달기.
   <font size="2" title="설명글">
Text에 설명글을 넣을때도 title을 사용 

4.Text Box에 설명글 달기.
   <input type="text" value="텍스트 박스글" title="설명글">
Text Box에 설명글을 넣을때도 역시 title을 사용합

5.Button에 설명글 달기.
<input type="button" value="텍스트 박스글" title="설명글">
Text Box에 설명글을 넣을때도 역시 title을 사용

6.툴팁 줄바꾸기.[Point]
      alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용할수 없다
      alt 나 title의 줄바꿈은 &#13; 을 넣어야 한다

 

관련글 더보기