북클럽 스킨 사이드바 카테고리, 호버 시 배경색이 변하는 CSS로 감각적인 티스토리 꾸미기

 

 

 

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

galam.tistory.com

티스토리 북클럽(Book Club) 스킨의 경우 기본 사이드바 카테고리 메뉴가 작동은 하지만, 가독성, 여백, hover 반응 등에서 아쉬움을 느껴 방문자 경험(UX) 개선을 고민하셨다면 이 글에 주목해 주세요.

 

단순했던 기본 카테고리 메뉴를 조금만 손봐도 훨씬 깔끔하고 세련된 스타일로 바꿀 수 있습니다.

오늘은 북클럽 스킨 사용자분들의 블로그를 한 단계 업그레이드할 수 있는 "세련된 사이드바 카테고리 꾸미기 CSS"를 소개합니다.

 

이 포스팅에서 제공하는 교체용 CSS는 기존 .sidebar .category 관련 코드를 완전히 대체하는 방식으로, 1차, 2차, 3차 카테고리를 깔끔하고 보기 좋게 정리해 줍니다.

 

방문자 UX를 확실히 개선하고 싶다면 지금 바로 적용해 보세요!

📌 알림 

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

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

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

---

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

1. 스킨 저장.

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

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

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

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

728x90

---

 

사이드바 카테고리 미리보기

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

 

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

---

 

전체 교체용 CSS 코드

아래 코드를 복사 후 기존의 .sidebar .category 관련 코드 전체와 교체하세요. (스킨 편집 → 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
========================= */

---

 

적용 방법

1. 티스토리 관리자 > 스킨 편집 > html 편집 > CSS 탭 화면을 엽니다.

---

 

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

.sidebar .category

---

 

3. 위의 전체 교체용 CSS를 그대로 붙여 넣어 코드를 교체 후 '저장'합니다.

---

 

4. 블로그에서 사이드바를 확인하고, 색상/간격을 원하면 코드 내 값을 조정합니다.

- 세부 설정은 CSS 코드 내 주석을 참고하세요.

---

 

핵심 변경 포인트

• 교체 방식: 기존 관련 CSS 전부 삭제 → 새 CSS로 교체
• 1차 디자인: 단색 배경 + 상, 하단 포인트 라인
• 2차/3차: 흰 배경 + 구분선 · 들여 쓰기 · 아이콘 표시(▸ / -)
• 호버: 부드러운 배경/글자색 전환

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
========================= */

---

 

관련글 바로가기

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

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

 

티스토리 북클럽 스킨 사이드바 카테고리의 타이틀에 배경색 넣기.

티스토리 북클럽 스킨 사이드바 카테고리의 타이틀에 배경색 넣기.

 

• https://galam.tistory.com

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받습니다"