스킨 편집 없이 5분만에 티스토리 목차 만들기
오늘 공유드릴 내용은 자바스크립트 추가로 인한 스킨편집 없이 5분만에 티스토리 포스팅 내에 목차를 생성하는 방법 입니다! 그렇다면 목차 생성이 왜 필요할까요?
글이 길어지게 되면 독자의 편의성을 위해서도 필요하긴 하지만, 아마 지금 제 글을 찾아오신 분들은 대부분 구글 SEO 때문일 것 같습니다. 내 포스팅을 어떻게 작성해야 상위권에 노출할 수 있을까 정보를 찾으시다가 구글 SEO 스코어에서 목차는 필수구나를 아신 것이죠. 저도 이 사실을 알게 된지 얼마 안되었기 때문에.. 저의 대부분의 글에도 목차가 없습니다.. 자 그렇지만! 지금부터라도 포스팅에 열심히 목차를 넣어보도록 하겠습니다! 여러분도 이 방법을 이용해서 목차를 만드시면 편리하게 목차 생성이 가능하실 것 같습니다!
1.목차 구성 결정하기
이 포스팅의 목차 만드는 예시를 가지고 설명 드리도록 하겠습니다. 먼저 앞서 해야할 부분은 목차의 구성을 결정하는 것입니다. 내가 어떤 구성으로 포스팅을 작성할 것인지 결정하는 것인데요, 이 부분은 개인에 따라 먼저 목차에 쭉 구성을 써놓고 작성하셔도 되고, 나는 글을 다 작성하고 목차를 작성하겠다고 하시면 그렇게 하셔도 됩니다.
하지만 저는 미리 목차를 구성해 놓아야 좀 더 글을 짜임새 있게 쓸 수 있는 것 같아 보통은 목차를 정해놓고 글을 시작하는 편입니다. 이 포스팅의 구성은 저는 이렇게 정하였습니다.
1. 목차 구성 결정하기
2. 목차 생성하기
3. 목차에 링크 생성하기
4. 마치며
2. 목차 생성하기
어떤 목차로 글을 작성하지 정하셨다면, 자신이 목차를 넣고 싶은 부분에 목차를 생성합니다. 바로 본문에 목차를 생성해도 되지만 저는 목차를 접었다 폈다 하는 것을 선호하여 접은글을 이용하여 목차를 생성합니다.
위에 도구 탭에서 접은글을 선택하여 추가해 주고 아래와 같이 미리 생각해 놓은 구성대로 작성 합니다.
그리고 이제 우선은 목차에 따라서 글을 쭉 작성 하시면 됩니다. 글을 작성할 때 제목은 개인 선호에 따라 제목1 또는 제목2로 작성해 주시면 됩니다. 저는 제목1은 너무 큰 것 같아서 보통 제목2로 작성을 하고 있습니다.
3. 목차에 링크 생성하기
글을 다 작성하셨으면 이제 목차를 눌렀을 때 바로 해당 부분으로 이동할 수 있도록 링크를 생성해주어야 합니다.
이를 위해 기본모드에서 HTML 모드로 변경하여 몇가지 코드를 수정 및 추가해 줄 것 입니다. 아주 쉬우니 난 HTML이 뭔지 몰라... 라고 하셔도 그냥 따라만 하시면 됩니다. 위에 도구 탭에서 HTML 모드를 선택하여 HTML 모드로 들어갑니다.
먼저 접은글로 추가해주었기 때문이 기본값은 더보기와 닫기로 글을 접었다 폈다 할 수 있도록 되어있습니다. 그치만 단순히 더보기 라고 되어 있으면 이게 목차인지 아닌지 직관적이지 않기 때문에 해당 부분을 수정해 주겠습니다. 아래와 같이 HTML 모드에서 내가 접은글을 추가한 부분에 data-text-more="더보기"와 data-text-less="닫기" 태그가 있는 것을 볼 수 있습니다. 이 부분을 저희는 더보기는 "목차 열기"로 닫기는 "목차 닫기"로 수정해 주겠습니다.
그리고 아래 부분에 링크를 먼저 추가해 줄 것입니다. 아래와 같이 접은글에 써놓은 목차 목록에 <a href="#h1"> {제목} </a>으로 링크를 생성해 줍니다. 여기서 #h1, #h2, #h3, #h4 가 의미하는 것은 바로 다음에 설명드리겠지만 각 이동 해야할 본문의 위치를 알려주는 것입니다.
이제 저 목록을 클릭 했을 때 어디로 이동하는지 설정해 주면 끝입니다. 저와 동일하게 제목2로 글의 제목을 설정하셨다면 h3 태그로 HTML이 작성된 것을 확인하실 수 있습니다. 그리고 목차를 눌렀을 때 각 제목의 위치로 올 수 있도록 각 목차에 해당하는 제목에 아래와 같이 id="h1", id="h2", id="h3", id="h4"를 추가해 줍니다. 사실 이때 h1으로 쓰던 c1으로 쓰던 g1으로 쓰던 이건 자유롭게 지정해주시면 됩니다. 다만 위에 목차에서 지정한 링크와 동일하게만 해주시면 됩니다.
이렇게 하면 목차를 만들기 위한 모든 작업이 마무리 되었습니다.
4. 마치며
제가 알려드린 방법이 자동으로 목차를 생성하는 것은 아니다 보니 약간의 귀찮음은 있을 수 있습니다. 하지만 제가 찾아본 방법 중 스킨편집 없이 가장 간단한 방법이기 때문에 한 두번만 해보신다면 누구라도 금방 목차 생성을 하실 수 있으실 것이라 생각됩니다. 내용 중 궁금하신 부분이나 수정이 필요한 부분이 있다면 언제든 댓글 부탁드리겠습니다. 끝!
