티스토리·워드프레스용·블로그스팟 버튼형 목차 만들기

✅ 티스토리·워드프레스용·블로그스팟 버튼형 목차 만들기 (복사해서 바로 쓰세요)

블로그에서 눈에 잘 띄는 버튼형 목차(Button-style TOC) 를 만들고 싶으셨나요?
아래 HTML 코드만 복사해서 붙여 넣으면, 방문자에게 직관적이고 깔끔한 클릭형 목차를 제공할 수 있습니다.

---

📌 이런 분께 추천합니다

• 티스토리나 워드프레스 블로그를 운영 중이신 분
• 본문 길이가 길어 목차를 버튼처럼 보여주고 싶은 분
• 클릭 시 해당 섹션으로 이동되는 앵커 링크 기능을 적용하고 싶은 분
• 깔끔한 디자인의 버튼 스타일로 블로그 가독성을 높이고 싶은 분

---

✅ 복사해서 바로 쓰는 HTML 코드

아래 코드를 블로그 글쓰기 화면 > HTML 모드에서 붙여 넣어주세요.
폰트, 색상, 정렬, 버튼 둥글기 등은 모두 기본 스타일로 세팅되어 있습니다.

 

🧩 목차 + 버튼형 스타일 전체 코드

1. A형 타입

📌 목차

1. 사업 개요 2. 지원 대상 3. 신청 방법 4. 제출 서류 5. 유의 사항

-> 버튼을 클릭하면 해당 제목으로 이동하도록 연결되어야 하므로, 아래처럼 id 속성을 설정해주셔야 합니다.

 

1. 사업 개요(제목 수정)

정책이나 사업에 대한 개요를 작성합니다.(내용 기재)

2. 지원 대상

해당 지원을 받을 수 있는 자격요건을 설명합니다. (내용 기재)

3. 신청 방법

신청 경로, 절차, 기간 등을 안내합니다. (내용 기재)

4. 제출 서류

필요한 제출 서류 목록을 정리합니다. (내용 기재)

5. 유의 사항

중복 신청 가능 여부나 주의할 점을 안내합니다. (내용 기재)

 

 

코드 받기

 

 

2. B형 타입

📌 목차

1. 사업 개요 2. 지원 대상 3. 신청 방법 4. 제출 서류 5. 유의 사항

-> 버튼을 클릭하면 해당 제목으로 이동하도록 연결되어야 하므로, 아래처럼 id 속성을 설정해주셔야 합니다.

 

1. 사업 개요(제목 수정)

정책이나 사업에 대한 개요를 작성합니다. (내용 기재)

2. 지원 대상 

해당 지원을 받을 수 있는 자격요건을 설명합니다. (내용 기재)

3. 신청 방법

신청 경로, 절차, 기간 등을 안내합니다. (내용 기재)

4. 제출 서류

필요한 제출 서류 목록을 정리합니다. (내용 기재)

5. 유의 사항

중복 신청 가능 여부나 주의할 점을 안내합니다. (내용 기재)

 

 

코드 받기

---

🎨 커스터마이징 팁

 

항  목	수정 방법 예시
버튼 색상	background-color: #컬러코드 부분 변경
글자 색상	color: white → 원하는 색상으로 변경
둥글기	border-radius 숫자값 변경
글자 크기	font-size: 16px 추가하여 조절 가능
아이콘 추가	📌 등 이모지 자유롭게 삽입 가능

 

---

✅ 마무리 팁

• 이 버튼 목차는 모바일에서도 자동으로 줄바꿈 되며 반응형 디자인이 적용됩니다.
• 색상 톤을 블로그 스킨과 맞추면 더욱 자연스럽습니다.
• 각 항목의 href="#section1"과 id="section1"이 정확히 일치해야 이동됩니다.

---

✅ 구글 블로거에서 버튼형 목차 사용하는 방법

1. HTML 모드에서 붙여넣기

• 글쓰기 창 오른쪽 상단에 있는 연필 아이콘 또는 "HTML 보기"를 클릭하세요.
• 그 상태에서 제가 드린 HTML 코드를 그대로 붙여넣으면 버튼형 목차가 적용됩니다.

2. 본문 제목과 연결하기 (앵커 기능)

• <a href="#section1">...</a> 와 <h2 id="section1">...</h2> 구조가 동일해야 클릭 시 이동 기능이 작동합니다.
• 구글 블로거도 id 속성이 잘 작동하므로 링크 연결 문제 없이 사용 가능합니다.

3. CSS는 인라인으로 이미 포함돼 있어 문제 없음

• 제가 드린 코드는 외부 CSS 파일 없이, 각 태그에 style="..."로 직접 스타일을 지정했기 때문에 따로 스타일시트를 건드릴 필요가 없습니다.
• 구글 블로거의 무료 스킨 대부분과도 충돌 없이 작동합니다.

---

🎯 팁 : 더 깔끔하게 보이게 하려면?

• 중앙 정렬: <div style="text-align: center;">...</div>로 감싸면 버튼들이 중앙에 정렬됩니다.
• 폰트 통일: 블로그의 글꼴 스타일과 맞춰주면 더 자연스러워요.
• 이모지 or 아이콘: 📌, ✔, ➡ 등으로 가독성도 높이고 디자인도 살릴 수 있습니다.

---

✅ 결론

항   목	구글 블로그 사용 가능 여부
버튼형 목차 스타일 적용	✅ 가능 (인라인 CSS 활용)
클릭 시 이동되는 앵커 기능	✅ 가능 (id, href 사용)
모바일 반응형	✅ 가능 (flex-wrap 적용됨)