목차 만드는 법 티스토리 내부링크 만들기
가독성 있게 좀 더 구조적으로 글을 쓰는데 있어서 글의 목차를 만드는 것이 읽는 사람에게 도움이 됩니다. 큰 틀의 글 구조를 파악해서 예상하여 읽을 수 있기도 하고 글을 쓰는 입장에서도 다른 길로 새지 않고 글을 작성할 수 있어 전달력이 높아집니다.
블로그 글처럼 온라인 상의 글은 페이지로 넘기는 것보다 스크롤바로 글을 내리거나 올려서 읽게 되는데요. 목차를 만들어둔다면, 필요한 부분으로 바로 이동할 수 있어서 편리한 부분이 있습니다. 간단하게 목차 만드는 법을 정리해보려고 합니다.
티스토리 내부링크를 이용하여 한 페이지 내에서 목차를 만드는 방법
한 페이지 글에서 목차를 선택하여 글을 이동하는 방식은 나무위키같이 긴 글의 사이트에서 찾아볼 수 있습니다. 보다 읽기 편하게 되어있는데요. 비슷한 기능을 티스토리에도 적용할 수 있습니다.
티스토리 블로그 글을 작성하실 때 html 모드에서 태그를 넣어서 목차를 만들 수 있습니다. 내부링크를 만드는 방법은 2가지가 있습니다. 그 중에서도 id 태그를 이용한 내부 링크 만드는 방법을 포스팅하였습니다.
내부링크로 목차 만드는 방법
하나는 링크 태그인 <a href="">에 id 속성을 설정하는 방법이고,
또 다른 방법은 name 태그를 이용하는 방법입니다. 이번 포스팅에서는 id 속성을 이용한 방법을 활용하였습니다.
id 속성 부여로 링크 거는 방법
<a href="#이동할위치id이름">목차 (클릭하세요)</a>
<p id="이동할위치id이름">목차 이동한 곳</p>
id 태그는 <p></p> 태그 뿐 아니라, h1, h2, h3, h4 태그, span 태그 등 html문서 body에서 사용되는 대부분의 태그에 id 속성을 부여하여 이동하는 장소로 링크를 걸 수 있습니다.
<p id="이동할위치id이름">목차 이동한 곳</p>
=>
<h3 id="이동할위치id이름">목차 이동한 곳</h3>
이런 식으로 p태그, h1, h2, h3, h4, span 태그에 id를 설정하여 사용하는 것이 가능합니다.
※id이름 주의할점
id는 영문, 숫자, 하이픈, 밑줄, 콜론, 점으로만 사용이 가능하기 때문에
예시로 든 #이동할위치는 영어나 숫자 등으로 변경해주셔야 합니다.
id를 설정할 때 주의할 점(#이동할위치)는 영어나 숫자로 작성하는 것이 좋습니다. id는 하나의 문서에서 중복되지 않고 하나만 존재해야하기 때문에 id 이름을 변경하면서 사용하는 것을 유의하여 사용하시면 됩니다.
id 이름을 contents로 작성할 예정이라면
contents_1, contents_2 이런식으로 작성하면 중복을 피할 수 있습니다.
해당 포스팅에서 사용된 html을 예시로 들면 다음과 같습니다.
<p><a href="#contents_1">1. 목차 만드는 방법</a></p>
<p><a href="#contents_2">2. 티스토리에서 손쉬운 html 적용 방법 적용 예시</a></p>
위의 링크로 목차를 만들어서 클릭하여
<h4 id="contents_1">id 속성 부여로 링크 거는 방법</h4>
<p id="contents_2">해당 포스팅에서 사용된 html을 에시로 들면 다음과 같습니다.</p>
두 곳으로 이동하게 만들었습니다.
간단하게 내부링크을 이용하여 목차 만드는 방법에 대해서 정리해보았는데요. 도움이 되셨길 바랍니다.