티스토리에 목차 HTML 서식 넣는 방법

티스토리를 개설만 해놓았지 타 블로그만 열심히 포스팅을 했는데 이제는 이곳에서도 열심히 해보자 싶어 나름 포스팅을 하고 있습니다. 다른 블로그 글을 보면 멋지게 목차를 만들어 놓으시고 목차를 누르면 해당 글이 바로 보여지는데 저는 부족하게 많아서 목차를 그냥 입력한 하고 해당 목차로 글이 보여지지 않는 초보자의 수준이랍니다. 저도 무엇인가 멋지게 해보자 싶어 열심히 검색을 해서 설명이 잘되어있는 블로그분의 목차 서식넣는법을 보고 열심히 공부를 해보았습니다.

 

 

[도움을 얻은 블로그님의 주소는 하단에 링크 걸어두겠습니다. 감사합니다! ]

 

---

 

일단 목차서식을 넣어 완성한 모습입니다. HTML 넘 어려워요. 좀 부족해 보이지만 나름 살짝 뿌듯하기도 하지만 그래도 헷갈리는 부분이 많아 계속 공부하려고 합니다.

 

 

목차

1. 첫번째 타이틀 : 인사말

2. 두번째 타이틀: 목차 서식 넣는 방법

3. 세번째 타이틀

 

 

 

 

1. 첫번째 타이틀 : 인사말

안녕하세요. 윤카이로스입니다.만나서 반갑습니다. 그럼 설명해볼께요. 저도 워낙 HTML에 초보자 수준이기에 저와같이 아무것도 모르시는 초보자분들을 위해 설명을 해드릴께요. HTML하니 예전 다음카페에서 사진에 음악넣고 글 넣고 그랬던 추억이 떠오릅니다.

 

 

 

2. 두번째 타이틀 : 목차서식 넣는 방법

일단 인용구를 만들어 목차를 입력하세요. 노란색 박스를 누르시면 인용구가 나옵니다. 저는 세번째 것을 클릭한후 대표 목차를 입력했습니다.

 

 

목차
1. 첫번째 타이틀 : 인사말
2. 두번째 타이틀 : 목차 서식 넣는 방법
3. 세번째 타이틀

 

 

그런다음 오른쪽에 있는 기본모드를 클릭한 후 HTML를 선택해주세요

 

 

HTML를 클릭하면 뭐 정신없는 것들이 나오고 있습니다. 

 

8번 목차<br /> 뒷부분에 아래내용을 입력해 줍니다.

 

 

<p><a href="#c1">1.첫번쩨 타이틀</a></p>
<p><a href="#c1">2.두번쩨 타이틀</a></p>
<p><a href="#c1">3.세번쩨 타이틀</a></p> 

 

 

 

그러고 나서 목차가 이동할 곳에  id 태그를 넣어주시면 됩니다. 위의 목차를 누르면 해당 목차로 이동하는 방법입니다.

 

 

 

<p id="c1">1.첫번째 타이틀: 인사말

<p id="c2">2. 두번째 타이틀 : 목차 서식 넣는 방법

<p id="c3">3. 세번째 타이틀

 

 

 

이렇게 간단하게 다시 보여 드릴께요

 

 

 

3. 세번째 타이틀

그러고 나서 다시 기본모드로 돌아오면 이런 목차 서식이 완료된 모습이 보입니다.

 

 

 

 

해당 목차를 클릭하면 목차의 내용으로 바로 이동이 되는 거죠. 근데 생각해보니 목차 서식을 넣고 이동할수 있게 하는것이 장단점이 있을거 같습니다. 타 블로그에는 목차 링크 걸어두고 이동하는것이 없는거 같은데 이곳은 원하는 목차로 이동해서 내가 원하는 글만 볼수 있는 장점이 있기도 하겠지만 필요한 글만 보고 바로 나의 블로그를 나가는 경우도 있겠네요.

물론 방대한 길이의 글이라면 내가 찾는 정보를  한참 읽어 내려가 내가 원하는 글이 보일때 까지 스크롤바를 내려보겠지만 사실 그것도 어쩔땐 지겨워서 빠져나오기도 하니깐요.어찌되었건 궁금한건 찾아보는 성격이라 알고나서 적용을 해보는것도 좋은 방법일것 같습니다. 저처럼 초보자이신 분들에게 조금이라도 도움이 되셨길 바랍니다.

 

 

 

 

 

제가 도움받은 블로그님 링크 주소입니다.  http://monstergreen.tistory.com/217#c2