기타활용 CSE 커스텀 맞춤 검색 엔진 디자인 스타일 - 구글 커스텀 서치 수정
페이지 정보
조회 753회 작성일 22-05-15 19:07
본문
구글 커스텀 서치 수정
CSE 커스텀 맞춤 검색 엔진 디자인 스타일
구글 CSE 맞춤 검색 엔진이란, 자신의 홈페이지에 구글 검색 엔진을 빌려와서 달 수 있도록 하는 서비스다.
하지만, 스크립트로 구글의 소스 코드를 그대로 가져와야 하기 때문에 디자인 스타일의 수정이 어렵다.
이 글에서는 구글 커스텀 검색 엔진의 스타일 수정에 필요하지만 알기 어려운 CSS 이름들을 정리하고 있다.
CSE 커스텀 맞춤 검색 엔진 디자인 스타일 - 구글 커스텀 서치 수정
Google CSE 맞춤검색 사용법
CSE란 Custom Search Engine의 줄임말이다. 우리 말로는 "맞춤 검색 엔진"이라고 할 수 있다. 아직 이것을 잘 모른다면 아래 링크에서 기본적인 내용을 볼 수 있다.
링크 : https://www.google.com/cse/manage/all
Custom Search Engine(CSE) 맞춤 검색의 사용법에 대해 참고하려면 아래 링크에서 이해하면 된다.
링크 : https://cloud.google.com/apigee/docs/api-platform/publish/portal/search-page?hl=ko
위 링크에는 사용 방법과 주의사항 등이 안내되고 있다.
만약, 검색 엔진을 달고 수익도 얻고 싶다면, 구글 애드센스에서 제공하는 검색 엔진을 달면 된다.
구글 애드센스를 검색해 가서, "광고 단위 기준" 탭에서 "검색엔진"을 선택하여 코드를 복사해 오면 된다.
구글 커스텀 맞춤 검색 엔진 디자인 스타일
이번에는 내부 코드를 뜯어서 알아낸 디자인 스타일 class 이름을 공개한다.
오른쪽에 있는 /* 설명 */ 부분을 잘 보면서 수정하면 검색엔진을 멋지게 꾸밀 수 있다.
<구글 커스텀 서치 수정 하기>
- #___gcse_0 {} /* 전체 시작 */
- .gsc-control-cse.gsc-control-cse-ko {} /* 검색 결과 바깥 부분 */
- .gsc-control-wrapper-cse {} /* 폼까지 포함한 표시 영역 */
- .gsc-results-wrapper-nooverlay.gsc-results-wrapper-visible {} /* 커스텀 검색 영역 박스 */
- .gsc-positioningWrapper {} /* 커스텀 검색 시작 박스 */
- .gsc-positioningWrapper {} /* 상단 라벨 랩 */
- .gsc-refinementsArea {} /* 상단 라벨 박스 */
- .gs-spacer {} /* 선택된 라벨 탭 */
- .gsc-refinementHeader.gsc-refinementhInactive.gsc-inline-block {} /* 추가된 탭 라벨 */
- .gsc-result-info-container {} /* 검색 결과 개수 박스 */
- .gsc-result-info {} /* 검색 결과 개수 글자 */
- .gsc-wrapper {} /* 검색 내용이 나열되는 박스 */
- .gsc-adBlock {} /* 검색 상단 광고가 나타나는 부분 */
- .gsc-expansionArea {} /* 실제 검색 결과가 나열되는 영역 */
- .gs-webResult.gs-result {} /* 각각의 검색 내용 박스 */
- .gs-title {} /* 검색된 제목 */
- .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-short {} /* 검색된 주소(간단) */
- .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-long {} /* 검색된 주소(전체) */
- .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {} /* 검색된 사이트 제목 */
- .gs-bidi-start-align.gs-snippet {} /* 검색된 상세 내용 */
- .gs-image-box.gs-web-image-box.gs-web-image-box-landscape {} /* 썸네일 이미지 박스 */
- .gs-image {} /* 실제 썸네일 이미지와 링크 */
- .gs-per-result-labels {} /* 라벨 부분 */
- .gsc-cursor-page.gsc-cursor-current-page {} /* 하단 페이징 숫자 */
- .gcsc-find-more-on-google-magnifier {} /* 하단 검색 돋보기 그림 */
- .gcsc-find-more-on-google {} /* 하단 구글 저작권 표시 */
구글 CSE 디자인 스타일 변경/수정 방법
수정 방법은 딱히 다를 것이 없다. 일반 css 파일에서 속성을 정하듯이 하면 된다.
예를 들어 검색 내용의 글자 크기를 변경하고 싶다면 이렇게 하는 것이다.
[code]
<style type="text/css">
.gs-bidi-start-align.gs-snippet { font-size:1.2em; }
. gs-image { width:300px; height:auto; }
</style>
[/code]
위에서 보는 바와 같이 일반 css 수정과 똑 같다.
단, 주의할 것이 있다.
구글에서 검색결과를 받아올 때 자동으로 구글쪽의 기본 CSS가 따라오기 때문에 생기는 문제다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그러므로 위와 같이 스타일 css 파일을 만들었다면, 검색 결과가 로딩되는 코드의 아래 부분에 넣어야 한다.
검색 결과를 불러오기 전의 단계에서 위와 같이 스타일을 적용해 봐야, 불러오면서 또 초기화되어 버린다.