검색 창 만들기

컴퓨터를 배우고 웹페이지를 어떻게 만든는지를 배워감에 따라 호기심이 더 많아지는 것이 사람 의 마음인 것 같습니다.제가 처음으로 컴퓨터를 배울 때 인터넷이란걸 알고부터 매우 신기해한 것이 홈페이지를보고 어느지점을 클릭하면 다른 화면으로 이동을하는 링크를 걸어놓은 것을 보고 매우 신기하게 여겨 그걸 한번 배워보고 싶어 홈페이지 무작정 따라하기등 웹 관련 책들을 사들고 와 혼자서 무작정 책따라 해보기시작하여 어느정도 링크가 뭔지를 알고 태그에대한 성질등을 수박 겉할기식으로 배워갔습니다

 

그리고 채팅을하면서 그림등 태그로 채팅창을통해 올리며서 우쭐해하며 동갑내기들의 선생노릇을 하며 나 홀로 즐거웠다. 한데 또 다른 신기한 태그를 보고 복사하여 퍼와서 해보면 되지 않는 것이 매우 많아 원인을 알 수 없었다. 나중에야 태그를 웹페이지에서 원상태로 보이는 것을 퍼오면 예를들어

　

<img src="https://t1.daumcdn.net/cfile/tistory/175A57234C509C281F">

이런 태그를 퍼와 올려보면 이미지가 나오지 않고 그대로 태그문자만 나오는데 그이유는 웹페이지에서 위에나오는 태그처럼보이게하는 태그가 이 태그다.

<p>&lt;img src="https://t1.daumcdn.net/cfile/tistory/175A57234C509C281F"></p>

그러기 때문에 웹 페이지에서 태그를 퍼오면 반듯시 메모장에 붙여넣어다가 메모장에서 다시 복사하여 사용하여야 제대로 된 태그가 되는것입니다

　

또한가지 포털사이트 야후 라이코스 미스다찾기 천리안등 검색사이트의 검색창이 너무신기해 또그걸 만들어 보고싶었습니다 그러나 제실력으로는 어림반푼업치도 없는일었습니다 검색엔진은 전문적인 프로그래머들이 C언어로 싶게말해 컴퓨터와 대화를 하면서 만들어야하는 프로그램이라 일반적인 홈페이지와는 매우 틀린 소스입니다

 

검색엔진은 컴퓨터명령어로 짜여진 컴퓨터만 이해할 수 있는 문자로 만들어야하므로 컴퓨터 기계어를 모르면 만들수가 없습니다 그래서 제가 할 수 있는 것은 남들이 만든 검색엔진을 사용하는 수 밖에 없어 그 사용법을 배우기로 하였습니다

 

멀티검색창이란 이름을 붙친 이창으로 우리나라 검색사이트들의 검색결과를 마음대로 선택하여 불러들일 수 있는아주 편리한 검색창입니다 한번입력으로 모든 검색엔진을 사용할 수 있어 저 같이 나이가 많은 사람들은 타자가 느려 글을 쓰는 것이 매우 번거롭기 때문에 이창이 매우편리하게 느껴짐니다.

 

이검색창은 스크립트를 이용하여 만든 일종의 프로그램 이지만 그래도 우리가 싶게 사용할 수 있도록 공개된 소스입니다 한번 사용해 보시면 만족하실겁니다 아래에 소스를 드래그 하여 복사합니다 그리고 메모장을 열어 거기다가 붙여 넣어세요 그런 다음에 메모장에서 다시 드래그하여 복사한다음에 홈페이지나 블로그나 카페등에 사용하고싶은곳에 붙여넣어 사용하시면 되는것입니다.

  [아래검색 창 소스]

<form onsubmit="return doSearch()" method="post" name="searchforit">

<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("검색 엔진을 선택하세요.");}

return false;

}

 

// 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>

<table width="600">

<td bgColor="#ffffff" width="521" align="middle"><span style="FONT-SIZE: 9pt">&nbsp;&nbsp;&nbsp;&nbsp;

<select style="BACKGROUND-COLOR: #ffffff; HEIGHT: 20px; FONT-SIZE: 9pt" name="service">

<option selected value="http://search.naver.com/search.naver?query=">통합</option>

<option value="http://search.naver.com/search.naver?query=">네이버</option>

<option value="http://kr.search.yahoo.com/search?fr=kr-front_sb&KEY=&p=">야후</option>

<option value="http://esearch.ilikeclick.com/ilikeclick/?ec=20001414&amp;MD=P&amp;TT=%BC%D5%BD%AC%BF%EE+%B0%CB%BB%F6+-+%C0%CC%C1%F6%BC%AD%C4%A1&amp;HK=&amp;AT=Y&amp;PL=10&amp;TP=2&amp;BT=2&amp;query=">이지서치</option>

<option value="http://www.google.co.kr/search?hl=ko&amp;q=">구글</option>

<option value="http://search.nate.com/search/all.html?s=&amp;q=">NATE</option>

<option value="http://search.daum.net/cgi-bin/nsp/search.cgi?w=tot&amp;q=">다음</option>

<option value="http://search.paran.com/search/index.php?Query=">파란</option>

</select> </span><input style="position: relative; background-color: #ffffff; ime-mode: active; width: 400px; height: 20px; color: #000000; font-size: 12px; border: 5px solid #006f00; padding-left: 6px; padding-top: 8px" size="42" name="query"></td>

<td width="68" bgcolor="#FFFFFF"><a onclick="javascript:doSearch()" href="#"><img border="0" align="absMiddle" src="http://cfs16.tistory.com/image/36/tistory/2010/05/06/03/48/4be1bd87c1c92" width="65" height="40"></a></td>

</form>

 

이소스로만든 것이 아래 에 있는 창으로 아쉬운 점은 이창은 익스플러 7 이상에서만 정상작동을 합니다. 그 아래 사양은 문자가 깨져 나오는 결점이 있습니다 참고하시고 사용하세요!

통합 네이버 야후 이지서치 구글 NATE 다음 파란

유용하게 사용하시기 바랍니다.그리고 검색창입력폼이 작게나오는분은 이코드를 찾아active; width: 400px; height: 20px; [숫자 20을 40으로 고처주면됩니다] 이렇게 active; width: 400px; height: 40px;말입니다