티스토리 블로그 목차 만들기 - 클릭 시 이동 까지 초보자도 쉽게 따라해 보아요!

🔍 요약: 이 글에서는 티스토리 블로그 게시물에 목차를 만드는 방법을 설명합니다. 이 글을 끝까지 읽고 이해하시면 여러분의 게시물에도 목차를 멋지게 넣을 수 있게 됩니다. 

티스토리 블로그 목차 만들기.

다른사람의 블로그를 구경하다 보면 그 내용의 목차가 달려있는 것을 보신적이 있으실 거에요. 심지어 그 목차를 클릭하면 해당 내용으로 바로 스크롤 되어 이동하게 되죠.

여러분은 이런 걸 보고 "와~ 신기하다!"라고만 하실 건가요?

 

저와 함께 여러분의 게시물에도 목차를 만들 수 있는 방법을 알아보아요!

📋 목차

• 1. 목차 만드는 방법
• 2. 클릭 시 스크롤 기능 넣기
• 3. 마무리

반응형

📌 1. 목차 만드는 방법

목차 만드는 방법은 너무나도 쉬워요. 왜냐고요?

우리에겐 ChatGPT가 있으니깐요.

 

그냥 ChatGPT에게 부탁하세요. 

" 티스토리 블로그 본문 목차에 대한 HTML 태그를 작성해 줘. 색상은 옐로 파스텔 톤으로 만들어 주면 좋을 것 같아." 라구요.

 

그럼 우리의 친구가 친절하게 HTML Tag를 만들어 준답니다.

 

우리는 그 Tag를 우리 게시물에 넣기만 하면 되는 거죠.

참고로 이런 목차는 자주 쓰이니까 블로그 서식에 미리 만들어 놓고 사용 하면 아주 편하겠죠?

 

티스토리 블로그 서식기능을 잘 모르시는 분은 아래 버튼을 클릭해서 이전 게시물 한번 읽어 보세요~^^

 

티스토리 블로그 서식기능 보러 가기

 

📌 2. 클릭 시 스크롤 기능 넣기

반응형

목차를 만들었다면 이제 그 목차를 클릭했을 때 해당 내용으로 스크롤이 휘리릭~ 하고 이동하는 기능을 넣어 볼 거예요.

참고로 이건 HTML 모드에서 설정을 해줘야 하는데 별로 어렵지 않으니까 천천히 따라 해 보세요~.

 

▲ 티스토리 블로그 목차 만들기.

 

위 그림의 HTML Tag가 이 게시물의 목차 부분에 해당하는 Tag에요.

저기에서 색상표시 되어 있는 부분 <a href="#section1"> ~~~ </a> 이게 안쪽 글자를 클릭했을 때 링크를 추가하는 Tag에요.

하지만 우리는 다른 페이지로 링크를 걸게 아니기 때문에 URL 대신 이 게시물에 포함되어 있는 "section1"이라는 아이디를 가진 개체가 있는 곳으로 이동을 시키도록 작성하는 거예요.

 

그렇다면 저 "section1"이라는 아이디를 우리 게시물의 어딘가에는 설정해 줘야겠죠?

보통은 목차를 소제목 단위로 작성을 하실 테니 우리도 소제목 영역에다가 저 아이디를 부여해 주면 되는 거예요.

 

▲ 티스토리 블로그 목차 만들기

 

위 그림의 HTML Tag가 이 게시물의 1번 소제목에 해당하는 Tag에요 

마찬가지로 색상표시 되어 있는 부분처럼 id="section1"과 같이 아이디를 지정해 주면 목차 클릭 시 저 위치로 휘~익 하고 커서가 이동해요. 참 쉽죠?

 

✨ 목차 생성 Tip.

한 가지 팁을 드리자면, 여러 가지의 목차 중에 "아, 이건 우리 독자님들이 클릭을 많이 할 것 같아"라고 하는 항목이 있잖아요? 그럼 그 지점에 광고를 딱~! 

관심이 있는 목차를 클릭하면 그 위치로 스크롤이 휘리릭 내려갈 것이고 그럼 바로 광고가 딱! 노출되는 거죠.

 

📌 3. 마무리

이처럼 우리는 다른 사람들의 블로그를 구경하다가 좋아 보이는 게 있으면 우리의 블로그에도 적용을 해야 해요.

내가 좋아 보이면 우리 독자님들의 눈에도 좋아 보일 테니깐요.^^;;

 

다음번에도 프로그램 개발자의 장점을 살려 일반인들이 잘 모를 수도 있을만한, 그러면서 도움이 될 만한 내용들로 유익한 포스팅 할 수 있도록 노력할게요^^

 

끝까지 읽어주셔서 감사합니다.

 

티스토리 블로그 글쓰기, 서식을 활용한 포스팅 속도 향상 방법 (Tip)

티스토리 블로그 글쓰기, 서식을 활용한 포스팅 속도 향상 방법 (Tip)

 

💬 읽어주셔서 감사합니다.
공감 + 댓글 은 큰 힘이 됩니다.

여러분의 응원은 컨텐츠 제작에 큰 힘이 됩니다! 😊