티스토리 블로그를 운영하시면서 글을 작성할 때, 목차를 자동으로 생성하는 방법이 필요하신 분들이 많으실 것 같습니다. 목차는 독자들이 글을 쉽게 탐색할 수 있도록 도와주며, 검색엔진 최적화(SEO)에도 긍정적인 영향을 줄 수 있습니다.
이번 글에서는 티스토리에서 목차를 쉽게 만들 수 있는 방법에 대해 상세히 설명드리겠습니다.
목차의 필요성
목차는 블로그 글의 구조를 명확히 하고 독자들이 원하는 정보를 빠르게 찾을 수 있도록 돕습니다. 특히 긴 글이나 여러 주제를 다루는 글에서는 목차가 더욱 중요합니다.
목차를 통해 독자는 글의 흐름을 한눈에 파악할 수 있으며, 필요한 부분으로 직접 이동할 수 있는 편리함을 제공합니다. 또한, SEO 측면에서도 목차가 있는 글이 검색 결과에서 더 높은 순위를 차지할 수 있는 가능성이 높습니다.
목차의 장점
| 장점 | 설명 |
|---|---|
| 가독성 향상 | 글의 구조를 명확히 하여 독자가 쉽게 내용을 이해할 수 있도록 돕습니다. |
| 빠른 탐색 | 독자가 원하는 정보를 쉽게 찾을 수 있도록 하여 방문자의 경험을 개선합니다. |
| SEO 최적화 | 검색엔진이 글의 구조를 파악하기 쉽게 하여 검색 결과에서 더 높은 순위를 기대할 수 있습니다. |
| 사용자 친화적 | 특히 모바일 사용자의 경우, 목차가 제공되면 더 나은 사용자 경험을 제공합니다. |
이처럼 목차는 블로그 운영에 있어 필수적인 요소라 할 수 있습니다. 그렇다면 구체적으로 어떻게 목차를 만들 수 있는지 알아보도록 하겠습니다.
티스토리에서 목차 만들기
1. 스킨 편집하기
티스토리에서는 기본적으로 목차 기능이 제공되지 않기 때문에, HTML과 CSS를 수정하여 목차를 추가해야 합니다. 웹 브라우저에서 개발자 도구를 열어 자신의 블로그 스킨을 분석하고, 목차를 추가할 위치를 결정합니다.
- 티스토리 관리자 페이지에 로그인합니다.
- 좌측 메뉴에서 "꾸미기"를 클릭한 후 "스킨 편집"을 선택합니다.
- HTML 편집 메뉴로 이동하여
<head>태그와<body>태그를 수정합니다.
이 과정에서 HTML과 CSS를 잘 알아보고 있어야 하므로, 처음 접하는 분들은 조금 어려울 수 있습니다. 하지만 차근차근 따라가면 충분히 할 수 있습니다.
2. CSS 추가하기
목차의 디자인을 위해 CSS를 추가합니다. CSS는 목차의 스타일을 결정하므로, 사용자가 원하는 디자인으로 변경할 수 있습니다.
예를 들어, 글머리와 본문 사이에 적절한 여백을 주거나, 목차 항목의 색상을 조정할 수 있습니다.
.toc {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.toc a {
color: #007bff;
text-decoration: none;
}
.toc a:hover {
text-decoration: underline;
}위의 CSS 코드는 목차의 기본 스타일을 설정합니다. 이 스타일을 통해 목차가 보다 깔끔하게 보일 수 있도록 도와줍니다.
3. JavaScript 추가하기
목차를 자동으로 생성하기 위해 JavaScript를 사용할 수 있습니다. tocbot이라는 라이브러리를 활용하면, HTML 문서 내의 제목 요소를 기반으로 목차를 자동으로 만들어낼 수 있습니다.
이를 위해 다음과 같은 코드를 추가합니다.
<script src="path/to/tocbot.js"></script>
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.content',
headingSelector: 'h2, h3, h4',
ignoreSelector: '.ignore',
scrollSmooth: true,
});
</script>위 코드는 tocbot 라이브러리를 초기화하며, 목차의 위치와 내용을 정의합니다. headingSelector 속성을 통해 목차에 포함될 제목의 수준을 설정할 수 있습니다.
문제 해결하기
목차를 생성하는 과정에서 발생할 수 있는 문제들도 있습니다. 예를 들어, 목차가 정상적으로 표시되지 않거나, 스크롤 시 목차가 사라지는 경우가 있습니다.
이러한 문제는 CSS의 overflow 속성이나 JavaScript의 scrollIntoView 기능을 조정하여 해결할 수 있습니다.
CSS Overflow 문제
목차가 스크롤 시 보이지 않는 경우, CSS의 overflow 속성을 확인해야 합니다. 이를 통해 목차가 부모 요소의 영역을 넘어가지 않도록 조정할 수 있습니다.
| 문제 | 해결 방법 |
|---|---|
| 목차가 보이지 않음 | CSS의 overflow 속성을 visible로 설정하여 해결합니다. |
| 목차가 스크롤 시 사라짐 | JavaScript의 scrollIntoView() 메서드를 사용하여 부드럽게 스크롤합니다. |
JavaScript로 목차 자동 생성
목차를 자동으로 생성하는 과정에서, 제목 요소를 파싱하여 목차를 만드는 코드를 작성해야 합니다. 이를 위해 querySelectorAll() 메서드를 사용하여 본문 내의 제목 요소를 가져오고, 이를 기반으로 목차 HTML 요소를 생성합니다.
const headings = document.querySelectorAll('.content h2, .content h3, .content h4');
let tocHTML = '<ul>';
headings.forEach((heading, index) => {
const id = `heading-${index}`;
heading.id = id; // 각 제목에 ID 추가
tocHTML += `<li><a href="#${id}">${heading.innerText}</a></li>`;
});
tocHTML += '</ul>';
document.querySelector('.toc').innerHTML = tocHTML;위 코드는 본문에서 제목을 찾아서 자동으로 목차를 생성합니다. 각 제목에는 고유한 ID를 부여하여 목차에서 해당 제목으로 스크롤할 수 있도록 합니다.
최종 점검 및 적용
목차를 성공적으로 추가한 후에는 블로그에서 실제로 목차가 잘 작동하는지 확인해야 합니다. 작성한 글을 여러 번 검토하면서 목차의 링크가 각 제목으로 잘 이동하는지, 디자인이 원하는 대로 적용되었는지 점검합니다.
성능 향상
목차가 정상적으로 작동하는 것을 확인한 후, 추가적인 기능을 고려해볼 수 있습니다. 예를 들어, 스크롤 시 현재 위치에 따라 목차 항목에 하이라이트를 추가하거나, 특정 해상도에서만 목차를 보이도록 하는 등의 기능을 구현할 수 있습니다.
| 추가 기능 | 설명 |
|---|---|
| 하이라이트 처리 | 스크롤 시 현재 위치에 따라 목차 항목에 하이라이트를 추가합니다. |
| 반응형 디자인 | 해상도에 따라 목차의 표시 여부를 조정하여 사용자 경험을 향상시킵니다. |
이렇게 티스토리 블로그에 목차를 추가하는 방법을 알아보았습니다. 처음에는 조금 복잡하게 느껴질 수 있으나, 차근차근 따라가다 보면 쉽고 간편하게 목차를 만들 수 있습니다.
목차를 통해 독자들에게 더 나은 경험을 제공하고, 글의 품질을 높여보세요!
관련 영상
같이보면 좋은 글
바탕화면 바로가기 쉽게 만들기
```markdown바탕화면 바로가기는 인터넷 사용의 편리함을 더해주는 중요한 기능입니다. 특히 자주 방문하는 웹사이트의 바로가기를 바탕화면에 만들어 두면, 브라우저를 열지 않고도 쉽게 웹사이
myallinfomation.tistory.com
락토핏으로 실패 없는 그릭요거트 만들기
안녕하세요! 오늘은 락토핏을 활용하여 집에서 실패 없이 그릭요거트를 만드는 방법에 대해 자세히 알아보도록 하겠습니다. 그릭요거트는 건강에 좋은 프로바이오틱스가 풍부하고, 다양한 요
myallinfomation.tistory.com
육아휴직 잔여기간 쉽게 확인하는 팁
육아휴직을 이용하시는 많은 부모님들께서는 잔여기간을 확인하는 데 어려움을 겪곤 하십니다. 육아휴직은 자녀가 만 8세 이하이거나 초등학교 2학년 이하인 경우에 사용할 수 있으며, 총 12개
myallinfomation.tistory.com