[그누보드] 그누보드 배경색 css를 통해 변경하기
1. 그누보드 상단 배경색 변경
이번 포스팅에서는 그누보드 메뉴 윗부분에 기본으로 있는 상단 배경색을 변경하는 법에 대해 다룰 것이다.
메뉴 윗부분의 색깔을 바꾸어야 하는 경우가 많이 생기는데 이 경우는 css 파일을 건드려주어야 한다.
css 파일은 주로 이렇게 문서의 스타일을 바꾸어야 할 때 변경하게 된다.
오늘은 모바일과 PC에서 그누보드 배경색을 변경하는 방법을 알아보도록 하겠다.
2. PC 버전 상단 변경하는 법
먼저 PC 버전 상단을 변경하고 싶다면
theme 폴더 → 현재 자신이 사용하고 있는 테마의 폴더→ css 폴더 → default.css
파일로 들어가도록 하자
그러면
/* 상단 레이아웃 */
#hd {background:#020000}위처럼 되어 있는 코드가 있을 텐데 이 부분에서 background 뒤에 나오는 hex color code를 변경해주면 된다. hex color code는 구글링해보면 자신이 원하는 색깔을 코드로 변환해서 알려준다.
하지만 나의 경우 이렇게 수정을 해도 홈페이지에 반영되지 않았다.
크게 두 가지 이유가 있을 수 있는데,
첫 번째 이유는 전의 css와 충돌을 일으킬 수 있기 때문이다.
그래서 나는 위의 코드에
/* 상단 레이아웃 */
#hd {background:#000000!important}!important를 추가했다. 그러면 현재의 css가 우선시되어서 반영된다는 점이다.
하지만 나는 위 방법을 적용해도 홈페이지가 변동이 없었다.
그럴 경우에는 두 번째 인터넷 캐시 문제일 가능성이 크다. 이 경우에는 따라서 브라우저의 캐시를 삭제해주면 된다.
.png)
위의 그림처럼 브라우저 오른쪽 상단에 있는 것을 클릭하고 [도구 더보기]를 클릭한다. 이후 [인터넷 사용기록 삭제]를 눌러주면 된다. 대부분의 경우 이 방법을 적용하면 css가 잘 적용될 것이다.
3. 모바일 상단 변경하기
다음으로는 모바일에서도 동일한 css 적용을 하기 위해 필요한 방법에 대해서 알아보겠다. 이번에도 PC 버전과 비슷하게
theme 폴더 → 현재 자신이 사용하고 있는 테마의 폴더→ css 폴더 → mobile.css
로 들어가보자.
#hd {position:relative;background:#000000!important}그러면 default.css와 유사하게 #hd 뒤로 background 색깔을 지정할 수 있는 코드가 보인다. 그 부분에서 원하는 색을 hex code로 넣고 수정해주면 된다. 나는 검정색으로 하길 원해서 #000000으로 지정했다.
모바일도 마찬가지로 바로 css 적용이 안될수도 있는데 창을 새로고침하거나 다시 접속해보면 잘 적용된 것을 알 수 있다.
이번 포스팅에서는 메뉴 바 위로의 상단 배경 색을 바꾸는 것만 다루었는데 default.css와 mobile.css 코드를 보면 상단 색 이외에도 메뉴색, 서브 메뉴 색을 바꾸는 부분의 코드가 존재한다. 여기서 자신이 원하는 색깔로 코드를 바꾸어주면 custom page를 만들 수 있을 것이다.