검색창 꾸미기
- 티스토리스킨수정/검색
- 2010. 5. 9. 11:20
나만의 멋진 검색창을 만들어 보아요.!!! ㅎㅎㅎ
티스토리에 사용하는 검색창뿐만 아니라 약간만 응용하면 구글의 맞춤검색도 스킨에 응용해서 사용할수 있습니다.
클래스를 추가해서 스킨과 비슷하게 만들어서 사용할수도 있지요.
우선 스킨수정에 관련한 글은 아래 링크를 참고해주시고 여기서는 티스토리에서 사용하는 검색창을 꾸며보도록 하겠습니다.
우선 제 스킨의 html부분에서 검색창에 대한 부분을 보고 이야기하겠습니다.
간단하게 설명하겠습니다. div id 로 시작할수도 있고 div class 로 시작할수도 있습니다. 스킨마다 좀 다릅니다.
가장 중요한것은 input class 부분이 검색글을 쓰는 부분이고 input value 로 시작하는 부분이 검색글에 해당하는 부붑입니다.
예를들어 제가 제작한 이미지로 설명을 해보겠습니다.
글을 쓰는 흰색부분이 <input class....... 부분이고 검색이라고 나온부분이 <input value........ 부분입니다.
대략 알고 넘어가야합니다.
저는 그냥 div id="search" 부분에 배경을 넣고 검색부분을 맞쳐보겠습니다. 우선 배경을 넣어줍니다.
css편집창에서 아래부분을 넣어줍니다.
div id 로 시작하면 # 구요, div class 로 시작하면 . 입니다.
그다음 아래 부분을 넣어줍니다.
한가지 참고하실부분은 border:1px solid #000 으로 하시고 테두리선이 나오면 보시면서 이미지와 테두리와 서로 비교해가면서 margin과 padding으로 맞추시면 됩니다.
너비는 사이드바의 너비를 넘지 않게 해야합니다.
다 맞춘다음에는 background:none 와 border:none 를 해줘야 이미지만 보입니다.
또 한가지 참고하실 사항은 저의경우 해보니까 브라우져마다 약간씩 너비에 차이가 있습니다. 즉 크롬이나 파이어폭스같은 브라우져와 IE 가 다릅니다. 이점 참고하시고 수정하시기 바랍니다.
스킨 수정에 관한 관련글 => http://demun.tistory.com/category/블로그/스킨수정
이미지가 준비된 상태로 적용을 해보겠습니다.
이미지를 만드실려면 이전글을 참고하세요.
이미지를 만드실려면 이전글을 참고하세요.
볼록한 느낌의 검색창 만들기 => http://demun.tistory.com/1605
우선 제 스킨의 html부분에서 검색창에 대한 부분을 보고 이야기하겠습니다.
<s_sidebar_element><!-- 검색 -->
<div id="search">
<s_search>
<input class="searchinput" type="text" name="[#\#_search_name_##]" value=" 검색어를 입력하세요." onFocus="this.value=''" onkeypress="if (event.keyCode == 13) { [#\#_search_onclick_submit_##] }"/>
<input value="" type="submit" onclick="[#\#_search_onclick_submit_##]" class="btSearch"/>
</s_search>
</div>
</s_sidebar_element>
가장 중요한것은 input class 부분이 검색글을 쓰는 부분이고 input value 로 시작하는 부분이 검색글에 해당하는 부붑입니다.
예를들어 제가 제작한 이미지로 설명을 해보겠습니다.
글을 쓰는 흰색부분이 <input class....... 부분이고 검색이라고 나온부분이 <input value........ 부분입니다.
대략 알고 넘어가야합니다.
저는 그냥 div id="search" 부분에 배경을 넣고 검색부분을 맞쳐보겠습니다. 우선 배경을 넣어줍니다.
css편집창에서 아래부분을 넣어줍니다.
#search{
background:url(./images/search.gif) no-repeat;
height:그림높이px;
width:그림너비px;
}
그다음 아래 부분을 넣어줍니다.
#search input.searchinput{
margin:15px 0 0 10px;
width:120px;
padding:0px;
height:25px;
border:none;
background:none;
color:#333;
font-size:13px;
}
#search input.btSearch{
border:none;
background:none;
width:60px;
height:30px;
cursor:pointer;
margin: 0 0 0 12px;
}
한가지 참고하실것은 옆줄과 나란이 맞지 않을때는 vertical-align:middle 를 추가해주세요.
너비는 사이드바의 너비를 넘지 않게 해야합니다.
다 맞춘다음에는 background:none 와 border:none 를 해줘야 이미지만 보입니다.
또 한가지 참고하실 사항은 저의경우 해보니까 브라우져마다 약간씩 너비에 차이가 있습니다. 즉 크롬이나 파이어폭스같은 브라우져와 IE 가 다릅니다. 이점 참고하시고 수정하시기 바랍니다.