반응형 스킨 네비게이션 바 색상 변경하는 방법

 

Tistory Blog 반응형 스킨에서 상단바 색상 변경하는 방법

 

  세리카님이 질문하신 내용입니다. 별로 어려운 내용은 아닙니다만 CSS를 손대지 못하신다면 어디를 고쳐야 하는지 혼란스러울 수밖에 없겠죠. 여기서 소개할 변경법은 FastBoot 스킨 뿐만 아니라 스켈레톤 스킨이라던지, 상단에 네비게이션 바가 위치한 반응형 스킨(혹은 Bootstrap을 사용한 스킨) 등에서 모두 사용 가능한 방법입니다. 부트스트랩 네이게이션(Nav)를 커스터마이징 하는 방법이 될 수 있겠네요. 역시 이것이 가능한 이유는 티스토리 블로그의 확장성 때문일텐데요. 방법을 알아봅시다.

 

 

  기본 FastBoot 블로그 스킨입니다. 크롬 개발자도구 (F12)를 활용하여 어디를 수정해야 색이 바뀌는지 알아봅시다.

  상단 네비게이션 바(nav)에서 오른쪽 클릭을 하고 속성을 보면 다음처럼 배경색이 지정되어 있는 것을 볼 수 있습니다.

 

 

 

  그림처럼 체크된 부분을 보시면 #3da8e3으로 배경색이 지정되어 있습니다. 이를 수정해주면 되는데요, 적당한 색상을 찾아야 합니다. 부트스트랩은 기본적으로 플랫한 디자인이 잘 먹히므로 플랫한 색상(채도가 좀 높은)이 어울리겠는데요, 제가 이전에 포스팅 해 둔 색상들이 있는데 이걸 참조할 겁니다.

 

2013/12/23 - [Web/Programming/Design] - 플랫 디자인 색상 예제 / 색상코드(색상표)

 

 

#e74c3c

 

저는 이 색상이 맘에 드는군요. 이를 적용하려면 아래와 같이 CSS Overriding을 해주면 됩니다.

 

/* Bootstrap Navigation Overriding by Readiz */
.navbar-default {
  background-color: #e74c3c;
}
 
	

자 이제 이렇게 CSS에 추가를 해 주고 나면 아래처럼 화면에 원하는 색상으로 네비게이션 바 색상이 적용이 됩니다.

 

 

 

  바꾸고 보니 이 색상도 검색버튼 색상만 좀 매칭되게 바꾸면 잘 어울리는 것 같네요. 아무튼 크롬 개발자도구 덕분에 무언가 스킨이나 부분부분의 CSS를 변경할 때 참 편리합니다. 위와 같은 요령으로 수정하고 싶은 Object 위에서 오른쪽 버튼->요소검사(N)을 누른 뒤 해당하는 속성 값을 변경시켜주면 되니까요. 같은 요령으로 네비게이션 뿐만 아니라 부트스트랩의 모든 요소들을 Overriding하여 변경시킬 수 있습니다.