[티스토리 북클럽 스킨] 마우스 호버(Hover) 시 배경색이 변하는 사이드바 카테고리 CSS 꾸미기

 

사이드바 카테고리는 왜 바꿔야 할까?

✚

티스토리 북클럽(Book Club) 스킨은 깔끔하고 심플한 매력 덕분에 가장 많은 블로거가 사용하는 스킨입니다. 하지만 기본 제공되는 사이드바 카테고리 메뉴를 쓰다 보면 어딘가 아쉬운 점들이 하나둘 보이기 시작합니다.

특히 마우스를 올려도 밋밋한 텍스트 밑줄만 생기거나 반응이 없어, 가독성이나 시각적인 인터랙션(UX) 면에서 아쉬움을 느끼셨을 텐데요. 방문자가 내 블로그의 다른 글들을 편하게 탐색하도록 유도하려면, "내가 지금 어떤 메뉴 위에 마우스를 올리고 있는지"를 직관적으로 전달하는 것이 무척 중요합니다.

오늘은 마우스를 올렸을 때(Hover) 부드럽게 배경색이 차오르고 살짝 우측으로 밀리는 감각적인 CSS 코드와 함께, 최근글/인기글 타이틀까지 통일감 있게 정리하는 방법을 준비했습니다. 클릭 몇 번으로 칙칙했던 사이드바를 세련된 웹사이트 메뉴처럼 업그레이드해 보세요!

📌 알림 

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

이 코드는 웹상에 공개된 적 없는 직접 제작 코드입니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, [블로그 관리자] > [꾸미기] > [스킨 변경]을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

728x90

---

감각적인 CSS 카테고리 미리보기

☑

A. 서브 카테고리가 있는 경우

 

B. 서브 카테고리가 없는 경우

 

• 수정 전: 마우스를 올려도 텍스트 밑줄만 겨우 표시되어 밋밋하고 답답함
• 수정 후: 마우스를 올리면 부드러운 연회색(또는 내 블로그 포인트 컬러) 배경이 채워지면서 확실한 피드백 제공!

---

[1단계] 사이드바 카테고리 CSS 적용하기

☑

CSS 코드를 한 번 교체하는 것만으로 1차 카테고리부터 하위(2차) 카테고리까지 한 번에 정리됩니다.

1. 기존 카테고리 코드 검색 및 삭제

1. '블로그 관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [CSS] 탭으로 들어갑니다.

---

 

2. CSS 탭에서 [Ctrl] + [F]로 .sidebar .category를 검색해 기존 스타일 코드를 모두 삭제하세요. (총 11개 항목)

.sidebar .category

---

2. 새 CSS 코드 붙여 넣기

기존 코드를 삭제한 자리에 아래의 새 CSS 코드를 그대로 붙여 넣은 뒤, 우측 상단의 [적용] 버튼을 눌러 '저장'합니다.

/* =========================
사이드바 메뉴 카테고리
========================= */
/* 전체 카테고리 박스 */
.sidebar .category {
  margin-bottom: 36px;       /* 박스 간 하단 여백 */
  padding: 10px 0 0 0;       /* 위쪽 여백 */
  background: #f2f2f2;       /* 배경색 */
  border-top: 2px solid #bbb; /* 상단 선 */
  border-bottom: 1px dotted #ddd; /* 하단 점선 */
}

/* 1차 카테고리 li */
.sidebar .category ul li {
  padding: 0;                /* 불필요한 여백 제거 */
  font-size: 1em;            /* 글자 크기 */
  font-weight: 600;          /* 굵기 */
  position: relative;        /* 화살표 위치 기준 */
}

/* 공통 링크 스타일 */
.sidebar .category ul li a {
  display: block;            /* 전체 영역 클릭 */
  text-decoration: none;     /* 밑줄 제거 */
  color: #555;               /* 기본 글자색 */
  padding-left: 10px;        /* 왼쪽 여백 */
  transition: color 0.2s, background-color 0.2s; /* 부드러운 hover 전환 */
}

/* 1차 링크 hover */
.sidebar .category ul li a:hover {
  color: #555;               /* hover 글자색 */
}

/* 하위 ul (2차 메뉴) */
.sidebar .category ul li ul {
  padding-top: 8px;          /* 상단 여백 */
}

/* 2차 카테고리 li */
.sidebar .category ul li ul li {
  padding: 0;                /* 불필요한 여백 제거 */
  font-weight: 400;          /* 일반 굵기 */
  font-size: 0.95em;         /* 글자 조금 작게 */
  border-top: 1px dotted #ddd; /* 상단 구분선 */
}

/* 2차 링크 */
.sidebar .category ul li ul li a {
  position: relative;        /* before 아이콘 기준 */
  padding: 7px 0 7px 20px;   /* 상하 여백 + 아이콘 공간 */
  background-color: #fff;    /* 배경색 */
}

/* 2차 링크 hover */
.sidebar .category ul li ul li a:hover {
  background-color: #7f7f7f; /* hover 배경 */
  color: #fff;               /* hover 글자 */
}

/* 2차 아이콘 ▸ */
.sidebar .category ul li ul li a:before {
  content: "▸";              /* 아이콘 문자 */
  position: absolute;        /* 부모 기준 위치 */
  left: 5px;                 /* 왼쪽 위치 */
}

/* 3차 ul (서브 메뉴) */
.sidebar .category ul li ul li ul {
  overflow: hidden;          /* 넘침 방지 */
  margin-bottom: 0;          /* 하단 여백 제거 */
  padding-top: 0;            /* 상단 여백 제거 */
}

/* 3차 li */
.sidebar .category ul li ul li ul li {
  position: relative;        /* before 아이콘 기준 */
  font-size: 0.9rem;         /* 글자 조금 작게 */
}

/* 3차 링크 */
.sidebar .category ul li ul li ul li a {
  display: block;            /* 전체 영역 클릭 */
  position: relative;        /* before 아이콘 기준 */
  padding: 7px 0 7px 25px;   /* 여백 */
  color: #888;               /* 글자색 회색 */
  background-color: #fff;    /* 배경색 */
  transition: color 0.2s, background-color 0.2s; /* hover 전환 */
}

/* 3차 링크 hover */
.sidebar .category ul li ul li ul li a:hover {
  background-color: #e8e8e8; /* hover 배경 */
  color: #000;               /* hover 글자 */
}

/* 3차 아이콘 - */
.sidebar .category ul li ul li ul li a:before {
  content: "-";              /* 아이콘 문자 */
  position: absolute;        /* 부모 기준 위치 */
  left: 15px;                /* 왼쪽 위치 */
}

/* 불필요한 코드 숨김
.sidebar .category ul li ul li ul li:first-child:before {
  top: 7px;
  bottom: auto;
} */
/* =========================
사이드바 메뉴 카테고리 END
========================= */

---

▼

---

[2단계] '최근글', '인기글' 타이틀 스타일 통일하기

☑

카테고리를 예쁘게 바꿨다면, 사이드바 내부의 다른 타이틀 요소를 하나의 클래스(.sidebar h2)로 제어하여 일관성 있는 톤 앤 매너를 완성해 줍니다. 최근글, 인기글뿐만 아니라 공지사항, 최근댓글까지 통일감 있는 레이아웃이 적용됩니다.

최근글과 인기글 밑줄 및 배경색 수정 전 ▶ 최근글과 인기글 밑줄 및 배경색 수정 후

---

1. 기존 타이틀 코드 검색

CSS 탭에서 Ctrl + F를 눌러 아래 코드를 검색합니다.

.sidebar h2 {

---

2. 새 코드로 변경 및 덮어쓰기

검색된 기존 코드를 지우고 아래 스타일로 변경한 뒤 [적용]을 눌러 저장합니다.

.sidebar h2 {
    margin-bottom: 7px;
    font-weight: 800;
    font-size: 1em;                /* 기존 0.875em에서 확장하여 시인성 확보 */
    color: #555;
    padding: 9px 0 9px 5px;        /* 타이틀 내 상하 패딩 및 좌측 여백 */
    border-top: 2px solid #bbb;    /* 상단 포인트 선 */
    border-bottom: 1px dotted #bbb; /* 하단 점선 */
    background-color: #eee;        /* 카테고리와 조화를 이루는 연회색 배경 */
}

---

▼

---

[3단계] 전체 방문자 상단의 불필요한 여백 및 선 제거하기

☑

사이드바 하단에 전체 방문자(카운터) 모듈을 적용해 두신 경우, 타이틀 상단에 뜬금없이 짧은 밑줄선과 어정쩡한 여백이 생겨 위에서 맞춘 일관된 스타일을 깨뜨리곤 합니다. 이 불필요한 요소를 깔끔하게 비활성화해 보겠습니다.

여백 삭제 전 ▶ 여백 삭제 후

---

1. 기존 방문자 타이틀 데코 코드 검색

여백과 짧은 밑줄 삭제는 CSS탭에서 아래처럼 .sidebar .count h2:before { 코드를 주석 /* ... */으로 묶어 비활성화합니다.

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar .count h2:before { 를 검색합니다.

.sidebar .count h2:before {

---

2. 주석 처리하여 기능 끄기

검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

/* 전체 방문자 타이틀 상단 불필요한 라인 제거 */
/*
.sidebar .count h2:before {
    content: "";
    display: block;
    width: 17px;
    height: 1px;
    margin-bottom: 18px;
    background-color: #555;
}
*/

---

▼

---

나만의 블로그 콘셉트에 맞게 컬러 커스텀하기

☑

블로그의 메인 테마 색상이 있다면 다음 코드 값들을 살짝 수정해서 개성 있게 꾸밀 수 있습니다.

 

• 배경색 변경: 코드 중 background-color: #f1f3f5; 부분의 색상 코드를 내 블로그 메인 컬러(예: 연한 파란색 #e8f0fe 또는 따뜻한 베이지색 #faf6f0 등)로 수정해 보세요.
• 이동 효과 민감도 조절: 마우스를 올렸을 때 오른쪽으로 밀리는 느낌을 줄이고 싶다면 padding-left: 18px; 값을 15px 정도로 낮추어 자연스럽게 조절할 수 있습니다.

사이드바 카테고리를 직관적이고 친근하게 다듬는 것만으로도 방문자가 블로그에 더 오랜 시간 머무르며 다른 글들을 탐색하게 만드는 효과(이탈률 감소)를 거둘 수 있습니다. 지금 바로 복사해서 여러분만의 예쁜 사이드바를 적용해 보세요!

728x90

---

.sidebar .category 원본 CSS 코드

✚

원상 복구 안내: 수정 사항을 되돌리고 싶을 때는 원본의 CSS 코드를 사용하여 복구하실 수 있습니다.

/* =========================
사이드바 메뉴 카테고리
========================= */
.sidebar .category {
  margin-bottom: 36px;
}

.sidebar .category ul li {
  padding: 0;
  font-size: 0.875em;
  font-weight: 600;
}

.sidebar .category ul li a {
  color: #555;
}

.sidebar .category ul li a:hover {
  color: #333;
}

.sidebar .category ul li ul {
  padding-top: 8px;
}

.sidebar .category ul li ul li {
  padding: 6px 0 7px;
  font-weight: 400;
  font-size: 1em;
}

.sidebar .category ul li ul li ul {
  overflow: hidden;
  margin-bottom: -4px;
  padding-top: 6px;
}

.sidebar .category ul li ul li ul li {
  position: relative;
  padding: 3px 0 3px 9px;
  border-left: 2px solid #eee;
  font-size: 0.8125rem;
}

.sidebar .category ul li ul li ul li:before {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: #eee;
}

.sidebar .category ul li ul li ul li:first-child:before {
  top: 7px;
  bottom: auto;
}

.sidebar .category ul li ul li ul li a {
  color: #999;
}
/* =========================
사이드바 메뉴 카테고리 END
========================= */

---

관련글 바로가기

☑

티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨

티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨

티스토리 꾸미기 | 북클럽 스킨 사이드바 고정하기

티스토리 꾸미기 | 북클럽 스킨 사이드바 고정하기

티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기

티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦