블로그 글을 작성할 때 목차를 넣어야 하는 경우가 있습니다. 이럴 때 여러분은 어떻게 하시나요? 저의 경우 목차만 넣고 링크는 만들지 않지만 필요하신 분들이 있을 것 같아 방법을 설명드리도록 하겠습니다. 어렵지 않으니 따라해 보시면 도움이 되실 겁니다.
블로그스팟 목차 및 내부 링크 만들기
1. 목차의 필요성
예를 들어 3000자 분량의 글을 작성하고 3개의 단락이 있다고 가정하겠습니다. 단락 서론, 본론, 결론 나누어져 있다면 다음과 같은 형식을 것입니다.
목차 - 서론 - 본론 - 결론 1. 서론 이글을 왜 쓰는가 . . 2. 본론 이래서 이 글을 쓴다 . . 3. 결론 그래서 결론은 이렇다. |
만약 서론, 본론, 결론 섹션이 한 페이지 내에 모두 표시된다면 목차를 만들 필요가 없습니다. 그러나 각 섹션이 1000자 이상이라면 한 페이지에 모두 표시되지 않을 것입니다. 이 경우, 사용자가 직접 본론이나 결론으로 이동할 수 있도록 링크를 만들어야 합니다.
2. 목차 링크 만들기
목차 링크를 만들기 위해서는 “HTML 보기”로 전환해야 합니다. 윗 글의 HTML 코드는 아래와 같습니다.
<p>목차 만들기</p> <p><br /></p> <p>목차</p> <p>- 서론</p> <p>- 본론</p> <p>- 결론</p> <p><br /></p> <h3 style="text-align: left;">1. 서론</h3> <p>이 글을 왜 쓰는가</p> <p><br /></p> <p><br /></p> <h3 style="text-align: left;">2. 본론</h3> <p>이래서 이 글을 쓴다</p> <p><br /></p> <p><br /></p> <h3 style="text-align: left;">3. 결론</h3> <p>그래서 결론은 이렇다</p> <p><br /></p> <p><br /></p>
여기서 링크를 만들려면, 각 <h3> 태그 안에 id 속성을 추가해야 합니다. id 값은 사용자가 원하는 대로 설정할 수 있습니다.
<h3 id="link1">1. 서론</h3> <h3 id="link2">2. 본론</h3> <h3 id="link3">3. 결론</h3>
이렇게 한 후 목차 부분을 직접 <a>태그를 사용해서 id를 지정해도 되지만 html 코드를 잘 모르시는 분들에게는 어려울 수 있어 쉬운 방법으로 설명하겠습니다.
다시 “새 글 작성 보기”로 전환하고 아래와 같이 먼저 “-서론”를 마우스로 드래그 한 후 ②를 클릭하고 ③과 같이 원하는 id를 입력합니다. 여기서 중요한 것은 id 앞에 # 기호를 붙여야 한다는 점입니다. “-본론”과 “-결론”도 마찬가지 방법으로 id를 지정합니다.
위와 같이 하면 아래 그림과 같이 목차의 글자 색이 파란색으로 바뀐 것을 보실 수 있습니다.
“HTML 보기” 로 전환해서 HTML 코드를 보면 서론, 본론, 결론이 아래와 같이 <a> 태그가 붙어 있는 것을 보실 수 있고, 목차를 클릭하면 해당 글로 이동을 하게 됩니다.
<p>목차</p> <p><a href="#link1">- 서론</a></p> <p><a href="#link2">- 본론</a></p> <p><a href="#link3">- 결론</a></p>
오늘은 블로그스팟에서 목차와 링크를 만드는 방법을 알아보았습니다. 쉽게 설명하였기 때문에 어렵지 않게 이해하실 수 있으실 거라 생각합니다. 이 글이 블로그를 하시는 분들에게 이 글이 도움이 되었으면 좋겠습니다.
