티스토리 목차 만들기, 서식을 활용하여 내부 링크로 쉽게 링크 만드는 방법
0. 내부 링크 목차의 필요성
글을 작성할 때 h2, h3, h4 등 제목 태그를 사용하여 작성하면 h 태그를 수집하여 자동으로 목차를 만드는 방법은 티스토리 toc.js 목차로 검색하면 다양한 방식의 목차 만드는 방법을 찾아볼 수 있습니다.
그러나 반응형 스킨이라면 toc.js 목차를 그대로 사용하시면 되는데, 현재 이 블로그는 모바일 버전 티스토리 스킨을 그대로 사용하고 있어서 티스토리 모바일 스킨에서는 적용되지 않기 때문에 내부 링크를 활용하는 방식에 대해서 고민해보았습니다.
티스토리 목차 만드는 방법에 대해서는 일전에 한번 작성한 적이 있는데요. 당시에는 수동으로 하나하나 링크를 걸어주는 방식이었습니다. 그래서 한동안 글을 쓰고 내부 링크를 걸어야 하는 것 때문에 태그를 신경써야 되서, 번거로워서 목차를 만들지 않고 있었습니다.
서식으로 설정하면 좀 더 쉽게 만들 수 있어서 이번 포스팅은 일전에 이어서 서식을 활용하는 방법에 대해서 작성해보려고 합니다.
id 태그로 내부 링크 만들기[링크] https://green-study.tistory.com/2981의 방법을 적용한 것이기 때문에 링크의 내용을 알고 계시다는 전제로 이 글을 작성하였습니다.
1. 서식 만들기
목차 서식 만들기는 티스토리 에디터에서 [서식]에서 만들 수 있습니다.
<b>목차</b>
＊<a href="#01">1. 목차내용</a><br>
＊<a href="#02">2. 목차내용</a><br>
＊<a href="#03">3. 목차내용</a><br>
＊<a href="#04">4. 목차내용</a><br>
위와 같이 목차 html을 미리 작성하여 서식으로 저장합니다.
목차를 넣고 싶은 곳에 위와 같이 서식을 만들어 서식으로 저장한 뒤 목차가 필요한 글 서두에 넣고 싶은 곳에 넣고 그때 그 때 수정하여 작성할 수 있습니다. div로 감싸주어 원하는 스타일로 수정하셔도 됩니다.
링크 도착 지점 태그도 서식으로 별도로 지정하였습니다.
<br>
<p id="01"><br></p>
----------
----------까지 포함한 이유는 html로 적용하면 어느 위치에 적용되었는지 확인하기 어려워서 눈에 보이게 하기 위해서입니다.
추후에 ---------- 부분만 에디터에서 글 작성할 때 삭제하고 h2, h3 등 제목 태그를 작성하는 것도 방법입니다.
<p id="01"><br></p>에서 01 부분을 02, 03, 04로 수정하여 그 때 그 때 원하는 곳에 목차를 만드는 데 활용할 수 있습니다.
2. 적용 후기
글을 작성할 때 목차가 있으면 어떤 식으로 글이 전개가 될지 예상할 수 있어서 읽는 사람에게도 좋고, 글을 쓰는 입장에서도 좀 더 짜임새 있게 글을 쓸 수 있습니다. 티스토리 블로그 글의 경우 스크롤바로 아래로 내리는 형태로 읽게 되기 때문에 원하는 곳으로 바로 링크로 따라갈 수 있는 목차가 글 서두에 목차가 있으면 유용할 것입니다.