반응형 블로그(Fastboot) 상단 메뉴바 색상 변경하는 방법

 본문의 타이틀을 변경하니까 한결 블로그의 분위기가 나아질 줄 알았었는데 이제 다시 보니 제목에 관련된 색상 코드를 변경한다고 해서 블로그의 전체적인 색상이 변하는 것은 아니었나 봅니다. 각 부분은 그에 맞는 코드들이 존재하고 일일이 색상이 적용된 코드들을 찾아서 그 부분에 해당하는 코드에서 색상 코드를 변경을 해줘 하나씩 적용이 되는 것이었습니다. 그래서 일일이 적용을 해보고 새로 고침으로 확인을 하면서 찾았기 때문에 시간을 상당히 소요했었고 이제야 올릴 수 있게 되었습니다. 그럼 상단 메뉴바의 색상 변경하는 방법에 대해서 알아보겠습니다.

 

 

상단 메뉴바 색상 변경하는 방법

 

 

 

 

 

 

 

▲ 우선 TISTORY 관리 - HTML/CSS 편집을 클릭하고 CSS 편집 부분을 클릭합니다. 그리고 #secondNavWrap{background-color:#2d9495;height:31.5px;margin-bottom:15px;}에서 background-color:xxxxx에 변경하고자 하는 색상 코드값을 넣어주면 됩니다. 찾기 쉽게 F3이나 Ctrl+F를 이용해서 SecondNavWrap으로 검색을 하거나 왼쪽에 보이는 코드 열 정보를 보고 대략 1000번대에서 위의 코드를 찾으면 쉽게 찾을 수 있을 것입니다.

 

 

▲ 적용을 한 후 왼쪽 사진에서 오른쪽 사진으로 색상이 바뀌어서 좋아하고 있었지만 확인을 해보면서 상단 바 메뉴에서 하위 메뉴를 볼 때 메뉴 박스의 색상이 변경되지 않고 그대로인 것을 확인하였습니다. 어떻게 해야 하나 난감해서 고민하던 중에 그냥 현재 적용한 코드를 일일이 대입해보고 확인하는 작업을 해보았습니다.

 

 

하위 메뉴 박스 색상 변경하는 방법

 

 

▲역시 시간을 들이면 안 되는 것이 없나 봅니다. 원래의 코드 1000번대 초반에 상단 메뉴 코드의 근처에 있을 줄 알았는데 생각보다 더 아래에 있어서 시간이 좀 걸렸던 것 같습니다.

 코드는 #secondNav>ul ul ul a{width:100%;text-align:left;padding:8px 15px;background-color:색상 코드 값 입력;font:12px Arial,sans-serif;color:#FFF;text-decoration:none;} 이 부분에 있었는데 이곳에서도 위에서와 마찬가지로 코드 값이 들어가는 color:뒤에 변경하고자 하는 색상 코드 값을 넣어주면 적용이 될 것입니다.

 

 

▲ 짠! 상단 메뉴바와 똑같은 색상으로 적용을 하였고 전체적으로 약간 밋밋한 것 같아서 본문 제목과는 약간의 색상 차를 두었습니다. 나름 괜찮다고 생각이 되는데 어떠신가요? 블로그를 조금 더 깔끔하게 만들기 위해서 다음 포스팅은 더 유익한 정보를 갖고 돌아오겠습니다.