티스토리 블로그 목차 만들기 (클릭시 해당 위치로 이동) 완벽 가이드

티스토리 블로그를 더욱 전문적으로 보이게 만들어주는 목차 기능을 쉽게 만드는 방법을 알려드리려고 합니다.

 

이동하는 목차 만들기

 

목차

• 1. 목차 기능의 장점
• 2. 목차 만들기 준비물
• 2. 목차 만드는 방법(단계별)
• 2. 주의 사항 및 팁
• 2. 마무리

 

1. 목차 기능의 장점

• 글의 구조를 한눈에 파악 가능
• 원하는 섹션으로 빠른 이동
• 블로그의 전문성 향상

 

2. 목차 만들기 준비물

• 목차 HTML 코드 (아래 제공)
• 작성된 블로그 글
• HTML 편집 가능한 에디터(티스토리는 자체 제공)

 

3. 목차 만드는 방법(단계별)

아래 글은 제가 실제 발행한 글인데요.

이번에 발행하면서 목차를 만들면서 코드를 넣어 봤습니다.

 

목차 클릭시 제목으로 이동

 

이런 목차를 만들어서 클릭하면 해당 제목으로 이동하게 하는 방법입니다.

 

저도 클로드 ai에 알려 달라고 했어요.

이렇게 '목차의 제목을 클릭하면 해당 글로 이동하는 코드를 알려줘'라고 질문을 했고요.

이 질문에 대한 답변으로 위와 같은 내용이 나왔고요.

우측에 해당하는 코드를 만들어 줍니다.

 

지금부터 차근 차근 단계별로 따라 해 보세요.

step 1 : 목차 코드 복사하기

 

<div class="toc">
    <div class="toc-title">목차</div>
    <ul class="toc-list">
        <li><a href="#section1">1. 첫번째 제목</a></li>
        <li><a href="#section2">2. 두번째 제목</a></li>
        <!-- 필요한 만큼 항목 추가 -->
    </ul>
</div>

 

이 코드를 드레그 해서 복사하세요.

 

step 2 : 본문 제목에 ID 추가하기

 

<h2 id="section1">첫번째 제목</h2>
<h2 id="section2">두번째 제목</h2>

 

이 코드를 드레그 해서 복사하세요.

"section 1"을 원하는 글로 변경해서 쓰면 편합니다.

 

이 두가지 코드가 제가 클로드 ai에게 질문한 "클릭시 이동하는 목차 코드"입니다.

 

지금부터 제가 실제 작성한 글에 어떻게 했는지 설명 해 드릴께요.

쉬워요.

 

먼저 블로그 글을 작성하세요.

 

이런 본문을 목차 클릭시 제목으로 이동되게 만들거에요

 

이 글을 "목차 클릭 시 해당 제목으로 이동"하는 코드로 변경 해 볼께요.

html로 들어가면 아래 처럼 나옵니다.

목차 코드 변경 전 코드들

 

이제 위에 목차 부분을 아래처럼 바꿀거에요.

저 코드는 클로드ai가 알려준 코드를 복사 한 거고요.

제목만 바꾼거에요.

코드 id를 쉽게 바꾸세요.

 

그 후 본문 내용 중 제목 코드를 변경할 거에요.

 

코드 id도 쉽게 변경 가능

 

이렇게 제목의 앞과 뒤에 코드를 바꿔주면 끝납니다.

 

변경된 목차 코드

 

바꾼 후의 전체 모습이에요.

이렇게 바꾸기만 하면 정말 끝이에요.

너무 쉽죠??

 

이제 발행하면 아래 처럼 목차가 달라져 있을거에요.

 

목차 코드 변경 후 발행 모습

 

여기까지 다라 하셨으면 이제 클릭하면 해당 제목으로 이동하는 목차 만들기는 끝났어요!!

뿌듯하죠??

 

4. 주의 사항 및 팁

HTML 모드에서 작업하기

• 티스토리 에디터에서 html 모드로 전환
• 코드를 해당 위치에 붙여넣기
• 본문 제목에 id 코드 추가

ID 작성 시 주의사항

• 영문, 숫자 사용 권장
• 공백 대신 하이픈(-) 사용
• 중복된 id 사용 금지

 

마무리

이렇게 간단한 코드 추가만으로도 전문적인 목차 기능을 구현할 수 있습니다.

처음에는 어려워 보일 수 있지만, 한 두번 해보면 금방 익숙해질것 같습니다.

 

도움이 되는 추가 팁

• 목차는 글의 길이가 긴 경우에 특히 유용해요.
• 독자들의 글 이해도를 높여줄것으로 판단되요.
• 검색엔진 최적화에도 도움이 된다고 합니다.

 

실제 발행한 글을 확인 해 보세요.

http://meritz-hoon.tistory.com/158

자궁경부 미란 냉동응고술, 질병수술비 청구 가능할까? (완벽 가이드)