구글 맞춤 검색 엔진 (커스텀 서치) 꾸미는 방법 : 스타일 설정 - 여백 색상 테두리 폰트 이미지 URL 밑줄 입력창 버튼 검색결과 ...
블로그나 웹사이트의 자체 검색기 성능이 좋아짐에 따라 구글 맞춤검색기 사용이 줄어들고 있는 듯한 감이 있지만, 여전히 유용한 점이 많은 것 같습니다. 관련 정보가 있는 블로그나 웹사이트들을 한 데 묶어 개인화 또는 특화된 검색을 하기에는 안성맞춤이라 할 수 있겠습니다.
구글 맞춤검색기는 검색기 생성/설정 페이지에서 다양하게 제어를 할 수 있는 기능이 제공되고 있으므로, 웬만한 경우라면 그대로 웹페이지나 블로그에 적용할 수 있을 것입니다. 웹페이지의 특성상 좀더 세밀하게 조절 내지 꾸밈이 필요할 경우에는 아래와 같이 스타일 속성을 설정하여 보다 잘 어울리고 편리하게 만들 수 있습니다.
1. 검색기를 꾸미는 코드 삽입하는 방법
아래에서 보는 것처럼, 구글 맞춤검색엔진 코드 바로 위에 스타일을 지정하는 코드를 넣어 주면 됩니다.
2. 각 항목별 제어 코드 목록과 예
맞춤검색엔진을 꾸미고자 하는 바에 따라 필요한 항목만 골라 적절한 속성을 주면 됩니다.
맞춤 검색기 영역 제어
.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;}
도움이 되기를 바랍니다.
구글 맞춤검색기는 검색기 생성/설정 페이지에서 다양하게 제어를 할 수 있는 기능이 제공되고 있으므로, 웬만한 경우라면 그대로 웹페이지나 블로그에 적용할 수 있을 것입니다. 웹페이지의 특성상 좀더 세밀하게 조절 내지 꾸밈이 필요할 경우에는 아래와 같이 스타일 속성을 설정하여 보다 잘 어울리고 편리하게 만들 수 있습니다.
1. 검색기를 꾸미는 코드 삽입하는 방법
아래에서 보는 것처럼, 구글 맞춤검색엔진 코드 바로 위에 스타일을 지정하는 코드를 넣어 주면 됩니다.
<style type="text/css">
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}
input.gsc-input, .gsc-input-box {border-color: #d9d9d9;}
</style>
----- 구글 맞춤 검색 엔진 코드 -----
.cse .gsc-control-cse, .gsc-control-cse {padding:0px;}
input.gsc-input, .gsc-input-box {border-color: #d9d9d9;}
</style>
----- 구글 맞춤 검색 엔진 코드 -----
2. 각 항목별 제어 코드 목록과 예
맞춤검색엔진을 꾸미고자 하는 바에 따라 필요한 항목만 골라 적절한 속성을 주면 됩니다.
맞춤 검색기 영역 제어
.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;}
도움이 되기를 바랍니다.