티스토리 목차 쉽게 만들기

티스토리 블로그에서 글을 작성할 때, 긴 글의 경우 독자가 내용을 쉽게 파악할 수 있도록 목차를 제공하는 것이 매우 유용합니다. 이 글에서는 티스토리에서 자동으로 목차를 생성하는 방법에 대해 자세히 설명드리겠습니다.

이를 통해 독자들은 원하는 내용을 보다 쉽게 찾을 수 있으며, 블로그의 전반적인 사용자 경험이 향상될 것입니다.

—

목차의 필요성

목차는 블로그 글의 구조를 명확하게 제시하는 도구입니다. 긴 글을 읽는 독자에게는 목차가 길잡이 역할을 하여, 원하는 정보로 빠르게 이동할 수 있도록 도와줍니다.

예를 들어, 요리 레시피나 여행 후기와 같은 긴 글에서는 목차가 특히 필요합니다. 목차를 통해 독자는 각 섹션의 제목을 한눈에 확인하고, 자신의 관심사에 맞는 내용을 쉽게 찾아볼 수 있습니다.

목차는 또한 블로그의 전문성을 높이는 데 기여합니다. 체계적인 글의 구성은 독자에게 신뢰를 주며, 블로그의 품질을 높이는 요소로 작용합니다.

이러한 이유로, 많은 블로거들이 목차를 추가하는 것을 선호하게 됩니다.

목차의 필요성	설명
길잡이 역할	독자가 원하는 내용을 쉽게 찾을 수 있게 도와줍니다.
전문성 향상	체계적인 구성은 블로그의 신뢰도를 높입니다.
사용자 경험 개선	독자가 정보를 빠르게 파악할 수 있도록 해줍니다.

티스토리에서 목차 만들기

티스토리에서 목차를 생성하기 위해서는 HTML과 CSS 코드를 수정해야 합니다. 이를 위해서는 먼저 블로그 관리 페이지로 이동하여 ‘스킨 편집’ 메뉴를 선택한 후 ‘HTML 편집’으로 들어가야 합니다.

여기서 필요한 코드를 추가할 수 있습니다. 먼저 목차를 생성하기 위해 사용할 라이브러리인 ‘Tocbot’을 소개하겠습니다.

이 라이브러리는 HTML 문서 내의 헤딩을 기반으로 목차를 자동으로 생성해주는 도구입니다. 이를 통해 블로그 글에서 필요한 목차를 손쉽게 만들 수 있습니다.

사용 방법은 다음과 같습니다.

Tocbot 라이브러리 추가: <head> 태그 안에 다음 코드를 추가합니다.

“`html

“`

목차 삽입 위치 지정: 목차를 표시할 위치에 <div class="toc"></div> 태그를 추가합니다. 이 태그는 목차가 생성될 영역입니다.
JavaScript 코드 추가: <body> 태그의 끝부분, 즉 </body> 바로 위에 다음 JavaScript 코드를 추가합니다.

javascript tocbot.init({ tocSelector: '.toc', contentSelector: '.content', headingSelector: 'h1, h2, h3, h4', ignoreSelector: '.another_category_heading', collapseDepth: 2, });

위의 코드는 목차를 생성하기 위한 기본적인 설정입니다. tocSelector는 목차가 삽입될 영역을, contentSelector는 목차를 생성할 콘텐츠 영역을 지정합니다.

headingSelector는 목차에 포함할 헤딩의 종류를 정의합니다.

코드 구성 요소	설명
tocSelector	목차가 삽입될 위치를 지정합니다.
contentSelector	목차를 생성할 콘텐츠 영역을 설정합니다.
headingSelector	목차에 포함할 헤딩의 종류를 설정합니다.
ignoreSelector	목차에서 제외할 요소를 정의합니다.

다른 내용도 보러가기 #1

CSS 스타일링 추가하기

목차를 삽입한 후, CSS를 통해 목차의 스타일을 지정할 수 있습니다. CSS를 통해 목차의 디자인을 수정하면, 블로그의 전반적인 레이아웃과 조화를 이루게 할 수 있습니다.

예를 들어, 목차의 배경색, 글자색, 여백 등을 조정하여 블로그의 분위기에 맞출 수 있습니다. 다음은 목차에 대한 기본적인 CSS 스타일을 추가하는 방법입니다.

“`css
.toc {
position: fixed;
top: 100px;
right: 30px;
width: 250px;
max-height: 80vh;
overflow-y: auto;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1440px) {
.toc {
display: none;
}
}
“`

위의 CSS 코드는 목차의 위치와 크기를 조정하며, 스크롤이 가능하도록 설정하여 내용이 길어질 경우에도 모든 항목을 표시할 수 있게 합니다. 또한, 화면의 크기가 1440px 이하일 경우 목차를 숨기도록 설정하여 모바일 환경에서도 깔끔한 레이아웃을 유지합니다.

CSS 스타일링 요소	설명
position	목차의 위치를 고정합니다.
max-height	목차의 최대 높이를 설정합니다.
overflow-y	내용이 길어질 때 스크롤을 가능하게 합니다.
media query	화면 크기에 따라 목차의 표시 여부를 조정합니다.

목차의 최적화 및 유지 관리

목차를 설정한 후에는 이를 최적화하고 지속적으로 유지 관리하는 것이 필요합니다. 블로그의 내용이 업데이트되거나 새로운 글이 추가될 때마다 목차가 올바르게 작동하는지 확인해야 합니다.

또한, 목차의 디자인과 사용자 경험을 주기적으로 점검하여 개선할 부분이 없는지 확인하는 것이 좋습니다. 목차의 최적화에는 다음과 같은 방법이 있습니다.

정기적인 점검: 블로그의 내용이 변경되면 목차도 함께 업데이트해야 합니다. 새로운 섹션이 추가되거나 기존의 섹션 제목이 변경될 경우, 목차가 올바르게 반영되지 않을 수 있습니다.
사용자 피드백 수집: 독자들에게 목차의 유용성에 대한 피드백을 요청하여 개선할 점을 찾아내는 것이 필요합니다. 독자가 어떤 부분에서 불편함을 느끼는지 파악하여 목차를 보다 유용하게 만들 수 있습니다.
디자인 업데이트: 디자인 트렌드는 시간이 지남에 따라 변화합니다. 블로그의 전체적인 디자인에 맞추어 목차의 스타일을 주기적으로 업데이트하여, 항상 최신의 상태를 유지하는 것이 좋습니다.

유지 관리 요소	설명
정기적인 점검	블로그 내용 업데이트 시 목차 확인
사용자 피드백	독자의 의견 수렴 및 개선
디자인 업데이트	트렌드에 맞춘 스타일 변경