TISTORY 목차 만들기 (내부 링크)

• Test

 

 

 

 

 

 

글을 적다보면 양이 많아지게 되고 스크롤이 방대해진다.

그러면서 무슨 글을 썼는지, 중요한 부분을 놓치게 되는데 이 부분을 보완 할 수 있는 것이 목차이고, 내부링크이다.

 

글 상단에 목차를 만들고 링크를 걸어놓으면 포스팅한 글에 무엇이 중요한지, 그리고 어떤 내용을 썼는지 한 눈에 확인이 가능하다. 

 

 

 

목차 만들기 
 -1. 목차 코드 복붙

 

메뉴에 있는 기본모드를 HTML 모드로 바꿔준 뒤, 상단에 하단 코드를 복붙해준다. 

나는 일단 3개 정도를 만들었지만, 더 필요하거나 덜 필요하다면 줄이거나 늘려도 된다.

 

<li><a href="#no_1" style="cursor:pointer; text-decoration:none">목차 1</a></li>
<li><a href="#no_2" style="cursor:pointer; text-decoration:none">목차 2</a></li>
<li><a href="#no_3" style="cursor:pointer; text-decoration:none">목차 3</a></li>

 

 

이렇게 링크가 만들어집니다. 

나는 목차1,2,3을 저렇게 이름이 바꾸어서 입력했다! 

 

그러면, 일단 눌러도 아무 반응이 없는 링크가 만들어진다.

 

 

 

 

 

 

목차 만들기 
 -2. href -> id 로 바꾸기 

 

그리고 이동하고 싶은 HTML 코드로 가서, 위의 코드 href 를 id로 바꿔주고, #을 뺀 값을 복붙해준다!

id="no_1"

id="no_2"

id="no_3"

 

 

 

 

 

 

 

목차 만들기 
 -3. 바꾼 코드 이동하고 싶은 곳에 붙여넣기 

 

id="no_1"를 넣고싶은 곳에 넣어준 모습 

 

ex)

<h4  붙여넣기 할 곳  ~~어쩌구 /h4>

<p 붙여넣기 할 곳 @#$#@% 어쩌꾸 /p>

 

 

 

 

 

 

 

끝이다!

이렇게 설정해놓으면, 목차를 누르면 id 코드를 넣은 곳으로 바로 이동할 수 있다. 

다시 맨 위로 가서 Test 눌러보세요 ㅎㅎ 위의 코드로 이동합니다.