블로그스팟(Blogger)에 자동 목차 만들기, 완벽 가이드
안녕하세요! 블로그스팟(Blogger)을 운영하면서 긴 글을 쓰다 보면 독자들이 원하는 정보에 빠르게 접근하도록 돕는 '목차'의 필요성을 느끼게 됩니다. 하지만 매번 목차를 수동으로 작성하는 것은 번거로운 일이죠.
이 포스팅에서는 단 한 번의 설정으로 모든 게시글에 자동으로 목차를 생성하는 방법을 알려드리겠습니다. 심지어 목차를 접었다 펼칠 수 있는 기능까지 포함하여 깔끔한 블로그를 만들 수 있습니다.
🚀 왜 자동 목차를 사용해야 할까요?
- 사용자 경험 개선 (UX): 독자들이 긴 글을 읽다가 원하는 섹션으로 바로 이동할 수 있어 편리합니다.
- SEO 최적화: 구글 검색 엔진이 페이지 구조를 더 쉽게 이해하고, 검색 결과에 목차를 노출시킬 가능성을 높여줍니다.
- 전문성 강화: 잘 정리된 목차는 글의 구조가 체계적이라는 인상을 줍니다.
💡 준비물: HTML/CSS 편집 능력? NO!
아래 코드를 복사해서 붙여넣기만 하면 됩니다. 복잡한 코딩 지식이 없어도 누구나 쉽게 따라 할 수 있습니다.
📝 Step 1: 목차 생성 및 토글 스크립트 추가하기
먼저 블로그의 HTML에 목차를 자동으로 생성하고 접었다 펼치는 기능을 추가해야 합니다.
- 블로그스팟 대시보드에서 왼쪽 메뉴 중 '테마'를 클릭합니다.
- '맞춤설정' 옆의 아래 화살표를 눌러 'HTML 편집'을 선택합니다.
- 편집기에서
</body>태그를 찾습니다. (Ctrl+F또는Cmd+F를 이용하면 쉽게 찾을 수 있습니다.) </body>태그 바로 위에 아래 스크립트 코드를 그대로 복사하여 붙여넣습니다.
JavaScript
<script>
// Function to create and insert collapsible Table of Contents
function createAndInsertCollapsibleTOC() {
var mainHeading = document.querySelector('h1.post-title.entry-title');
var subheadings = document.querySelectorAll('h2, h3, h4');
if (subheadings.length === 0) {
return;
}
var tocContainer = document.createElement('div');
tocContainer.id = 'toc-container';
tocContainer.className = 'toc-collapsible';
var tocButton = document.createElement('button');
tocButton.className = 'toc-toggle-btn';
tocButton.textContent = '목차 [펼치기]';
tocContainer.appendChild(tocButton);
var tocList = document.createElement('ul');
tocList.className = 'toc-list';
tocContainer.appendChild(tocList);
subheadings.forEach(function(heading, index) {
var linkId = 'toc-heading-' + index;
heading.setAttribute('id', linkId);
var listItem = document.createElement('li');
var link = document.createElement('a');
link.href = '#' + linkId;
link.textContent = heading.textContent;
if (heading.tagName === 'H3') {
listItem.style.fontSize = '0.9em';
listItem.style.marginLeft = '15px';
} else if (heading.tagName === 'H4') {
listItem.style.fontSize = '0.8em';
listItem.style.marginLeft = '30px';
}
listItem.appendChild(link);
tocList.appendChild(listItem);
});
if (mainHeading && mainHeading.parentNode) {
mainHeading.parentNode.insertBefore(tocContainer, mainHeading.nextSibling);
}
// Toggle functionality
tocButton.addEventListener('click', function() {
if (tocList.style.display === 'block') {
tocList.style.display = 'none';
tocButton.textContent = '목차 [펼치기]';
} else {
tocList.style.display = 'block';
tocButton.textContent = '목차 [접기]';
}
});
}
window.addEventListener('load', createAndInsertCollapsibleTOC);
</script>
오른쪽 상단의 '저장' 버튼을 클릭하여 변경 사항을 저장합니다.
📝 Step 2: 목차 스타일(CSS) 추가하기
이제 목차를 깔끔하고 보기 좋게 만들어 줄 CSS 코드를 추가할 차례입니다.
- 다시 블로그스팟 대시보드로 돌아가 '테마'를 클릭합니다.
- '맞춤설정'을 클릭합니다.
- 왼쪽 메뉴에서 **'고급'**을 선택한 후, 가장 아래에 있는 'CSS 추가'를 클릭합니다.
- 아래 CSS 코드를 그대로 복사하여 붙여넣습니다.
CSS
.toc-collapsible {
border: 1px solid #ccc;
padding: 15px;
margin: 20px 0;
background-color: #f9f9f9;
}
.toc-toggle-btn {
background: none;
border: none;
padding: 0;
font-size: 1em;
font-weight: bold;
cursor: pointer;
color: #337ab7;
text-align: left;
width: 100%;
}
.toc-toggle-btn:hover {
text-decoration: underline;
}
.toc-list {
display: none; /* 초기에는 목차를 숨김 */
list-style-type: none;
padding-left: 0;
margin-top: 10px;
}
오른쪽 하단의 '블로그에 적용' 버튼을 클릭하여 변경 사항을 저장합니다.
🎉 완성! 이제 글을 작성해 보세요
모든 설정이 끝났습니다! 이제부터는 새로운 게시글을 작성할 때 별도의 목차 코드를 넣을 필요가 없습니다.
새로운 포스팅을 작성할 때 반드시 기억해야 할 한 가지는 다음과 같습니다:
본문 내 소제목은
제목태그를 활용하여 작성해야 합니다.제목태그에는 '주요 제목(h2)', '부제목(h3)', '보조 제목(h4)' 등이 있습니다.- 블로그스팟 에디터에서 '일반' 텍스트를 클릭하면 '제목'을 선택할 수 있습니다.
- 이때
h2태그를 가장 많이 사용하고, 그 하위 내용에 대해h3,h4를 사용하면 목차가 계층적으로 잘 생성됩니다.
이제 블로그 글 제목 아래에 자동으로 접혀있는 목차가 생성된 것을 확인할 수 있습니다. '목차 [펼치기]' 버튼을 누르면 목차가 나타나고, 다시 누르면 접히는 편리한 기능을 경험해 보세요.
궁금한 점이 있다면 댓글로 남겨주세요!
0 댓글