일상 log/꿀팁공유 - 제품리뷰

티스토리 블로그 목차 클릭시 스크롤 자동으로 이동하게 만드는 방법

연지쁨 2023. 10. 19. 13:07
반응형

안녕하세요 오늘은 티스토리 목차 클릭시 스크롤로 자동으로 이동하게 만드는 방법을 설명해드릴게요.

1. 목차의 정의
2. 목차 클릭시 스크롤 자동 이동하게 설정하면 좋은이유 (장점)
3. 목차 클릭시 자동으로 이동하게끔 적용하는법

 

 

 

 

 

목차의 정의

목차는 글의 내용을 요약하여 표시한 것입니다.  글의 구조를 파악하고, 원하는 부분을 쉽게 찾을 수 있도록 도와줍니다.

글이 길거나 복잡한 경우, 목차를 통해 글의 구조를 파악하고, 원하는 부분을 쉽게 찾을 수 있습니다. 

또한, 목차를 통해 글의 내용을 빠르게 확인할 수 있습니다. 

따라서, 목차는 글의 품질을 높이는 데 도움이 되는 중요한 요소입니다

 

 

 

 

 

 

목차 클릭시 스크롤 자동 이동하게 설정하면 좋은점

목차가 여러 개 있는 경우, 목차를 클릭하면 해당 목차의 내용이 화면에 표시됩니다.

이를 통해 사용자가 원하는 부분을 쉽게 찾을 수 있습니다. 이를 통해 사용자가 글의 처음이나 끝으로 이동할 수 있습니다.

  • 사용자의 편의성을 높입니다.
  • 글의 구조를 파악하기 쉽습니다.
  • 글의 내용을 빠르게 확인할 수 있습니다.

 

 

 

목차 제목 클릭시 자동으로 이동하게 적용하는 방법

먼저 글을 모두 작성을 해주셨다면 티스토리 기본모드를 html 모드로 변경해주세요.

그리고 목차가 들어갈 부분에 아래 코드를 삽입해주세요.

 

 

반응형

 

 

<a herf="#01"> 1. 목차 </a><br>
<a herf="#02"> 2. 목차 </a><br>
<a herf="#03"> 3. 목차 </a><br>

이렇게 목차 제목 양옆에 html 태그를 삽입해줍니다.

 

 

 

<br><p id='01'> 1. 목차 내용 <br></p>
<br><p id='02'> 2. 목차 내용 <br></p>
<br><p id='03'> 3. 목차 내용 <br></p>

목차 클릭시 이동할 부분에 내부 링크를 달아줍니다.

 

 

 

 

 

현재 포스팅을 예시로 들어 완성된 html 코드 예시를 보여드릴게요!

반응형