구글 맞춤 검색 엔진 (커스텀 서치) 꾸미는 방법 : 스타일 설정 - 여백 색상 테두리 폰트 이미지 URL 밑줄 입력창 버튼 검색결과 ...

블로그나 웹사이트의 자체 검색기 성능이 좋아짐에 따라 구글 맞춤검색기 사용이 줄어들고 있는 듯한 감이 있지만, 여전히 유용한 점이 많은 것 같습니다. 관련 정보가 있는 블로그나 웹사이트들을 한 데 묶어 개인화 또는 특화된 검색을 하기에는 안성맞춤이라 할 수 있겠습니다.

구글 맞춤검색기는 검색기 생성/설정 페이지에서 다양하게 제어를 할 수 있는 기능이 제공되고 있으므로, 웬만한 경우라면 그대로 웹페이지나 블로그에 적용할 수 있을 것입니다. 웹페이지의 특성상 좀더 세밀하게 조절 내지 꾸밈이 필요할 경우에는 아래와 같이 스타일 속성을 설정하여 보다 잘 어울리고 편리하게 만들 수 있습니다.



1. 검색기를 꾸미는 코드 삽입하는 방법

아래에서 보는 것처럼, 구글 맞춤검색엔진 코드 바로 위에 스타일을 지정하는 코드를 넣어 주면 됩니다.

<style type="text/css">
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}
input.gsc-input, .gsc-input-box {border-color: #d9d9d9;}
</style>
----- 구글 맞춤 검색 엔진 코드 -----



2. 각 항목별 제어 코드 목록과 예

맞춤검색엔진을 꾸미고자 하는 바에 따라 필요한 항목만 골라 적절한 속성을 주면 됩니다.

구글 맞춤 검색 엔진 (커스텀 서치) 꾸미는 방법 : 스타일 설정 - 여백 색상 테두리 폰트 이미지 URL 밑줄 입력창 버튼 검색결과 ...

맞춤 검색기 영역 제어
.cse
.gsc-control-cse

예) 검색기 영역의 여백을 없애고자 할 경우
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}


검색어 입력창 제어
input.gsc-input
.gsc-input-box
.gsc-input-box-hover
.gsc-input-box-focus
.gsc-search-box .gsc-input>input:focus
.gsc-search-box .gsc-input>input:hover

예) 검색기 입력창 색상을 꾸미고자 할 경우
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {border-color: #d9d9d9;}


검색 버튼 제어
input.gsc-search-button
input.gsc-search-button:hover
input.gsc-search-button:focus

예) 검색 버튼 색상을 꾸미고자 할 경우
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { 
 border-color: #666; 
 background-color: #cecece; 
 background-image: none; 
 }


검색결과 정보(검색결과 약 xxxxx개 (0.xx초)) 제어
.gsc-result-info

예) 검색결과 정보를 표시하지 않게 하려는 경우
.gsc-result-info {display: none;}


검색결과 구글 로고 제어
.gcsc-branding

예) 검색결과 구글 로고 안보이게 하려는 경우
.gcsc-branding {display: none;}
   

검색결과 각 항목을 제어
.gs-webResult

예) 검색결과 각 항목에 바탕색을 넣으려 할 경우
.gs-webResult {background:#757575; padding:1.0em 1.5em;}


검색결과 글 제목 제어
.gsc-result .gs-title
.gs-title

예1) 검색결과 글 제목 텍스트 꾸밈을 없애고자 할 경우
.gsc-result .gs-title {text-decoration:none;}

예2) 글 제목 글자 크기를 꾸미고자 할 경우
.gs-title a {font-size: 2.0em;}


검색결과 스니펫(짧은 설명문) 제어
.gs-snippet

예) 스니펫 글자 색상을 꾸미고자 할 경우
.gs-snippet {color: #95959;}


검색결과 굵은체(bold) 제어
.gs-title b
.gs-snippet b

예) 굵은 체를 보통체로 하고자 할 경우
.gs-title b {font-weight: normal;}


검색결과 글 주소(URL) 제어
.gsc-url-top
.gsc-url-bottom

예) 글주소를 표시하지 않으려 할 경우
.gsc-url-top, .gsc-url-bottom {display: none;}


검색결과 섬네일(이미지) 제어
.gsc-thumbnail

예) 검색결과 섬네일 이미지 크기를 조절하려 할 경우
.gsc-thumbnail {width:25px; height:auto;}


검색결과 네비게이션 제어
.gsc-cursor-page

예) 검색결과 페이지 네비게이션을 꾸미고자 할 경우
.gsc-cursor-page {font-size: 1.2em; padding: 4px 8px; border: 2px solid #ccc;}


도움이 되기를 바랍니다.