[티스토리 블로그] 목차를 이용해서 해당 소제목으로 바로 이동시키기

안녕하세요! 토미타미입니다

블로그에 글을 작성하다 보면 생각보다 쓸 내용이 많아서

포스팅이 길어지는 경우가 가끔씩 존재하잖아요?

그럴 때 보통 방문자가 찾기 쉽게 돕기 위해서 소제목으로 표시를 해둔다지만

엄청 긴 글은 그것에 상당히 시간을 뺏기기도 하는 것 같아요

 그래서 이번 포스팅은 간혹 글이 길어질 때를 대비해서

목차에 하이퍼링크를 삽입해서 해당 소제목으로 바로 이동시키는 방법을 알려드리겠습니다

저도 몇 번 사용해보긴 했지만 사실 말했다시피 긴 글이 아니면 필요는 없는 것 같아요 ㅋㅋ

그럼, 목차에 하이퍼링크 삽입해서 소제목으로 이동시키는 방법 알아보시죠!

---

 

 

 

 

 

목차 제목에 하이퍼링크 삽입

 

목차 제목에 하이퍼링크 삽입

자! 우선 첫 번째 사진처럼 목차를 만들어주세요! 꼭 저렇게 만들 필요는 없는데, 저는 그냥 간단하고 빠르게 하기 위해서 목차라는 제목과 아래에 리스트로 소제목을 넣어줬습니다. 사실 바로 HTML모드로 가서 작성해주셔도 상관없는데. 저는 컴알못이라서 저렇게 하고 나서 HTML모드로 수정하는 게 더 쉽게 느껴지더라고요. 첫 번째 사진처럼 목차 파트를 만든 뒤 HTML모드로 해당 부분을 보면 <li></li> 사이에 소제목이 들어가 있는 것을 확인하실수 있을 겁니다.

 

 

목차 제목에 하이퍼링크 삽입

이번에는 목차 소제목 부분에 하이퍼링크를 삽입해줄 건데요. 제목 앞부분에 아래 코드만 넣어주시면 소제목 부분에 하이퍼링크를 넣는 건 끝이 납니다. 이때 알아두셔야 하는 건 href="#no_1"이라고 적인 부분인데, 이건 목차 소제목의 순서라고 생각하시면 됩니다. 가장 위쪽에 해당되는 소제목에 #no_1을 넣고 차례대로 다음 숫자를 적으시면 됩니다. 이 부분은 아래에서 사용할 코드에도 적용되는 거라 꼭 바꿔주셔야 해요!

 

<a style="cursor: pointer; text-decoration: none;" href="#no_1">

 

 

목차 제목에 하이퍼링크 삽입

위 단계를 끝내면 사진과 같이 미리 작성해둔 목차 파트의 소제목 부분에 하이퍼링크가 삽입된 모습을 확인하실수 있어요. 지금 단계에서는 하이퍼링크는 삽입됐지만 클릭하셔도 이동되지 않습니다! 그럼, 이제 해당 소제목으로 이동시키는 방법을 알려드리고 포스팅을 마치도록 하겠습니다.

 

 

 

 

 

소제목으로 이동시키기

 

소제목으로 이동시키기

다들 소제목을 다는 방식이 다르겠지만 저 같은 경우는 보통 저런 식으로 소제목 부분에 문단 모양을 제목 2나 제목 3으로 변경하고 볼드체와 글씨 색정도 바꿔서 소제목 표시를 하는 편입니다. 이제 소제목까지 만들었으니, 목차를 누르면 해당 부분으로 이동하게 만들어야겠죠? 소제목까지 만드셨다면 HTML모드로 다시 들어가 주세요!

 

 

 

소제목으로 이동시키기

그리고 HTML모드에서 해당 소제목 부분을 찾으면 보통 위 사진처럼 코드가 있을 거예요. 위 사진은 아무것도 하지 않았을 때 소제목이고 이제 아래 코드처럼 변경해주시면 목차 이동시키는 방법은 끝입니다. 소제목 앞에 id="no_1"이라는 코드를 추가해주시면 되는데요. 이때 no_1는 앞전에 제목 순서에 해당되니까, 순서에 맞게 적어주시면 됩니다. 이제 모든 단계가 끝입니다! 쉽죠?

 

↓↓↓↓↓↓

소제목으로 이동시키기

 

 

 

아! 그리고 혹시나 해서 말씀드리는데. 글이 너무 길어서 소제목 부분을 찾기 힘드시다 하실 때, 사진처럼 제목 1~제목 3으로 표시해두셨다면 HTML모드에서 h3를 검색하셔서 찾기 하시면 훨씬 찾는데 도움되실 겁니다. 그럼, 아래 목차로 소제목으로 바로 이동시키는 거 적용한 모습을 보여드리면서 포스팅을 마칠게요! 그럼 20000

 

 

목차 이동