검색 단어(검색 키워드) 색깔 바꾸기 - 검색페이지 검색어 색깔 반전 수정 > 웹제작/운영

검색페이지 검색어 색깔 반전 수정

검색 단어(검색 키워드) 색깔 바꾸기

호불호가 갈릴 이야기지만, 그누보드에서 검색한 후 나오는 검색어가 눈에 거슬릴 때가 있다.

이때 검색단어 글자 색깔과 반전 색깔 수정을 간단하게 해 보자.

검색 단어(검색 키워드) 색깔 바꾸기 - 검색페이지 검색어 색깔 반전 수정

검색 키워드 색깔 바꾸기

우선 현상에 대해 확인한다.

검색를 한 후 나타나는 검색 결과를 보면, 검색했던 키워드가 반전되어 네모 속에 들어가게 표시된다. 

자신이 검색했던 검색 단어 색깔만 강조되니 편리한 기능이긴 하다.

하지만 배경색이나 여러 가지 효과를 줄 때는 오히려 보기에 안 좋을 때도 있다. 

이럴 때, 간단하게 css 파일에서 색깔 수정을 할 수 있다. 

설치한 그누보드에서 CSS 디렉토리를 찾는다. 만약 테마를 설치했다면 테마의 하위 폴더 중에서 찾는다.

파일에서 default.css를 열어서 "sch_word"라고 검색한다. 그러면 아래와 같은 코드 소스를 찾을 수 있다.

[code]

.sch_word {

  color: #fff; 

  background: rgba(251, 207, 232, 1);

  padding: 2px 5px 3px;

  line-height: 18px;

  margin: 0 2px;

  border-radius: 3px;

}

[/code]

이 부분이 바로 검색 단어 반전 색깔을 설정하는 부분이다.

검색어 색깔 반전 예제 소스

수정을 잘 모른다면 위의 코드와  아래의 속성 설명을 보면서 바꿔보자.

• color : 글자의 색
• background : 단어 상자 내부 배경색
• padding : 단어 상자 내부의 여유 공간
• line-height : 줄의 위아래 여백
• margin : 다른 글자와의 여유 공간
• border-radius : 단어 상자의 둥그런 모양

초보라서 rgba(251, 207, 232, 1)인 색깔을 어떻게 바꿔야 할지 모른다면 "rgba 변환"이란 검색어로 검색하면 많은 자료를 볼 수 있다. 

예를 들어, 글자색을 그대로 하고 단어 상자의 색을 푸르게 하며, 직사각형으로 만들고 싶다면 아래처럼 바꿔주면 된다.

<검색 단어 색상 반전 수정 예제> [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

[code]

.sch_word {

  /* color: #fff; */

  background: rgba(182, 220, 254, 1);

  padding: 1px 4px 2px;

  line-height: 16px;

  margin: 0 1px;

  border-radius: 0px;

}

[/code]

참고로... 이렇게 한 후 확인할 때는 "컨트롤+쉬프트+R"을 동시에 눌러서 새로 고침해야 제대로 확인할 수 있다.