티스토리 목차를 클릭하면 본문내 이동하는 링크만드는 방법

어느분의 질문에 대한 포스팅입니다. 본블로그에 등록된 포스팅중에 '파워포인트 템플릿 무료 다운로드 최고의 사이트 10곳 (2021년)'라는 글이 있습니다.

이 글에는 아래 그림과 같이 목차가 있고 이 목차를 클릭하면 새로운 페이지로의 이동이 아닌 본문내의 특정구간으로 이동하는 기능이 있는데, 이것을 어떻게 하는지에 대해 질문을 주셨는데요.

1. 해당 포스팅은 그림과 같이 상단에 목록이 있고, 목록 아래에 본문에는 목록과 일치하는 설명이 '제목2개와 내용'으로 구성되어 있습니다. 이때 목록에서 '2번 리스트'를 클릭하면 '2번에 대한 설명'이 있는 본문의 특정위치로 이동을 하게됩니다.

2. 이는 그림과 같은 형식의 html code 를 사용하면 됩니다.

<li> ... </li> 형식은 목록을 구성할때 사용하는 것입니다.

여기서 <a href="#no_1">을 입력하고

본문의 특정 구간에 <p id="no_1"></p> 이라고 입력하면 "#no_1"가 포함된 목차를 클릭했을때 id="no_1"있는 위치로 본문내에서 이동을 할 수 있습니다.

여기서 "#no_1"은 위치식별자의 용도므로 no1 이나 a 등의 다른 문자를 입력해도 관계없습니다. 이러면 본문의 id="no_1"의 no_1 대신에 변경된 문자를 입력을 해야겠죠.

3. 위의 html 코드는 직접 입력하지 마시고 첨부한 txt 파일을 활용하시면 됩니다.

어떤오후의 프리웨어 이야기 (유용한 IT정보)