아무런 설치나 스킨 편집 없이 간단하게 HTML로 '티스토리 목차' 만드는 법
-목차-
1. 목차를 만들어야 하는 이유
우리는 긴 글을 읽음에 있어'목차'가 있다는 것은 굉장히 글을 편하게 읽을 수 있을 것입니다.
마찬가지로 우리가 쓴 글에 '목차'가 있다면 독자들은 글을 읽기 편할 것입니다.
'목차'는 글의 내비게이션입니다. 시간이 없는 사람에게는 정확하게 말하고자 하는 곳을 딱 짚어 주어 그 글을 좀 더 빠르게 읽고 정보를 얻기 위함입니다.
또한 '목차'는 글을 쓰는 사람에게도 내비게이션 역할을 톡톡히 합니다.
우리가 글을 씀에 있어 '목차'를 정하고 글을 써내려 간다면 정확하게 '서론, 본론, 결론'을 앞뒤 두서없이 쓰지 않고, 편안하게 그리고 정확하게 글을 써내려 갈 수 있을 것입니다.
아래 글을 참고하시면 정확하고 전문적인 글을 써야 하는 이유가 나옵니다.
[디지털 노마드 & 전문지식/블로그를 공부하다] - 본인의 글을 읽게 만드는 블로그 글쓰기- 1 기본 편
2. '목차'를 만드는 방법
그럼 '목차'는 과연 어떻게 만들어야 할까요?
제가 예전에 '목차'를 만들기 위해 여러 번 검색을 해봤었는데
'어떤 파일을 깔아서, 스킨 편집에 추가를 해주고 , css를 편집하고 글적을 때, HTML까지 편집을 하면 자동으로 목차가 생긴다'
라는 글을 보며 글을 다 써놓고 몇 시간 편집하고 자동 목차를 만들다가 포기한 적이 있습니다.
그만큼 '목차'를 만들기란 어려웠습니다.
하지만 만약 제 글을 보시게 된다면 누구나 쉽게 티스토리 '목차'를 만드실 수 있을 것입니다.
(대신 목차의 다양한 모양은 변경이 불가능합니다. 제일 기본 목차 형태의 목차만 만들 수 있습니다.)
설명이 어려워 보일 수 있으나 정말 쉽습니다.
차근히 보고 따라 해 주세요!
첫 번째.
저는 티스토리 글쓰기 왼쪽
위에 '제목 1' 부분을 눌러서 제일 아래 '인용' 네모칸을 만들어서 안에 목차 글을 적었습니다.
(이 작업은 해도 되고 안 해도 됩니다.)
두 번째.
본인이 전달하고자 하는 모든 포스팅의 내용을 목차에 따라서 천천히 기입합니다.
(전문성 있는 글을 쓰기에 도움이 됩니다.) 글을 다 적었으면 세 번째로 이동합니다.
세 번째.
이제 모든 글의 작성이 끝나게 되면 글쓰기 화면 중앙에서 약간 오른쪽 위에 '기본 모드'를 눌러 'HTML 모드'로 들어갑니다.
네 번째.
아까 우리가 적었던 목차가 들어간 부분입니다. <br /> 부분은 엔터 친 부분인데 이를 좀 보기 좋게 바꾸어 보겠습니다.
이렇게 <br /> 부분을 없애 주셔도 됩니다. 그 후
<p><a href="#c1">1. 목차를 만들어야 하는 이유 </a></p>
<p><a href="#c2">2. 목차를 만드는 방법 </a></p>
.
.
.
#c10 쭉쭉 만들면 무한대로 만들어집니다. 본인의 목차만큼 숫자를 늘려가며 만들어줍니다.
목차가 되어야 할 글 앞뒤 부분에 '#c1' 이 포함된 'HTML 문서를 작성'해 줍니다.
우리는 여기서 '1번 목차는 c1으로 지정'하고
'2번 목차는 c2로 지정'하고
'3번 목차는 c3'로 지정하겠다.라고 명시하는 겁니다.
(여기서 '#c1' 이 아니라 '#a1'이나 뭐 아무거나 해주셔도 됩니다. 1이 아니어도 되고 여러 가지 숫자여도 됩니다. 하지만 저 목차가 이동해야 하는 부분에도 넣어주어야 하기 때문에 작성하기 쉽고 편한 숫자와 문자로 넣어주시면 좋습니다. 안되면 그냥 따라 하세요)
그러면 아래 사진과 같이 목차 아래의 글자들이 색이 변한 것을 볼 수 있습니다.
다섯 번째.
그럼 우리의 글이 위 사진과 같이 목차에서 1번을 누르게 되면 정확히 1번 부분으로 화면이 이동을 해야 할 것입니다.
이제 마지막으로 이동할 부분을 찾아 다시 'HTML 모드'로 돌아갑니다.
이 부분이 되겠죠? 그럼 이 부분이 c1이라는 것을 명시해줍니다.
이렇게 목차에서 눌리면 가야 되는 곳을 정확하게 짚어줍니다.
<p id="c1">1. 목차를 만들어야 하는 이유 </p>
<p id="c2">2. 목차를 만드는 방법 </p>
.
.
.
id="c33' 목차에서 미리 정한 숫자만큼 목차가 갈 곳을 정확하게 짚어줍니다.
마무리.
이렇게 목차와 모든 글에 HTML 수정을 완료했다면 글을 발행하게 되면 목차가 생성이 됩니다.
이후 목차가 이동해야 할 곳의 글자의 크기나 색등을 변화시켜도 id는 저장이 되어있으니 걱정 안 하셔도 됩니다.
(대신 목차 자체의 글자크기는 수정이 되지만 인용 네모 박스가 사라질 것입니다.)
저는 1번 목차를 눌리게 되면 이동해야 할 곳인
'1. 목차를 만들어야 하는 이유' 글을 아래의 사진과 같이 변경해보았습니다.
HTML 모드에서 확인을 해보면
우리가 앞서 지정해놓은 id="c1" 부분은 살아있는 것을 보시게 될 것입니다.
색을 바꾸어도 되고 글을 어떻게든 다 바꾸셔도 됩니다.
또한 '목차'에 있는 글을 색이나 굵음을 바꾸셔도 됩니다.
(단, 크기는 인용 상자 안에 들어있어서 바꾸기를 하면 인용 상자가 없어져버릴 겁니다.)
또 한 가지 팁을 드리자면,
위 사진에서 목차 사이 간격을 띄우고 싶으실 때에는 엔터를 눌러서 띄우시진 못합니다.
사이 간격을 띄우고 싶으실 때에는 아래 사진과 같이 <br /> 이나 <p> </p> 를 넣어주시면 위 사진과 같이 간격이 넓어질 겁니다.
저는 '목차' 안에 글 1번 이후에 '<p> </p>' 를 넣었고
2번 이후에 '<br />'을 넣어 봤습니다.
최종 저의 목차는 제일 처음 보고 오셨을 거지만
이런 모양으로 바뀌었습니다.
결론
이렇게 목차 생성을 완료했습니다.
어떤가요? 설명이 어려웠나요?
너무 어렵지 않은 설명이었으면 좋겠습니다.
'c1'이라고 지정을 한 곳을 만들어서 id 가 'c1' 곳으로 보내준다.
라는 정도로 이해를 하시면 될 거 같습니다.
처음에도 말씀드렸지만 '목차'는 글을 씀에 있어, 또는 글을 읽음에 있어서 '내비게이션' 역할을 하는 중요한 역할을 합니다. 또한 '목차'는 그 글을 정성 들여 작성한 느낌, 체계적으로 글을 작성한 느낌을 주게 합니다.
이는 나의 글이 양질의 포스팅이 조금 더 양질의 글이 될 수 있다는 의미입니다.
그럼 다들 목차를 이용하여 즐거운 포스팅되시길 바랍니다.!
이상 '간단하게 아무런 설치 없이 티스토리 목차 만들기'였습니다.
혹시나 안 되는 점 궁금한 점이 있다면 댓글 남겨주시면 알려드리겠습니다.!!
감사합니다.
목차가 들어간 다른 글 보기
[디지털 노마드 & 전문지식/블로그를 공부하다] - '컴퓨터 화면 쉽게 캡처'하기! 원하는 화면 지정 캡쳐 키
[디지털 노마드 & 전문지식/블로그를 공부하다] - 본인의 글을 읽게 만드는 블로그 글쓰기- 1 기본편
댓글