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

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

 
Thursday, May 25, 2006

HTML] 웹페이지에서 마우스 툴팁(Tooltip; 말풍선) 태그(Tag)


화면의 어떤 요소에 마우스 커서를 가져가면 작은 창이 뜨며, 설명이나 간단한 도움말을 보여주는 것을 "툴팁(Tooltip)"이라고 합니다. 쉽게, 말풍선으로 부르기도 합니다.

HTML에서는 title 속성으로 말풍선을 만듭니다. 사용법은 다음과 같습니다:



텍스트 링크에 말풍선 붙이기



테스트:
여기로 마우스 커서를

코드:
<a href="https://www.google.co.kr/" title="말풍선입니다">여기로 마우스 커서를</a>






이미지에 말풍선 붙이기



테스트:


코드:
<img src="https://www.google.co.kr/logos/Logo_60wht.gif" title="말풍선입니다" />






이미지 링크에 말풍선 붙이기



테스트:


코드:
<a href="https://www.google.co.kr/" title="말풍선입니다"><img src="https://www.google.co.kr/logos/Logo_60wht.gif" title="말풍선입니다" /></a>






문단 등 기타 요소에 말풍선 붙이기



<p></p> 나 <span></span> 이나 <div></div> 태그 등 거의 모든 HTML 태그에 타이틀 속성을 추가할 수 있습니다.

테스트:

갑자기 차 소리가 나더니, 내 곁으로 버스가 지나가고 있다. 단지 입구의 정류장을 거쳐 온 버스인 듯하다. 지나가는 버스의 차창 안에서 눈빛이 나를 보고 있다. 나와 저 눈빛은 아무런 관련이 없다. 그것은 아파트 단지도 마찬가지이다. 만(萬)에 하나, 관련이 있다고 해도 그것은 이를테면, '뙤약볕이 걸어가는 한낮'과 '풀잎 속의 한 떨기 어둠'보다도 더 먼 관련이다.



코드:

<p title="말풍선입니다">갑자기 차 소리가 나더니, 내 곁으로 버스가 지나가고 있다. 단지 입구의 정류장을 거쳐 온 버스인 듯하다. 지나가는 버스의 차창 안에서 눈빛이 나를 보고 있다. 나와 저 눈빛은 아무런 관련이 없다. 그것은 아파트 단지도 마찬가지이다. 만(萬)에 하나, 관련이 있다고 해도 그것은 이를테면, '뙤약볕이 걸어가는 한낮'과 '풀잎 속의 한 떨기 어둠'보다도 더 먼 관련이다.</p>





참고 게시물:
[HTML] title(타이틀;말풍선) 속성과, img 태그의 alt 속성의, 차이점




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

0 Comments:

<< Home RSS 2.0 feed

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