클릭하면 스크롤 이동하는 목차 만들기

클릭하면 스크롤 이동하는 목차 예제

 

이 전 글에 목차를 만드는 방법을 작성한 적이 있습니다. 이번에는 내부 링크 또는 외부 링크를 걸어두고 페이지 이동하는 글을 작성하려 했으나, 그것보다는 현재 보이는 페이지에서 이동되는 목차를 알려드리는 것이 더 좋을 것 같아서 작성하게 되었습니다. 우선 간단하게 원리를 설명을 드리자면 아래와 같습니다.

 

See the Pen Untitled by Hokyun (@Grayruma) on CodePen.

위에 보시는 것과 같이 목차를 클릭하게 되면 해당 목차의 위치로 이동되는 html 간단 코드입니다.

지금부터 html 을 간단하게 설명하겠습니다. 원리는 이해하지 않아도 됩니다. 작동방식만 이해하신다면 언제 어디서든 사용 가능하니 참고하면 좋습니다.

 

다음 이동

<a href="http://www.daum.net">다음</a>

이 a 태그의 코드는 "다음" 클릭 시 이동하는 코드입니다. 하지만 오늘은 본 페이지 내에서 이동하는 것이기 때문에 다음 사이트 주소를 지우고 원하는 값을 넣어 임의로 만들어보겠습니다.

<a href="#01">1. 첫 번째 목차입니다. </a>
<a href="#02">2. 두 번째 목차입니다. </a>
<a href="#03">3. 세 번째 목차입니다. </a>

이 코드가 바로 맨 위의 목차 코드입니다.

저는 주소나 이름을 넣기보다는 그냥 편하게 #01, #02, #03으로 만들어 사용했습니다. 더 간단하게 혹은 더 복잡하게 만들 수도 있습니다. 위 코드는 간단하게 "어디론가 이동시키다, 이동하다"로 알고 계시면 됩니다. 자.. 그럼 #01로 '이동해라'는 것을 만들어놨으니 이동할 도착지를 만들어주면 됩니다.

 

728x90

 

위에 "1. 첫 번째 목차입니다."라는 서식과 함께 목차가 작성되어 있는 것을 보실 수 있는데요. 코드의 기본 상태는 아래와 같습니다. 

<p data-ke-size="size16">1. 첫 번째 목차입니다. </p>

도착지를 만들어주어야 한다고 설명을 했는데요. 아래와 같이 id를 지정해 위에 임의로 만들어 놓은 '01'을 넣어주시면 됩니다. #은 빼고 지정하시면 됩니다.

<p id="01" data-ke-size="size16">1. 첫 번째 목차입니다. </p>

조금 더 디테일하게 알고 싶으신 분들은 'html id 속성'을 검색하시어 자세히 알아보시면 됩니다.

이렇게 완성되었는데요. 어떠신가요? 사용방법은 너무 간단합니다. 여러분들도 사용하시다 보면 쉽고 간단한 것을 느끼게 되실 겁니다.

 

 

2020.04.02 - [IT Story] - 티스토리 글쓰기 서식 공유해요~

티스토리 글쓰기 서식 공유해요~

 

2022.09.09 - [IT Story/Html] - HTML 하이퍼링크 태그로 이미지 링크 걸기

HTML 하이퍼링크 <a>태그로 이미지 링크 걸기