묻고답하기
자바스크립트와 폼태그를 이용한 홈페이지에 검색창 달기 질문입니다.
2007.06.20 21:47
안녕하세요, 전 요즘 HTML을 배우면서 개인홈페이지를 만들고 있는 사람입니다.
그런데 홈페이지에 네이버,구글,엠파스 등의 검색창(드롭다운 선택을 할수있는)을 달고 싶어서...
알아보니 자바스크립트를 알아야 하더군요(전 자바스크립트를 모릅니다.--;;)....
근데 여러 사이트를 돌아보니 고미(www.gomi.co.kr)라는 사이트에 제가 정확이 원하는 형태의
검색창을 서비스 하더라구요... 그래서 소스를 받은 후 해당 검색창 부분만 소스를 복사해서
아래와 같이 에디터에서 연습을 해보았습니다.
브라우저에서 실행해보니 모양은 똑같이 나왔는데 검색을 실행해보면 아래 그림처럼(네이버) 한글이 깨지
면서 나오는 현상이 발생합니다. 야후나 다른 사이트도 마찬가지 현상이 벌어집니다.
똑같은 소스를 썼는데 왜 이런 현상이 나타나는지 궁금합니다.
오늘 하루종일 자바스크립트도 조금 배워가면서 알아봤는데 도저히 답이 안나오는군요...흑흑...--;;
도와 주시면 감사하겠습니다.
이건 제가 소스를 복사해온 고미 라는 사이트입니다.
아래는 셀렉트 박스에서 네이버를 선택한후 "핸드폰" 이라는 단어를 검색한 결과입니다. 글씨가 깨져나오네요...
=========================================================================================
아래 소스는 제가 직접 에디터에서 연습해본 결과 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<TABLE style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 1px; LINE-HEIGHT: 100%" cellSpacing=0
borderColorDark=#cccccc cellPadding=0 width=293 align=center bgColor=#f6f6f6 borderColorLight=#f0ecf0>
<TBODY>
<TR>
<FORM name="searchforit" action="javascript:doSearch()" method="get">
<SCRIPT language=javascript>
<!--
function addplus(items)
{
var plussed = "";
for (var t = 1; t<= items.length ; t++)
{
if (items.substring(t-1,t) == " ")
{ plussed+="+"; }
else
{ plussed+=items.substring(t-1,t); }
}
return plussed;
}
// Do the Search
function doSearch()
{
var words;
words = document.searchforit.query.value;
var searchitems;
searchitems=addplus(words);
var index;
// obtain the selectedIndex properties from the search engines option for
index = document.searchforit.service.selectedIndex;
if (index>= 0)
{
var site;
site = document.searchforit.service.options[index].value;
site+=searchitems;
if (notEmpty(searchitems))
{
//window.open("","mainWin");
window.open(site,"_blank");
//window.location=site;
}
}
else
{alert("검색 엔진을 선택하세요.");}
}
// Check for empty contents in search searchitems
function notEmpty(word)
{
if (word == "" || word == null)
{
self.status="ENTER SEARCH searchitems";
alert("[알림] 검색어를 입력하세요.");
document.searchforit.query.focus();
return false;
}
else
{
self.status = word + "을(를) 찾고 있습니다.";
return true;
}
}
function clearIt()
{
document.searchforit.query.value="";
document.searchforit.query.focus();
}
function FocusOn() {
document.searchforit.query.focus();
return;
}
//-->
</SCRIPT>
<TD align=middle><SPAN style="FONT-SIZE: 9pt"><SELECT style="FONT-SIZE: 9pt; HEIGHT: 15px;
BACKGROUND-COLOR: #ffffff" name=service><OPTION
value=http://click.linkprice.com/lpclick.php?
m_id=yahoo&a_id=A100016682&p_id=0000&l_cd1=4&l_cd2=0&l_id=0001&u_id
=&lpv2=yahoo_kr_attach_linkprice001_0201&lpv3=0&lpv1=
selected>야후</OPTION><OPTION
value=http://search.naver.com/search.naver?query=>네이버</OPTION>
<OPTION
value=http://search.ilikeclick.com/ilikeclick/?ec=20001414&MD=P&TT=%BC%
D5%BD%AC%BF%EE+%B0%CB%BB%F6+-+%C0%CC%C1%F6%BC%AD%C4%
A1&HK=&AT=Y&PL=10&TP=2&BT=2&query=>이지서치</OPTION>
<OPTION
value=http://search.empas.com/search/all.html?q=>엠파스</OPTION>
<OPTION
value=http://search.daum.net/cgi-bin/nsp/search.cgi?w=tot&q=>다음</OPTION>
<OPTION
value=http://search.paran.com/search/index.php?Query=>파란</OPTION>
<OPTION
value=http://search.nate.com/search/search.asp?Query=>NATE</OPTION></SELECT>
</SPAN><!-- 야후!링크서치 노출 시작 -->![]()
src="고미.files/lpshow.htm" width=1 border=0 nosave><!-- 야후!링크서치 노출 끝 --
><INPUT
style="BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; FONT
-SIZE: 12px; BORDER-LEFT: #999999 1px solid; COLOR: #000000; BORDER-BOTTOM: #999999 1px
solid; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff"
size=26 name=query></TD>
<TD width=34><INPUT type=image
src="image/s_button.gif"></TD></FORM></TR></TBODY></TABLE>
그런데 홈페이지에 네이버,구글,엠파스 등의 검색창(드롭다운 선택을 할수있는)을 달고 싶어서...
알아보니 자바스크립트를 알아야 하더군요(전 자바스크립트를 모릅니다.--;;)....
근데 여러 사이트를 돌아보니 고미(www.gomi.co.kr)라는 사이트에 제가 정확이 원하는 형태의
검색창을 서비스 하더라구요... 그래서 소스를 받은 후 해당 검색창 부분만 소스를 복사해서
아래와 같이 에디터에서 연습을 해보았습니다.
브라우저에서 실행해보니 모양은 똑같이 나왔는데 검색을 실행해보면 아래 그림처럼(네이버) 한글이 깨지
면서 나오는 현상이 발생합니다. 야후나 다른 사이트도 마찬가지 현상이 벌어집니다.
똑같은 소스를 썼는데 왜 이런 현상이 나타나는지 궁금합니다.
오늘 하루종일 자바스크립트도 조금 배워가면서 알아봤는데 도저히 답이 안나오는군요...흑흑...--;;
도와 주시면 감사하겠습니다.
이건 제가 소스를 복사해온 고미 라는 사이트입니다.
아래는 셀렉트 박스에서 네이버를 선택한후 "핸드폰" 이라는 단어를 검색한 결과입니다. 글씨가 깨져나오네요...
=========================================================================================
아래 소스는 제가 직접 에디터에서 연습해본 결과 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<TABLE style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 1px; LINE-HEIGHT: 100%" cellSpacing=0
borderColorDark=#cccccc cellPadding=0 width=293 align=center bgColor=#f6f6f6 borderColorLight=#f0ecf0>
<TBODY>
<TR>
<FORM name="searchforit" action="javascript:doSearch()" method="get">
<SCRIPT language=javascript>
<!--
function addplus(items)
{
var plussed = "";
for (var t = 1; t<= items.length ; t++)
{
if (items.substring(t-1,t) == " ")
{ plussed+="+"; }
else
{ plussed+=items.substring(t-1,t); }
}
return plussed;
}
// Do the Search
function doSearch()
{
var words;
words = document.searchforit.query.value;
var searchitems;
searchitems=addplus(words);
var index;
// obtain the selectedIndex properties from the search engines option for
index = document.searchforit.service.selectedIndex;
if (index>= 0)
{
var site;
site = document.searchforit.service.options[index].value;
site+=searchitems;
if (notEmpty(searchitems))
{
//window.open("","mainWin");
window.open(site,"_blank");
//window.location=site;
}
}
else
{alert("검색 엔진을 선택하세요.");}
}
// Check for empty contents in search searchitems
function notEmpty(word)
{
if (word == "" || word == null)
{
self.status="ENTER SEARCH searchitems";
alert("[알림] 검색어를 입력하세요.");
document.searchforit.query.focus();
return false;
}
else
{
self.status = word + "을(를) 찾고 있습니다.";
return true;
}
}
function clearIt()
{
document.searchforit.query.value="";
document.searchforit.query.focus();
}
function FocusOn() {
document.searchforit.query.focus();
return;
}
//-->
</SCRIPT>
<TD align=middle><SPAN style="FONT-SIZE: 9pt"><SELECT style="FONT-SIZE: 9pt; HEIGHT: 15px;
BACKGROUND-COLOR: #ffffff" name=service><OPTION
value=http://click.linkprice.com/lpclick.php?
m_id=yahoo&a_id=A100016682&p_id=0000&l_cd1=4&l_cd2=0&l_id=0001&u_id
=&lpv2=yahoo_kr_attach_linkprice001_0201&lpv3=0&lpv1=
selected>야후</OPTION><OPTION
value=http://search.naver.com/search.naver?query=>네이버</OPTION>
<OPTION
value=http://search.ilikeclick.com/ilikeclick/?ec=20001414&MD=P&TT=%BC%
D5%BD%AC%BF%EE+%B0%CB%BB%F6+-+%C0%CC%C1%F6%BC%AD%C4%
A1&HK=&AT=Y&PL=10&TP=2&BT=2&query=>이지서치</OPTION>
<OPTION
value=http://search.empas.com/search/all.html?q=>엠파스</OPTION>
<OPTION
value=http://search.daum.net/cgi-bin/nsp/search.cgi?w=tot&q=>다음</OPTION>
<OPTION
value=http://search.paran.com/search/index.php?Query=>파란</OPTION>
<OPTION
value=http://search.nate.com/search/search.asp?Query=>NATE</OPTION></SELECT>
</SPAN><!-- 야후!링크서치 노출 시작 -->
><INPUT
style="BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; FONT
-SIZE: 12px; BORDER-LEFT: #999999 1px solid; COLOR: #000000; BORDER-BOTTOM: #999999 1px
solid; HEIGHT: 20px; BACKGROUND-COLOR: #ffffff"
size=26 name=query></TD>
<TD width=34><INPUT type=image
src="image/s_button.gif"></TD></FORM></TR></TBODY></TABLE>