티스토리 ID속성으로 내부 링크 수동 목차 만드는 법!

목차

1.ID 속성을 사용하여 목차 만드는 방법 - 목차 목록
2.ID 속성을 사용하여 목차 만드는 방법 - 이동될 부분

 

이전에 포스팅하려고 했는데 미루다가 이제야 포스팅하게 된 목차에 대한 내용입니다!

직접 목차를 수동으로 만드는 방법도 있지 않을까? 찾아보다가 링크 태그를 사용하여 만들 수 있다는 사실을 알게 되었습니다

 

직접 수동으로 목차를 만드는 방법은 매우 간단합니다

지금부터 알려드릴 내용을 사용하여 기존의 포스팅 글에 목차를 적용해보았습니다

 

newstroyblog.tistory.com/80

마인크래프트 모든버전 무료 서버로 24시간 서버 여는법 총정리 | 포트포워딩X | 최신버전 서버열

이전에 제가 올린 포스팅 내용인데

 

 

목차 부분에 나와있는 텍스트를 클릭할 경우 해당하는 제목이 있는 위치로 이동하게 됩니다!

 

ID 속성을 사용하여 목차 만드는 방법 - 목차 목록

 

포스팅 작성 시에 html모드로 바꾼 다음에 작성해주시면 됩니다

 

아래는 제가 만든 목차입니다

 

목차목록

목차첫번째

목차두번째

<p>목차목록</p>
<p><a href="#a">목차첫번째</a></p>
<p><a href="#b">목차두번째</a></p>

 

하단에 목차 목록임을 알려줄 수 있는 텍스트와

목차로 사용할 목록들을 입력해주면 됩니다 여기서 #a와 #b 부분은 id값인데 영문으로 간단히 써주는 게 좋아요

 

그리고 전 추가적으로 목차 목록임을 알려주는 텍스트에 스타일을 적용하여 텍스트 사이즈를 키웠습니다!

 

ID 속성을 사용하여 목차 만드는 방법 - 이동될 부분

목차를 만들었으면 클릭할 때 이동되는 부분도 있어야겠죠??

텍스트를 작성할 때에는 p태그를 사용하는 경우도 h태그를 사용하는 경우도 있을 텐데 #을 제외한 태그 앞에 id=""만 붙여주면 됩니다!

 

예시로 보여드릴까요?? 아까 위에서 id #a와 #b로 만들었죠??

p태그에서 사용한다고 치면
<p id="a">이동되었습니다</p>

h2태그를 사용한다고 하면
<h2 id="b">이동되었습니다</h2>

이렇게 목차에서 생성한 id만 태그앞에 넣어주면 됩니다

 

 

첫번째목차를클릭시이동되는부분입니다

 

 

실제로 목차중에 첫번째 내용을 클릭 시에 윗부분으로 이동되는 걸 확인하실 수 있을 겁니다

포스팅 하나하나가 정성으로 작성할 텐데 만약 포스팅 내용이 많은 경우에는 본문에서 원하는 내용을 찾을 때 매번 스크롤을 내려 찾기가 힘들 거예요 그래서 직접 링크 태그를 사용하여 목차를 만들어두면 보는 사람 입장에서 편하고 원하는 내용을 빨리 찾을 수 있습니다

 

두번째목차를클릭시이동되는부분입니다

 

더많은 콘텐츠