고래스킨 4.1 메뉴 버튼 색상 바꾸는 방법 및 팁

 

고래스킨에서 가장 눈에 띄는 설정이 무엇인가 하면 바로 상단에 헤드 색깔을 바꿀 수 있다는 점입니다. 고래스킨 4.1에서는 헤드 색깔을 바꾸는 기능을 편리하게 적용할 수 있습니다. 스킨 편집에서 스크롤을 아래로 내려 보면 레이아웃 편집에 헤더 영역 배경색 설정이 있기 때문입니다.

 

고래스킨 4.1 헤더 색상 설정

 

그런데 옆에 있는 메뉴 닫기 버튼 색깔은 헤드 색깔을 바꾼다고 해서 같이 바뀌지 않습니다. 겉으로 드러나지 않아서 그냥 쓰는 사람들도 있지만, 분명 거슬리는 사람들도 있겠죠. 그래서 오늘은 메뉴 닫기 버튼 색깔을 어떻게 하면 바꿀 수 있는지에 대해 소개하겠습니다. 

 

헤더 색상과 일치하지 않는 메뉴 색상

 

메뉴 닫기 버튼의 클래스 찾기

 

메뉴 닫기 버튼의 색깔을 수정하기 위해 가장 먼저 메뉴 닫기 버튼 클래스의 이름을 찾아봅시다.
고래스킨 4.1의 스킨 편집 > html 편집에서 메뉴 닫기라고 검색해보면 다음과 같은 스크립트가 존재하는 것을 확인할 수 있습니다.

<div class="dropdown-content">
	<ul id="myDropdown">
	<li><div class="btn_close">메뉴 닫기</div></li>
	<li><a href="https://money-laboratory.tistory.com/manage/entry/post"><i class="fas fa-pen"></i>글작성</a></li>
	<li><a href="/guestbook"><i class="fas fa-comment-alt"></i>방명록</a></li>
	<li><a href="https://money-laboratory.tistory.com/manage"><i class="fas fa-cog"></i>환경설정</a></li>

 

 

여기서 메뉴 닫기 버튼은 btn_close라는 이름을 가지고 있는 클래스인 것을 확인할 수 있습니다.
우리가 고치길 원하는 것은 메뉴의 색상이므로 색깔을 조정할 수 있는 CSS에서 btn_close를 검색해보면 다음과 같은 스크립트를 찾을 수 있습니다.

 

.btn_close {
	text-align: center;
	background: #088cff;
	color: #fff;
	line-height: 40px;
	cursor: pointer
}

 

여기서 background의 컬러가 바로 메뉴 바의 색깔입니다. color라고 표시된 것은 글씨의 색깔을 의미합니다.
따라서 메뉴 닫기의 색상을 고치려면 background에 있는 색깔을 바꿔주면 됩니다. 저는 #5a6269으로 색깔을 바꿔보았습니다. 그러면 아래의 이미지와 같이 색깔이 변한 것을 보실 수 있게 됩니다.

 

 

메뉴 색상 수정 후

 

색상 편집에 대한 팁을 드리자면 헤더 색깔을 편집할 때 배경색 선택에서 색상 코드를 불러올 수 있습니다. 그를 복사-붙여넣기하여 수정하시면 말끔하게 됩니다.

하지만 헤더 버튼과 메뉴 창이 너무 색깔이 똑같게 된다면 구분이 되지 않으므로 약간 밝게 하거나 약간 어둡게 조정하시는 걸 추천드립니다.

 

 

추가로 보면 좋은 정보

2023년 고래스킨 4.1 글 아래 태그 없애는 방법