티스토리 블로그 목차 만들기 : 클릭하면 이동하는 방법

티스토리 블로그 글 목차 만들기 및 클릭 이동 방법

블로그를 처음 시작하는 분들은 긴 글을 작성할 때 목차를 활용하면 가독성을 높일 수 있습니다.

특히, 목차 버튼을 클릭하면 해당 위치로 이동하도록 설정하면 사용자 경험이 더욱 향상됩니다.

 

이 글에서는 티스토리 블로그에서 목차를 만들고, HTML 편집을 활용하여 클릭 시 해당 섹션으로 이동하는 방법을 단계별로 설명합니다.

 

목차

• 1. 티스토리 블로그에서 목차의 필요성
• 2. 기본 목차 만들기
• 3. HTML 편집을 활용한 클릭 이동 기능 추가
• 4. 최종 코드 적용 및 테스트

 

1. 티스토리 블로그에서 목차의 필요성

긴 글을 작성하면 방문자가 원하는 정보를 찾기 어려울 수 있습니다. 목차를 활용하면

• 글의 전체적인 흐름을 한눈에 파악할 수 있음
• 원하는 내용을 빠르게 찾아 이동 가능
• 검색엔진(SEO)에도 긍정적인 영향을 줌

따라서, 블로그의 글이 길어질 경우 반드시 목차를 추가하는 것이 좋습니다.

---

2. 기본 목차 만들기

티스토리 블로그에서는 직접 목차를 만들 수 있습니다.

기본적으로 목차를 수동으로 작성하고, 나중에 HTML 편집을 통해 클릭 시 이동 기능을 추가하는 방식입니다.

 

 

목차 예시 (기본 작성)

<h2>목차</h2>
<ul>
    <li><a href="#section1">1. 티스토리 블로그에서 목차의 필요성</a></li>
    <li><a href="#section2">2. 기본 목차 만들기</a></li>
    <li><a href="#section3">3. HTML 편집을 활용한 클릭 이동 기능 추가</a></li>
    <li><a href="#section4">4. 최종 코드 적용 및 테스트</a></li>
</ul>

 

위와 같은 형식으로 작성하면 목차가 자동으로 생성됩니다.

하지만 현재 상태에서는 클릭해도 이동되지 않습니다.

다음 단계에서 HTML 편집을 통해 기능을 추가해야 합니다.

 

---

3. HTML 편집을 활용한 클릭 이동 기능 추가

티스토리 글 작성 후 HTML 편집 모드에서 각 섹션에 고유한 ID를 지정하면 목차 클릭 시 해당 섹션으로 이동할 수 있습니다.

 HTML 편집 모드로 이동하기

1. 티스토리 글 작성이 끝난 후, HTML 편집 모드로 들어갑니다.
2. 각 제목 태그(<h2>, <h3> 등)에 ID 값을 추가합니다.

 각 섹션에 ID 추가하기

<h2 id="section1">1. 티스토리 블로그에서 목차의 필요성</h2>
<p>긴 글을 작성하면 방문자가 원하는 정보를 찾기 어려울 수 있습니다...</p>

<h2 id="section2">2. 기본 목차 만들기</h2>
<p>티스토리 블로그에서는 직접 목차를 만들 수 있습니다...</p>

<h2 id="section3">3. HTML 편집을 활용한 클릭 이동 기능 추가</h2>
<p>티스토리 글 작성 후 HTML 편집 모드에서...</p>

<h2 id="section4">4. 최종 코드 적용 및 테스트</h2>
<p>이제 목차가 정상적으로 작동하는지 확인해야 합니다...</p>

위와 같이 <h2> 태그에 id 속성을 추가하면, 목차의 링크와 연결되어 클릭 시 해당 위치로 이동하게 됩니다.

 

---

4. 최종 코드 적용 및 테스트

이제 목차와 HTML 편집에서 ID 지정이 완료되었으므로, 정상적으로 작동하는지 확인해야 합니다.

 

테스트 방법

1. 글을 저장한 후 미리보기를 클릭합니다.
2. 목차의 각 항목을 클릭하여 해당 섹션으로 이동하는지 확인합니다.
3. 정상적으로 이동하면 완료!

주의 사항

• ID 값은 반드시 고유해야 함 (중복 사용 시 정상 동작 안 함)
• <a href="#id값"> 형식으로 설정해야 정상 작동
• 브라우저에서 캐시 문제로 반영되지 않을 경우, 새로고침 후 다시 확인

 

이제 티스토리 블로그에서 목차를 만들고, 클릭 시 이동하는 기능을 적용하는 방법을 익혔습니다. 이 기능을 활용하면 방문자가 원하는 정보를 빠르게 찾을 수 있어 가독성 및 SEO 최적화에도 도움이 됩니다.

앞으로 블로그 글을 작성할 때 적극적으로 활용해 보세요!