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

 
Previous Post [QnA] 포토샵에서, PSD 는 무엇인가요? / .psd 는 무엇에 쓰는 파일입니까? -...피드버너(FeedBurner)의 RSS 피드 갱신: 'Ping' 과 'Resync Now'...[윈앰프/Winamp] SP복각판 MP3 들을 때 귀가 따갑지 않도록 이퀄라이저 조절[QnA] 울트라에디트(UltraEdit)에서, ue_english.gip / dictam...[윈앰프-Winamp-MP3] 이퀄라이저(Equalizer)를 조절하여 고음질로[사운드카드(사블)] 고음역 강화하여 음질/해상도 좋게 - Sound Card[C언어-C프로그래밍] 복잡한 명령행 도움말을, printf() 함수 단 1개로 구현하기[C언어] 비주얼C로, 파일의 CRC32 값 구하기 (빠르고 메모리 점유 없이)[C언어/기초] fopen() 과 fprintf() 함수의 에러 검사 코드[C언어] 출력을 파일로 저장할 때는 printf() 가 아닌 fprintf() 함수를

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

Thursday, May 25, 2006

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

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



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



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

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






이미지에 말풍선 붙이기



테스트:


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






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



테스트:


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






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



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

테스트:

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



코드:

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





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


더 읽기: HTML/CSS

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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