티스토리에서 글 작성 시 목차에 링크를 적용하는 방법 깔끔 정리!

여러 주제로 포스팅을 해오고 있지만 목차를 활용할 일이 없었는데 최근 애플의 WWDC21에 대한 내용을 정리하고 보니 내용이 방대해서 목차와 링크의 필요성을 느꼈습니다. 하나의 포스팅 내 내용이 많은 경우 목차로 정리하면 독자가 관심 있는 내용을 쉽게 찾아볼 수 있을 뿐 아니라, 전체적인 글의 흐름을 사전에 파악할 수 있다는 점에서 가독성을 개선하는 효과가 있습니다.

 

지금부터 본문에 작성한 목차에 링크를 적용해서 목차를 클릭하였을 때 해당 본문 위치로 이동할 수 있도록 설정하는 방법에 대해 차근차근 자세히 공유드리겠습니다.

---

[SAMPLE]

목차

1. 깔끔하게 글을 정리하는 방법

2. 목차를 적용한 사례

 

본문

깔끔하게 글을 작성하는 방법

포스팅 당 하나의 주제를 다루는 것이 좋습니다. 그리고 만약 내용이 많다면 목차를 제공하고 문단을 잘 나누는 것이 중요합니다. 많은 내용을 줄글로 작성한다면 작성자도 내용의 흐름을 파악하기 어려울뿐더러, 처음 글을 읽는 독자는 방대한 텍스트에 포스팅을 보자마자 지쳐버릴 수도 있습니다. 따라서 처음 읽는 사람이 읽기 편하도록 포스팅을 구성해야 합니다.

 

목차를 적용한 사례

애플 WWDC21에 대한 내용을 작성한 포스팅의 하이퍼링크를 아래에 첨부하였습니다. 링크를 클릭하여 참고하시기 바랍니다. 해당 포스팅에서는 목차와 본문을 구분하고 목차에 하이퍼링크를 적용하여 항목 클릭 시 해당 위치로 이동할 수 있습니다. 이를 통해 독자는 방대한 본문 내용 중 관심이 있는 내용을 빠르게 찾아볼 수 있습니다.

 

< 2021.06.08 - [유용한 정보와 꿀팁] - Apple의 WWDC21 내용 정리 완전판! (feat. 개인적인 소감) >

---

[적용 방법]

1. 위 [SAMPLE]과 같이 포스팅에 목차와 본문을 작성합니다.

 

2. 에디터 우측 상단의 [기본 모드] 버튼을 클릭한 후 드롭박스가 펼쳐지면 [HTML]을 클릭합니다.

 

3. 코드 중 내가 입력한 텍스트를 기준으로 검색하여 목차가 위치한 부분을 찾습니다.

• HTML 작성 화면에서 'Ctrl + F'를 클릭하면 브라우저 상단에 검색창이 열립니다. 검색창에 찾고자 하는 내용을 입력하면 동일한 내용에 음영이 생기고 엔터 클릭 시 순서대로 위치를 찾을 수 있습니다.

 

4. 링크를 적용할 텍스트 앞에는 <a href="#고유값"> 뒤에는 </a>를 입력합니다.

• <a> 태그 안에 입력된 텍스트에 링크를 적용하는 작업입니다.
• '고유값' 위치에는 '중복되지 않는 고유한 값'을 지정해주시면 됩니다. (ex. 1번, 2번) 목차가 많은 경우 헷갈릴 수 있으므로 쉽게 파악할 수 있도록 목차 순서대로 이름을 지정합니다. 저는 <a href="index1">와 같이 입력하였습니다.

 

5. '4번' 단계에서 링크를 적용한 텍스트를 클릭했을 때 이동할 위치의 텍스트를 찾습니다.

• 3번 방법과 마찬가지로 'Ctrl + F'를 클릭하여 내용을 검색하면 쉽게 위치를 찾을 수 있습니다.

 

6. 이동할 위치의 텍스트의 앞에 있는 <h> 태그 또는 <p> 태그 안에  id="고유값" 을 입력합니다.

• <h> 태그 또는 <p> 태그가 나오는 기준은 글 작성 시 문단 모양을 '제목'으로 했으면 <h>가 나오고, '본문'으로 했으면 <p>가 나오는 것입니다.
• 이미 작성되어있는 태그 안에 id값만 추가하는 것이므로 </h>, </p>를 작성하여 태그를 닫을 필요는 없습니다.

 

 

7. 작성 화면 우측 하단 '완료'를 클릭하여 저장합니다.

 

[유의사항]

• 4번, 6번 단계에서 입력해야 하는 링크 별 고유값은 절대 중복되면 안 됩니다.
• HTML 에디터에서 링크를 적용하여 저장한 다음, 다시 일반 에디터로 수정하면 링크가 해제될 수 있으므로 맞춤법 검사를 포함한 모든 작성을 마친 후에 링크를 적용하시기 바랍니다. (일반 에디터에서 저장 시 HTML 에디터에서 직접 설정한 소스가 수정됩니다.)

---

여기까지 목차에 링크를 적용하여 목차 클릭 시 해당 본문 위치로 이동할 수 있도록 구현하는 방법에 대해 상세하게 정리해보았습니다. 매력적인 블로그를 만드는데 도움이 되셨길 바랍니다.

 

감사합니다. ;)