티스토리 html 실패없는 목차링크 만들기

티스토리는 html 언어를 이용하여 원하는 위치에 텍스트나 이미지를 배치할 수 있습니다. 그러나 티스토리 블로그를 시작하는 대부분의 사람들은 html 언어 작업이 어렵고 생소하기만 합니다. 처음 블로그를 시작하는 분들은 애드센스 승인을 받기 위한 글을 포스팅하게 됩니다. 애드센스 승인을 받은 후 포스팅을 발행할수록 내 글의 수준을 높이기 위해 가독성과 판독성을 추구하게 됩니다.

이때부터는 승인을 받기 위한 글이 아닌 내 글에 수준을 높이기 위해 다른 사람들의 포스팅을 찾아보고, 모방하기도 합니다. 그중 가장 눈에 띄는 것이 바로 목차링크입니다. 목차링크는 본문 내에 지정된 위치로 이동할 수 있게 만든 기능입니다. 티스토리의 목차는 포스팅을 보는 사용자들에게 편리성을 주며, 구글 seo에서도 추구하는 글의 방식입니다.

저 또한 html은 처음 사용했기 때문에 목차를 만들려고 여러 포스팅을 보며 따라 했습니다. 그러나 여러 오류로 인해 완성이 안 됐습니다. 그러던 중 인용을 활용한 목차링크 만드는 코드를 찾게 되었습니다. 이 방법은 제가 해본 것 중 가장 쉬웠으며, 오류 없이 한 번에 해결을 했습니다.

그래서 오늘은 티스토리 포스팅에 도움이 되는 html을 이용하여 목차링크를 만드는 방법에 대해 설명해 드리겠습니다. 

 

목차

1. 목차 만들기 순서

2. html 목차 코드 삽입하기

3. html 본문 코드 삽입하기

4. 소제목 폰트 수정하기

 

 

목차 만들기 전체 순서

 

저의 경우는 북클럽 스킨을 사용합니다. 다른 스킨은 적용해보지 않았지만 html 코드이므로 똑같지 않을까 생각합니다. 글의 순서는 저의 패턴이니 참고하시면 됩니다. 혹시라도 적용했지만 안 되는 경우에 제 순서를 따라 하시면 됩니다.

1. 저는 일단 글 쓰는데 시간을 줄이기 위해 글을 먼저 써 내려갑니다. 그 후 글에 연관된 사진을 중간중간 삽입을 해줍니다. 그리고 저는 주로 제목 2, 본문 2로 글 내용을 씁니다. 이건 본인 성향에 맞게 하시면 됩니다.
2. 이제 목차를 삽입합니다. 저는 네모 박스를 이용하기 위해 66 인용버튼에서 박스를 활용합니다. 박스 안에 목차와 소제목 리스트를 만들어 줍니다.
3. html로 들어가 목차 코드를 삽입합니다.
4. html 본문 코드 삽입합니다.
5. 위 3,4번 코드를 삽입하고 나면 본문내 제목 폰트 제목 2가 본문 2로 바뀌어 있음
6. 본문 내 제목들 다시 폰트 수정

 

 

티스토리 글쓰기

티스토리 인용 활용 방법

 

 

html 목차 코드 삽입하기

 

글을 다 쓰고 인용 목차 리스트 완성 후 html을 들어갑니다. 인용을 활용했기 때문에 <blockquote 라고 목차가 시작됩니다. 저는 오류 없이 깔끔하게 사용을 하고 싶어서 html 내에서 엔터(enter)를 쳐 문구를 한 줄씩 내려 줍니다. <br />은 한 줄 띄어쓰기되었다는 html 언어라 지워져도 상관 없습니다.

 

 

 

티스토리 html 버튼

html상에 표시된 목차 리스트

목차리스트 깔끔하게 다시 수정 엔터를 쳐서 줄 한칸씩 내려준다

html 목차리스트 정리

목차 리스트 수정 후 모습

 

 

목차를 정리 후에 이제!!! 목차 리스트들에 링크 코드를 삽입해 줍니다.!!

 

 

 

 

위 사진에 기입된 목차링크 코드
<p><a href="#c1">  이 두 언어 사이에 목차 리스트를 감싸줌   </a></p>
리스트가 많으면 그에 맞게 c1, c2 , c3 , c4 순으로 늘려나가면 됩니다.

<p><a href="#c1">1. 제목1</a></p>
<p><a href="#c2">2. 제목1</a></p>
<p><a href="#c3">3. 제목1</a></p>

 

 

Html 본문 코드 삽입하기

 

목차 리스트를 다 삽입한 후에 Html 상에서 바로 본문 내에 이동할 제목들을 찾아 위 작업과 동일한 방법으로 감싸줍니다. 단 목차 리스트가 코드와, 제목에 쓰이는 코드가 다르니 아래 꼭 확인하세요

 

 

위 사진에 기입된 제목 코드 

<p id="c1"> 이 두 언어 사이에 본문 내 제목을 찾아 감싸줌 </p>
제목 순서에 맞게 c1, c2, c3 쭉 숫자만 바꿔주면 됩니다.

<p id="c1">제목1</p>
<p id="c2">제목2</p>
<p id="c3">제목3</p>

코드 작업은 끝났지만 한 가지 변경사항이 있으니 글 끝까지 참고!

 

 

소제목 폰트 수정하기

코드를 다 넣고 다시 기본모드로 돌아오면 목차는 링크가 씌워져 색이 바뀌었을 겁니다. 그러나 글을 확인하면 제목 폰트가 바뀐 것을 확인할 수 있습니다. 기본모드에서 그냥 다시 제목을 원하는 폰트에 맞춰 발행하시면 됩니다. (아래 사진 참고)

코드를 넣는 위치를 바꾸면 제목의 폰트가 유지가 될지 모르지만 html 초보이기 때문에 이런 방식을 사용하는데 익숙해지면 오류 걱정 없이 금방 하기 때문에 추천드립니다.

 

 

 

Html 목차 링크 넣기 전 본문 사진

 

 

html 목차 링크를 넣은 후에 목차 리스트가 파란색으로 링크가 씌워지고 제목은 폰트가 바뀌었다

 

바뀐 제목 글자 다시 변경

 

목차링크와 폰트 수정 모두가 완성된 상태의 사진