[Portfolio 스킨] 29. 티스토리 블로그 자동 목차를 더 예쁘게! (2탄: CSS 디자인 편)

 

🚀 목차 디자인을 내 블로그 스타일에 맞게 바꾸자!

 

드디어 내가 원하는 방식으로 작동하는 자동 목차 기능을 HTML과 JavaScript로 구현해 냈다.

그런데 글자 크기나 색상, 여백 같은 게 내 블로그 스타일에는 맞지 않다.

그래서 이번 2탄에서는 CSS로 깔끔하고 예쁘게 내 취향에 맞게 다듬을 거다.

여백 조정부터 색상 스타일링, 애니메이션 효과까지!

 

💡 아직 1탄을 안 봤다면?

자동 목차 기능은 HTML과 JavaScript로 먼저 구현해야 CSS를 적용할 수 있어요.

이 글에서는 CSS로 자동 목차를 꾸미는 방법을 다루고 있습니다.

먼저 1탄을 보고 온 뒤에 2탄을 봐주세요💛

[Info🔍/HTML&CSS] - [Portfolio 스킨] 25. 자동 목차로 블로그 가독성 200% 업! (HTML/JavaScript 편)

 

전체 코드가 필요하신 분은 둉이님 블로그를 참고해주세요.

 

 

 

🔧 포트폴리오 스킨 수정하기

✔ 티스토리 스킨을 편집하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → CSS 화면으로 들어가면 된다.

코드 수정이 끝났다면 적용을 누른다.

 

 

📝 자동목차 CSS 설명

1️⃣ 목차 전체

📌 적용 위치

 

📌 코드 설명

.toc {
  border: 1px solid #eee;   
  font-size: 15px;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 10%);
  margin: 10px 0 60px 0;
  border-radius: 10px;
  background-color: #fef2f7;
}

✔ font-size: 15px; → 글자 크기 15px.

✔ margin: 10px 0 60px 0; → 목차 박스의 바깥 여백 설정 (위 10px, 오른쪽 0px, 아래 60px, 왼쪽 0px).

✔ border: 1px solid #eee; → 테두리 두께 1px, 실선, 연한 회색(#eee).

✔ border-radius: 10px; → 테두리 모서리를 10px만큼 둥글게.

✔ background-color: #fef2f7; → 배경색은 연한 핑크색(#fef2f7).

✔ box-shadow: 3px 3px 10px rgb(0 0 0 / 10%); → 목차 박스에 오른쪽 방향 3px, 아래쪽 방향 3px, 흐림 정도 10px, 검정 그림자 투명도 10%로 설정.

 

 

2️⃣ 목차 헤더

📌 적용 위치

 

📌 코드 설명

(1) 목차 헤더 부분

.toc .toc-header {
  display: flex;
  padding: 12px;
  align-items: center;
}

✔ display: flex; → 가로 정렬이 가능하게 함.

✔ padding: 12px; → 내부 여백 12px.

✔ align-items: center; → 세로 중앙 정렬.

 

(2) 목차 아이콘 부분

.toc .toc-header .toc-icon {
  margin: -2px 10px 0px 0px;
}

✔ margin: -2px 10px 0px 0px; → 바깥 여백 설정 (위 -2px, 오른쪽 10px, 아래 0px, 왼쪽 0px).

 

 

3️⃣ 목차 내부 내용

📌 적용 위치

 

📌 코드 설명

(1) 본문 목차 내용이 보이는 부분

.toc .toc-body {
  margin: 0 40px 0 0;
  padding: 1px 5px 2px 3px;
  transition: all 0.2s ease-in-out;
}

✔ margin: 0 40px 0 0; → 내용 바깥 여백 설정 (위 0, 오른쪽 40px, 아래 0, 왼쪽 0).

✔ padding: 5px; → 내용 안쪽 여백 설정 (위 2px, 오른쪽 5px, 아래 2px, 왼쪽 3px).

✔ transition: all 0.2s ease-in-out; → 목차가 열리고 닫힐 때 0.2초 동안 부드럽게 전환하는 효과.

 

(2) 목차를 닫았을 때(.toc.on 상태일 때)

.toc.on .toc-body {
  display: none;
}

✔ display: none; → 목차 내용을 완전히 숨김.

 

(3) 오른쪽 목차 내용이 보이는 부분

.toc-right .toc-body {
  max-height: 400px;
  overflow: auto;
  padding: 0 10px 0 0;
}

✔ max-height: 400px; → 오른쪽 목차의 최대 높이 400px.

✔ overflow: auto; → 오른쪽 목차의 내용이 400px보다 길어서 넘칠 경우 자동으로 스크롤 표시.

✔ padding: 0 10px 0 0; → 오른쪽 목차의 안쪽 여백 설정 (위 0, 오른쪽 10px, 아래 0, 왼쪽 0).

 

 

반응형

4️⃣ 목차 리스트

📌 적용 위치

 

📌 코드 설명

(1) 목차 리스트 기본

.toc.on .toc-list {
  height: auto;
  padding: 10px;
  margin: 10px;
}

✔ height: auto; → 목차 높이를 자동 조절 ✔ padding: 5px; → 목차 리스트의 안쪽 여백 추가.

✔ margin: 5px; → 목차 리스트의 바깥 여백 추가.

 

🗒 높이를 자동으로 조절해서 모든 항복을 보이게 만든다.

 

(2) 목차 리스트 항목

.toc-list li {
  list-style: none;
}

✔ list-style: auto; → 목차 항목 앞에 붙는 숫자 자동 지정.

 

🗒 none으로 바꾸면 목차 항목 앞에 붙는 숫자나 기호를 제거할 수 있다.

 

(3) 목차 리스트 항목의 링크 스타일

.toc .toc-list li a {
  display: block;
  padding: 5px 0px;
  font-size: 14px;
  color: #333 !important; 
}

✔ display: block; → 링크를 블록 요소로 만들어 클릭 영역을 넓힘.

✔ padding: 5px 0px; → 목차 리스트 항목의 안쪽 여백 설정 (위 아래 5px, 오른쪽 왼쪽 0).

✔ font-size: 14px; → 글자 크기 14px.

✔ color: #333; → 글자 색상은 짙은 회색(#333).

 

(4) 목차 리스트 항목의 hover 효과

.toc .toc-list li a:hover {
  color: #FF90BC !important;
  opacity: 1;
}

✔ color: #FF90BC; → 목차 리스트 항목에 마우스를 올리면 더 진한 핑크(#FF90BC)로 변경.

✔ opacity: 1; → 완전 불투명.

 

(5) 목차 리스트 항목 앞 번호 스타일

.toc .toc-list li a::before {
  margin-right: 10px;
}

✔ margin-right: 10px; → 숫자와 글자 사이 간격 10px.

 

(6) 목차 리스트 항목 자동 번호 생성 (제일 큰 제목)

.toc .toc-list li[data-tag="0"] {
  counter-increment: tag0;
  counter-reset: tag1;
}

.toc .toc-list li[data-tag="0"] a::before {
  content: counter(tag0);
}

✔ counter-increment: tag0; → 제일 큰 제목(tag0)의 숫자를 자동으로 증가시켜서 1, 2, 3... 순으로 자동 번호 생성.

✔ counter-reset: tag1; → 두번째로 큰 제목(tag1)의 숫자가 1부터 시작하도록 리셋.

✔ a::before → 목차 링크 앞에 자동으로 tag0 번호 표시.

 

(7) 목차 리스트 항목 자동 번호 생성 (두번째로 큰 제목)

.toc .toc-list li[data-tag="1"] {
  counter-increment: tag1;
  counter-reset: tag2;
}

.toc .toc-list li[data-tag="1"] a {
  padding-left: 32px;
}

.toc .toc-list li[data-tag="1"] a::before {
  content: counter(tag0)'.'counter(tag1);
}

✔ counter-increment: tag1; → 두번째로 큰 제목(tag1)의 자동으로 숫자를 증가시켜서 1, 2, 3... 순으로 자동 번호 생성.

✔ counter-reset: tag2; → 세번째로 큰 제목(tag2)의 숫자가 1부터 시작하도록 리셋.

✔ padding-left: 32px; → 들여쓰기(32px)로 목차의 구조를 구분.

✔ a::before → 목차 링크 앞에 자동으로 tag0.tag1 번호 표시. 즉 1.1, 1.2, 1.3... 형식.

 

(8) 목차 리스트 항목 자동 번호 생성 (세번째로 큰 제목)

.toc .toc-list li[data-tag="2"] a {
  padding-left: 48px;
}

.toc .toc-list li[data-tag="2"] a::before {
  content: '-';
}

✔ padding-left: 48px; → 들여쓰기(42px)로 목차의 구조를 구분.

✔ content: '-'; → 목차 링크 앞에 자동으로 - 기호 표시.

 

 

5️⃣ 토글 버튼

📌 적용 위치

 

📌 코드 설명

(1) 본문 목차와 오른쪽 목차를 여닫는 버튼

.center-toggle-btn {
  cursor: pointer;
  transition: transform .2s;
  background-color: transparent;
  border: transparent;
  display: flex; 
  justify-content: center; 
  align-items: center;
  width: 30px; 
  height: 30px;
  margin-left: auto;
}

.right-toggle-btn {
  cursor: pointer;
  transition: transform .2s;
  background-color: transparent;
  border: transparent;
  display: flex; 
  justify-content: center; 
  align-items: center;
  width: 30px; 
  height: 30px;
  position: fixed;
  right: 0;
  top: 40px;
}

✔ cursor: pointer; → 마우스를 올리면 클릭할 수 있도록 손가락 모양 커서로 변경.

✔ transition: transform .2s; → 버튼이 눌릴 때 0.2초 동안 부드럽게 회전(transform)하는 효과.

✔ background-color: transparent; → 배경 투명.

✔ border: transparent; → 테두리 투명.

✔ display: flex; justify-content: center; align-items: center; → 가운데 정렬.

✔ width: 30px; height: 30px; → 버튼 크기 (너비 30px, 높이 30).

✔ margin-left: auto; → 왼쪽 마진을 자동으로 설정 (버튼을 오른쪽 끝으로 정렬).

✔ position: fixed; 스크롤을 내려도 계속 같은 위치에 고정.

✔ right: 0; top: 40px; → 고정 위치는 오른쪽 끝, 위에서 40px 떨어진 위치.

 

(2) 본문 목차 버튼과 오른쪽 목차 버튼을 눌렀을 때

.right-toggle-btn.rotated,
.toc.on .center-toggle-btn {
  transform: rotate(180deg);
}

✔ transform: rotate(180deg); → 180도 회전.

 

 

6️⃣ 오른쪽 목차

📌 적용 위치

 

📌 코드 설명

(1) 스크롤할 때 따라다니는 오른쪽 고정 목차

.toc-right {
  position: fixed;
  width: 250px;
  top: 70px;
  right: -250px;
  transition: right .2s;
  z-index: 10;
}

✔ position: fixed; → 스크롤을 내려도 계속 같은 위치에 고정.

✔ width: 250px; → 너비 250px.

✔ top: 70px; → 위에서 70px 떨어진 위치.

✔ right: -250px; → 오른쪽 -250px (화면 오른쪽 바깥에 위치) ✔ transition: right .2s; → right 속성이 0.2초 동안 부드럽게 변경.

✔ z-index: 10; → 다른 요소들보다 위에 위치.

 

(2) 오른쪽 고정 목차 활성화 시

.toc-right.on {
  transform: translateX(-100%);
}

✔ transform: translateX(-100%); → 화면 안쪽으로 슬라이드해서 나타남.

 

🗒 기본적으로 right -250px에 숨겨져 있다가, on이 되면 화면 안(-250px × -100% → 250px)으로 이동함.

 

(3) 반응형 디자인 : 화면 너비가 1300px 이하일 때, 오른쪽 목차의 스타일

@media screen and (max-width: 1300px) {
  .toc-right {
    background-color: #fff8;
    backdrop-filter: blur(2px);
    box-shadow: 0 3px 10px 3px rgb(0 0 0 / 20%);
  }

}

✔ background-color: #fff8; → 배경색 흰색(#fff) + 투명도(8%).

✔ backdrop-filter: blur(2px); → 배경을 2px 정도 흐릿하게(Blur 효과).

✔ box-shadow: 0 3px 10px 3px rgb(0 0 0 / 20%); → 오른쪽 목차 박스에 오른쪽 방향 0, 아래쪽 방향 3px, 퍼짐 정도 10px, 흐림 정도 3px, 검정 그림자 투명도 20%로 설정.

 

 

728x90

7️⃣ 오른쪽 목차 스크롤바

📌 적용 위치

 

📌 코드 설명

(1) 스크롤바 너비

.toc-right .toc-body::-webkit-scrollbar {
	width: 10px; 
}

✔ ::-webkit-scrollbar → Chrome, Edge, Safari 같은 웹킷 기반 브라우저에서 스크롤바를 커스텀할 때 사용.

✔ width: 10px; → 스크롤바의 너비를 10px로 설정.

 

(2) 스크롤바 핸들(손잡이) : 마우스로 잡아서 위아래로 움직이는 부분!

.toc-right .toc-body::-webkit-scrollbar-thumb {
	background: #FFC0D9;
  border-radius: 12px; 
  min-height: 30px;
}

✔ background: #FFC0D9; → 스크롤바 색상은 연한 핑크색(#FFC0D9).

✔ border-radius: 12px; → 스크롤바 모서리를 12px 만큼 둥글게.

✔ min-height: 30px; → 스크롤바 손잡이의 최소 높이 30px

 

🗒 목차의 내용이 길어져서 손잡이의 높이가 너무 작아지지 않도록 최소 높이를 설정했다.

 

(3) 스크롤바 핸들의 hover 효과

.toc-right .toc-body::-webkit-scrollbar-thumb:hover {
	background-color:#FF90BC;
}

✔ background-color: #FF90BC; → 스크롤바 핸들에 마우스를 올리면 색상이 더 진한 핑크(#FF90BC)로 변경.

 

(4) 스크롤바 트랙(배경)

.toc-right .toc-body::-webkit-scrollbar-track {
	background: transparent;
}

✔ background: transparent; → 배경 투명, 즉 스크롤바 트랙이 움직이는 배경을 제거해 스크롤바만 보이게 만든다.

 

(5) 스크롤바 코너

.toc-right .toc-body::-webkit-scrollbar-corner {
	display: none;
}

✔ display: none; → 가로/세로 스크롤이 동시에 있을 때 생기는 코너 부분(오른쪽 아래 모서리)을 숨긴다.

 

 

📍 참고

본문 목차의 스크롤도 만들고 싶다면 목차에 max-height와 overflow를 설정한 후 스크롤바 스타일을 추가한다.

 

 

8️⃣ 오른쪽 목차 항목의 링크(a 태그) 스타일

📌적용 위치

 

📌 코드 설명

(1) 기본 항목 스타일

.toc-right .toc-list li a {
  font-size: 12px;
  color: #333 !important; 
  text-decoration: none !important;
}

✔ font-size: 12px; → 글자 크기 12px.

✔ color: #333 !important; → 글자 색상은 어두운 회색(#333).

✔ text-decoration: none !important; → 밑줄 없음.

 

(2) 항목의 hover 효과

.toc-right .toc-list li a:hover{
  color: #FF90BC !important;
  opacity: 1;
}

✔ color: #FF90BC !important; → 오른쪽 목차의 항목에 마우스를 올리면 연핑크(#FF90BC)로 변경.

✔ opacity: 1; → 완전 불투명. (혹시라도 투명도가 낮아질 경우 대비).

 

🗒 목차의 항목 위에 마우스를 올리면 색상이 바뀐다.

 

(3) 현재 보고 있는 목차 항목 활성화

.toc-right .toc-list li a.active {
  font-size: 15px;
  border-left: 4px solid #FFC0D9;
  padding-left: 8px;
  color: #FFC0D9 !important;
  transition: all 0.3s ease-in-out; 
}

✔ font-size: 15px; → 현재 활성화된 항목의 글자 크기는 15px.

✔ border-left: 4px solid #FFC0D9; → 항목 왼쪽에 4px 두께의 연핑크(#FFC0D9) 테두리 추가.

✔ padding-left: 8px; → 왼쪽 여백 8px.

✔ color: #FFC0D9 !important; → 활성화된 항목의 글자 색상을 연핑크(#FFC0D9)로 변경.

✔ transition: all 0.3s ease-in-out; → 글자가 활성화될 때 0.3초 동안 부드럽게 색상과 크기가 변하는 효과.

 

🗒 현재 활성화된 항목에 왼쪽 테두리를 추가하고 글자 크기와 색상을 바꿔서 강조하는 느낌을 준다.

 

(4) 활성화된 항목에 hover 효과

.toc-right .toc-list li a.active:hover{
  color: #FF90BC !important;
  border-left-color: #FFC0D9;
  opacity: 1;
}

✔ color: #FF90BC !important; → 활성화된 항목에 마우스를 올리면 더 진한 핑크(#FF90BC)로 변경.

✔ border-left-color: #FFC0D9; → 왼쪽 테두리의 색상은 연핑크(#FFC0D9)로 그대로 유지.

✔ opacity: 1; → 완전 불투명.

 

 

👀 적용 모습

🔹 PC버전

 

🔹 모바일 버전