프로필 누르면 나오는 메뉴창 CSS로 고치기

문제 상황

다크모드로 스킨을 꾸미다보면 손볼 곳이 많다.

그 중 하나가 돋보기나 숨겨진 메뉴와 같이 구석구석에 숨어 있는 '디테일'들에 대한 것.

 

며칠 전 프로필 메뉴를 누르면 나오는 '관리', '글쓰기', '로그아웃' 등의 메뉴를 어떻게 고칠 수 있는가로 골머리를 앓았었다.

 

---

해결 방법

 

해결은 간단하다. 해당 부분과 관련된 원본 CSS를 수정하면 된다.

Book Club 스킨 기준으로 위 프로필 메뉴창에 대한 CSS 코드는 아래와 같다.

아래에 적어둔 코드들은 현재 내가 적용해서 사용하고 있는 다크모드를 기준으로 적어둔 내용들이다.

아울러 편집하기 용이하게 주석도 함께 달아두었다. 주석까지 그대로 복붙해도 CSS는 정상적으로 작동한다.

 

만약 다크모드를 사용하고 싶으시다면 그대로 복붙하면 되고, 각자가 원하는 색상이 있다면 그에 맞게 편집해서 사용하면 되겠다.

#header .util .profile ul li a {     /* 프로필 누르면 나오는 메뉴창 */
  display: block;                    /* 링크 전체가 클릭 가능하도록 블록 요소로 설정 */
  margin-top: -1px;                  /* 위쪽 마진을 -1px로 설정해 항목 간 경계선을 겹치게 처리 */
  border: 1px solid #555;            /* 연한 회색 테두리 */
  background-color: #222;            /* 배경색 */
  text-align: center;                /* 텍스트 중앙 정렬 */
  text-decoration: none;             /* 밑줄 제거 */
  font-size: 0.875em;                /* 글자 크기를 약간 작게 설정 (보통 14px 정도) */
  line-height: 2.3125rem;            /* 줄 간격 설정 (약 37px로 버튼처럼 보이게) */
  color: #777;                       /* 텍스트 색상은 중간 회색 */
}