티스토리 목차 링크 달기

 다른 사람들이 쓴 블로그 포스트를 보면 목차의 각 제목마다 밑줄이 달려있고 그 밑줄 달린 문장을 클릭하면 본문의 해당 제목으로 페이지가 이동하는 것을 보았을 것이다. 이것이 HTML에서 제공하는 '동일 문서 내에서 이동하기' 기능이다.

이번 시간에는 티스토리 목차에서 동일 문서 내로 이동하게 하는 방법과 그 실제 사용예를 알아보겠다. 또한 이번 포스트는 이 '목차 링크 달기'를 이용해서 제작해 보겠다.

 

목차

티스토리 목차 링크달기

1. 동일 문서 내에서 링크를 통해 이동하는 원리

2. 코드 확인

3. 서식으로 사용하기

 

---

티스토리 목차 링크 달기

 먼저 '서식 관리'에서 '목차 링크 달기' 란 서식을 하나 만들고 앞으로 생산하는 모든 포스트에는 이 기능을 사용해 볼 생각이다. 

 

 

 '서식 쓰기'에서 'HTML' 모드로 들어와 '목차 링크 달기'란 제목의 서식을 하나 만들어 둔다.

 

1. 동일 문서 내에서 링크를 통해 이동하는 원리

 HTML에서 링크를 다는 태그는 <a href="#*****">단어</a>이다. 이 태그 안에 있는 '#*****'를 ID로 사용해 두 번째 줄에 있는 '<h2 id="****> 단어 </h2>' 안에 있는 '단어'를 연결해 주는 것이다.  이것이 동일 문서 내에서 링크를 통해 이동하는 원리이다.

 

위에서 작성한 태그로 구현한 실제 내용이다. 파란색 링크가 있는 '대제목'을 클릭하면 아래 '대제목'으로 이동하는 것이다.

 

 

 

2. 코드 확인

 아래 코드 내용이 실제 '목차 링크 달기' 서식의 내용이다. 대제목과 그 아래 3개의 중제목을 넣었다. 중제목이 더 필요하면 아래의 형식에 맞춰 얼마든지 더 추가할 수 있다. 

 

3. 서식으로 사용하기

 이제 실제로 '목차 링크 달기' 서식을 이용해 목차 링크가 어떻게 작동하는지 알아보자. 티스토리 빈 에디터에 커서를 위치시키고 '서식'을 클릭한다.

 

 

 

서식 리스트에서 '목차 링크 달기'를 선택한다.

 

 아래와 같이 '목차 링크달기' 서식이 나타났다. 이제 여기에서부터 티스토리 포스트 작성을 시작하면 된다. 제목을 적절히 바꾸고 내용도 바꾸면서 블로그 포스트를 작성하면 되는 것이다.