그누보드 검색 단어(검색 키워드) 색깔 바꾸기 - 검색페이지 검색어 색깔 반전 수정
페이지 정보
조회 1,294회 작성일 22-05-15 22:12
본문
검색페이지 검색어 색깔 반전 수정
검색 단어(검색 키워드) 색깔 바꾸기
호불호가 갈릴 이야기지만, 그누보드에서 검색한 후 나오는 검색어가 눈에 거슬릴 때가 있다.
이때 검색단어 글자 색깔과 반전 색깔 수정을 간단하게 해 보자.
검색 단어(검색 키워드) 색깔 바꾸기 - 검색페이지 검색어 색깔 반전 수정
검색 키워드 색깔 바꾸기
우선 현상에 대해 확인한다.
검색를 한 후 나타나는 검색 결과를 보면, 검색했던 키워드가 반전되어 네모 속에 들어가게 표시된다.
자신이 검색했던 검색 단어 색깔만 강조되니 편리한 기능이긴 하다.
하지만 배경색이나 여러 가지 효과를 줄 때는 오히려 보기에 안 좋을 때도 있다.
이럴 때, 간단하게 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"을 동시에 눌러서 새로 고침해야 제대로 확인할 수 있다.