툴팁은 다른 말로 "도구설명"이라고도 합니다. 익스플로러나 워드프로세서 등의 프로그램들을 보면 도구단추들이 있는데, 이러한 도구단추들 위로 마우스를 가져가면 멈춤, 새로고침, 시작, 검색 등의 글자가 나타나 도구단추의 용도를 가르쳐줍니다. 툴팁은 바로 이러한 것을 말합니다. 다른 말로는 "풍선도움말"이라고도 하지요. 웹페이지에서의 툴팁은 주로 링크가 되어있는 텍스트나 이미지위에 마우스가 위치 할 때 링크되어 있는 페이지에 대한 정보를 제공해주는 것이 대부분입니다.
툴팁에는 수없이 많은 형태가 있습니다. 일반 태그를 이용하는 간단한 방법에서 부터 dhtml과 css, 자바 스크립트를 이용한 다양한 방법이 있습니다.
가장 간단한 방법
▒ 이미지에 설명글 달기.
<img src="그림주소" alt="설명글">
이미지에 설명글을 넣을 때는 alt를 사용합니다.
alt 뒤에 설명글을 넣어주면 이미지에 마우스가 올라간 후 1~2초 후에 설명글이 보입니다.
[ 사용 예시 ]
<img src="rose.gif" alt="장미 그림">
결과보기
아래 그림에 마우스를 가져가 보신 후 잠시 기다려 보세요.
▒ 링크에 설명글 달기.
<a href="링크주소" title="설명글"> 이미지에 설명글을 넣을때는 title을 사용합니다. title 뒤에 설명글을 넣어주면 링크에 마우스 오버 1~2초후에 설명글이 보입니다.
<font size="2" title="설명글">
Text에 설명글을 넣을때도 title을 사용합니다.
title 뒤에 설명글을 넣어주면 Text에 마우스 오버 1~2초후에 설명글이 보입니다.
[ 사용 예시 ]
<font size="2" title="CURSOR:hand" style="CURSOR:hand;">
이글은 일반 Text 에서 Tooltip을 보여 주는 예제글 입니다.
이글위에 마우스를 가져 가시면 CURSOR:hand 라는 풍선 도움말이 보이실 것입니다.
바로 나오지 않는 분은 잠시만 기다려 보세요.
CURSOR:hand 라고 작은 풍선 도움말 보이세요?</a>
결과보기
(아래에 마우스를...)
이글은 일반 Text 에서 Tooltip을 보여 주는 예제글 입니다. 이글위에 마우스를 가져 가시면 CURSOR:hand 라는 풍선 도움말이 보이실것입니다. 바로 나오지 안는분은 잠시만 가다려 보세요. CURSOR:hand 라고 작은 풍선 도움말 보이세요?
▒ Text Box에 설명글 달기.
<input type="text" value="텍스트 박스글" title="설명글">
Text Box에 설명글을 넣을때도 역시 title을 사용합니다.
alt 나 title의 줄바꿈울 할때는 일반 태그와 같이 br을 사용 할 수 없습니다.
alt 나 title의 줄바꿈은 을 넣어야 합니다.
[ 사용 예시 1 ]
<img src="rose.gif" alt="이것은 장미 그림 입니다">
결과보기
아래 그림에 마우스를 가져가 보신 후 잠시 기다려 보세요.
[ 사용 예시 2 ]
<a href="http://asanak.com.ne.kr/asanak.htm" target=_blank title="게시판에 글을 올릴 때 또는 메일을 멋있게 보내고자 할 때는
오셔서 아름다운 글 올리는 방법을 보세요.
이 링크를 클릭하면 홈으로 갑니다">
아름다운글 올리는방법</a>
이 부분은 스타일시트를 이용해서 visibility의 초기값을 hidden으로 설정하고 있습니다.
스타일시트이기 때문에 <style> 태그로 둘러싸고 있으며 <head> 태그 내에 써주어야 합니다. #표시는 스타일을 선언할 때만 써주고 나중에 사용할 때는 쓰지 않습니다.
스타일시트를 정의 할 때 visibility외에 앞에서 레이어를 만들면서 배운 position, top, left, width, height 등의 속성을 이용하면 툴팁이 나타나는 위치를 바꿀 수 있습니다.
자바 스크립트 소스를 분석 하기란 상당히 어렵습니다. 자바를 전문적으로 공부한 프로그래메가 아니면 자바소스를 만들지 못합니다. 우리는 그저 프로그래머가 만들어 놓은 자바 소스를 이용만 할수 있을 뿐입니다.
툴팁을 만들기 위해서 우선, 기본적으로 <body>와 </body> 사이에 아래 있는 div레이어와 JavaScript소스를 넣어야 합니다.
<div style="position:absolute;z-index:1;visibility:hide" id="overDiv"></div>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
}
else {
ie5 = false;
}
}
else {
ie5 = false;
}
var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}
function drc(text, title, osy) {
dtc(1, text, title, osy);
}
function dlc(text, title, osy) {
dtc(0, text, title, osy);
}
function dcc(text, title, osy) {
dtc(2, text, title, osy);
}
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
}
else {
cnt++;
}
}
}
function dtc(d, text, title, osy) {
txt = text
layerWrite(txt);
dir = d;
offsety = osy;
disp();
}
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) {
moveTo(over,x,y+10);
}
if (dir == 1) {
moveTo(over,x,y+10);
}
if (dir == 0) {
moveTo(over,x,y+10);
}
showObject(over);
snow = 1;
}
}
}
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;
}
if (ie4) {x=event.x; y=event.y;
}
if (ie5) {x=event.x+document.body.scrollLeft; y=event.y+document.body.scrollTop;
}
if (snow) {
if (dir == 2) {
moveTo(over,x,y+10);
}
if (dir == 1) {
moveTo(over,x,y+10);
}
if (dir == 0) {
moveTo(over,x,y+10);
}
}
}
function cClick() {
hideObject(over);
sw=0;
}
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
}
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}
//-->
</script>
▒ 고급 방법
<a href="링크주소" target=자신의 타겟트 설정
onmouseover="dcc('<div style=margin-left:10;margin-top:10>
툴팁 설명글.</div>','','20')" onmouseout="nd()">링크</a>
이렇게 넣어 주시면 됩니다.
① 평범한 툴팁.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
소스중 http://asanak.com.ne.kr/index.html은 여러분의 링크 주소로 바꾸어 주시고 target=_blank 의 타겟트 설정도 홈에 맞게 수정해 줘야 합니다.
<a href="http://asanak.com.ne.kr/index.html" target=_blank
onmouseover="dcc('<div style=margin-left:10;margin-top:10;>
sample 1 <br>이것은 일반적인 툴팁 입니다.</div>','','20')"
onmouseout="nd()">아름다운글 올리는 방법</a>
결과 보기 ; (아래의 글에 마우스를 가져가 보세요)
② 툴팁 흐르는글.
이번에는 marquee를 이용하여 둘팁의 글이 움직이게 만들어 봅시다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> sample 2 <br><marquee width=250>툴팁의 설명글이 옆으로 흐릅니다.</marquee></div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>
결과 보기 (아래의 글에 마우스를 가져가 보세요)
③ 툴팁에 바탕색 넣기.
툴팁글에 바탕색도 넣어보죠.
font 에style=background-color:원하는 색상코드; 를 넣어 주시면 됩니다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> <font color=#ffffcc size=3 style=background-color:708090;>바탕색이 있는 툴팁박스</div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>
결과 보기 (아래의 글에 마우스를 가져가 보세요)
④ 툴팁에 테두리 넣기.
툴팁글에 바탕색과 테두리도 넣어보죠.
일반 테이블 작성법과 같습니다.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
수정법
폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다
<a href="http://asanak.com.ne.kr/index.html" target=_blank onmouseover="dcc('<div style=margin-left:10;margin-top:10;> <table border=1 cellspacing=0 cellpadding=3 width=250 bordercolor=#74a6ab bgcolor=#444444><tr><td><font color=orange size=3><center>SAMPLE4<br>테두리가 있는 툴팁박스 입니다</td></tr></table></div>','','20')" onmouseout="nd()">아름다운글 올리는 방법</a>
결과 보기 (아래의 글에 마우스를 가져가 보세요)
⑤ 툴팁에 테두리, 그리고 상단과 하단의 바탕색이 다르게 넣기.
위에 있는 소스 넣기를 마친 후,
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
수정법
폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다
툴팁글에 바탕색과 테두리도 넣어보죠.
일반 테이블 작성법과 같습니다.
<body>와 </body> 사이의 원하는 위치에 아래 소스를 넣습니다.
수정법
폭은 width 의 숫자를 고치고, 바탕색은 bgcolor를 테두리색은 bordercolor를 글색은font color를 수정하시면 됩니다
토글버턴 1은 자바스크립트 없이 가장 간단하게 만들 수 있는 것입니다만 단점은 한 번 밖에 사용 할 수 없다는 것 입니다.
예제보기: 아래 보이기를 클릭해 보세요.
♣ 보이기
♣ 숨기기
안녕 하세요?
토글버턴 예제 1번 입니다.
아래 소스를 복사해 사용 하세요
글자의 색상은 #HideText 의 color:#40FFC0; 와 #ShowText의 color:#FFF982;를 수정하면 됩니다.
♣ 보이기 ♣ 숨기기는 이미지로 대체 하여도 되고 나오는 내용 또한 어떤것이던 보이게 할수 있습니다
3. Form에 대한 개요
여기서는 간단히 Form이란 무엇인가에 대해 생각해 보도록 합니다.
대부분 Form은 Java Script, CGI와 함께 사용하게 됩니다. 회원제 사이트에 가면 이름, 주민등록 번호, 남녀 구분, 주소... 등등 입력하는 양식이 있죠? 이게 바로 Form으로 작성된 겁니다. 이것 저것 입력한 후 "확인" 버튼을 클릭하면 그 정보가 서버의 데이터 베이스에 전달되게 되는데, 이러한 정보를 데이터 베이스나 파일로 저장하는 작업을 해주는 것이 CGI라고 합니다. 검색엔진에서 원하는 단어를 넣고 검색을 하면 원하는 사이트가 나타나죠? 그것도 CGI를 이용한 것이랍니다.
그럼 CGI에 대해 간단히 알아볼까요? CGI는 Common Gateway Interface의 약자입니다. Common은 공통의, 공용의.. 이런 뜻을 갖고 있고, Gateway란 문, 출입구, 통로 그리고 interface는 경계면, 접점, 공유영역이란 뜻을 갖고 있습니다.
좀 더 어렵게 이야기 하자면 클라이언트 사용자와 서버 간에서 서로 필요한 정보를 서로 공유할 수 있도록 도와주는 것을 CGI라고 합니다.
CGI는 C, C++ 같은 컴파일 언어로 만들 수 있구요, Perl 같이 컴파일 과정 없이 사용되는 인터프리터 언어로 만들 수도 있어요. 단지 C, C++, Perl 등 만으로 가능한 것은 아니구요. 대부분의 언어로 구현이 가능합니다. 여기 하고 있는 프로젝트는 코볼로 했구요. 쉽게 접할 수 있는 CGI 프로그램은 방명록이나 게시판, 카운터, 순위 사이트 등이 있어요. 접해보신 분들이 계실테지만 게시판 중 Korea Famous CGI Server에서 제공하는 크레이지 보드는 C로 짠 게시판이고 Way-Board는 Perl로 되어있어요.
1) Form Tag
<FORM action="CGI Program Name" method = "post or get"> ... </FORM>
모든 입력 양식(Form)의 시작과 끝을 나타냅니다.
action="CGI Program Name" - 서버에서 실행될 CGI 프로그램을 나타냅니다. Perl로 된 것이라면 action="/cgi-bin/abc.cgi" 나 action="http://www.abc.com/cgi-bin/abc.cgi" 와 같은 형태가 될 것입니다.
method = "post or get" - 입력된 정보를 처리하는 방식을 나타냅니다.
method = "post" - 입력된 내용들이 서버에 있는 데이터베이스나 파일에 저장될 경우에는 대부분 post 방식을 사용합니다. 게시판이나 방명록이 주로 여기에 속합니다.
method = "get" - 입력된 내용들이 방문객에게 보여질 경우에 주로 사용됩니다. 카운터나 검색엔진이 주로 여기에 속하겠죠. 한 번 소스 보기로 보세요. Client에서 Server로 보내지는 정보는 URL 형태로 전달되어 보안문제가 그대로 드러나기도 하고, 한번에 보낼 수 있는 정보가 256 byte로 한정되어 있습니다.
type - type="text" 라고 하면 입력되는 형식을 텍스트 형태로 처리하겠다는 것을 뜻하는 것입니다.
name - 프로그래밍할 때 변수를 지정하는 것과 같은 원리입니다. name 이라는 항목으로 text input에 이름을 주어 서버에서 작동하는 프로그램에 전달하기 위해서 사용합니다. name을 주면 페이지가 로딩될 때 자바 스크립트 등을 이용해서 원하는 text input에 focus를 줄 수도 있습니다.
size - text의 길이를 n byte 만큼 글자가 들어갈 길이로 하겠다는 것입니다. text 모양의 길이를 나타냅니다.
maxlength - text에 들어갈 수 있는 실제 글자의 길이를 byte로 정합니다. text에 들어갈 수 있는 실제 문자의 길이를 정합니다.
value - 서버로 넘길 값입니다. text input에 사용자가 입력한 값입니다.
아래의 예에서 메일 주소 항목을 보면 메일 주소는 text input의 길이를 25 byte 만큼하고 최대로 들어갈 수 있는 글자를 25 byte로 한정하겠다는 이야기입니다. 25 바이트란 영문자나 숫자 25개가 들어갈 수 있는 길이를 말합니다. 참고로 한글은 한 자가 2byte를 차지합니다.
그리고 value에 미리 값을 셋팅했습니다. Default로 값이 들어있어야 할 경우 아래와 같이 사용하면 편리합니다.
모양은 텍스트 입력과 같습니다. 아래의 소스와 형식을 참조하세요.
<FORM>
<font size="2">
받는 사람 메일 주소 :
<INPUT type="text" name="r_email" size="25" maxlength="25">
<br>
받는 사람 이름 :
<INPUT type="text" name="r_name" size="10" maxlength="10">
<br>
보내는 사람 메일 주소:
<INPUT type="text" name="s_email" size="25" maxlength="25" value=" ">
<br>
보내는 사람 이름 :
<INPUT type="text" name="s_name" size="10" maxlength="10" value="한마음">
</font>
</FORM>asanak@com.ne.kr
사용법은 text input과 동일합니다. 단지 차이가 있다면 type을 password로 주었다는 것입니다. 여러분 어느 사이트에 회원으로 가입하고 로그온 할 경우 아이디와 비밀번호 넣지요? 그리고 비밀번호에 키보드로 비밀번호를 입력하면 "*******" 와 같은 형태로 나타나죠? 이게 바로 password input을 사용한 것입니다.
