이 전 글에 목차를 만드는 방법을 작성한 적이 있습니다. 이번에는 내부 링크 또는 외부 링크를 걸어두고 페이지 이동하는 글을 작성하려 했으나, 그것보다는 현재 보이는 페이지에서 이동되는 목차를 알려드리는 것이 더 좋을 것 같아서 작성하게 되었습니다. 우선 간단하게 원리를 설명을 드리자면 아래와 같습니다.
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로 '이동해라'는 것을 만들어놨으니 이동할 도착지를 만들어주면 됩니다.
위에 "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] - 티스토리 글쓰기 서식 공유해요~
티스토리 글쓰기 서식 공유해요~
요 며칠 바빠서 포스팅을 못하다가 겨우겨우 시간을 내서 해보려고 합니다 하지만!! 좋은 꿀팁이 될 것 같아서 공유해보아요~ 저는 보시다시피 얼마 전에 티스토리를 시작한 티린이랍니다~ 여
grayruma.tistory.com
2022.09.09 - [IT Story/Html] - HTML 하이퍼링크 태그로 이미지 링크 걸기
HTML 하이퍼링크 <a>태그로 이미지 링크 걸기
Html의 기초를 공부하려면 기본적으로 아래 용어를 알고 있어야 합니다. 어렵게 보일 수 있지만 생각보다 어렵지 않습니다. '태그-Tag' : HTML 문서를 이루는 문법적 표시 '요소-element' : HTML 요소 즉,
grayruma.tistory.com
'IT Story > Html' 카테고리의 다른 글
| HTML 하이퍼링크 <a>태그로 이미지 링크 걸기 (2) | 2022.09.09 |
|---|