나무위키에서 자주 쓰는 방법이죠. 문서 처음 부분에 목차가 있고, 목차 중에 어떤 항목을 클릭하면 그 항목으로 바로 갔다가, 항목의 제목을 누르면 다시 목차로 이동하게 되어 있습니다.
오늘은 그걸 어떻게 하는지 공유하겠다 이말이야
이 글의 순서는 다음과 같습니다. 각 제목을 클릭하면 항목으로 이동하니 참고하세요!
웹페이지 내부링크란?
보통 링크라고 하면 이런 겁니다. 뭔가를 클릭하면 그 주소로 이동하게 되어 있죠?
https://www.daum.net/ : 클릭하면 "다음" 사이트로 이동
하이퍼링크라고 하죠? 위의 링크를 누르면 다음 메인 화면에 접속하게 됩니다. 태그는 다음과 같이 쓰면 되구요
<a href="https://www.daum.net/" target="_blank">https://www.daum.net/</a>
그런데 저런 방식 말고, 링크를 누르면 웹페이지의 특정 위치로 이동시킬 수도 있어요. 보통은 하나의 페이지가 길고, 목차 형식으로 되어 있을 때 그런 방법을 많이 씁니다. 그림으로 나타내면 아래와 같습니다.
내부링크 태그 작성 방법
내부 링크 태그도 마찬가지로 <a> 를 써서 작성합니다. 아래에 예시를 보여드릴께요
<!-- 페이지 내에서 링크하기 -->
<p><a id="content_lst" href="#lst_01">항목 1</a></p>
<p><a href="#lst_02">항목 2</a></p>
<p><a href="#lst_03">항목 3</a></p>
<p> </p>
<p> </p>
<a id="lst_01" href="#content_lst">항목 1</a>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
<p> </p>
<a id="lst_02" href="#content_lst">항목 2</a>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
<p> </p>
<a id="lst_03" href="#content_lst">항목 3</a>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
<p>내용내용내용내용</p>
위 코드의 특징을 보면 다음과 같습니다.
- <a> 태그를 사용했다
- a 안에 id를 통해 자신의 고유 이름을 명시했다
- 링크될 주소 (href) 안에 #을 붙이고 id를 적어줌으로써 해당 위치로 이동
위 내용을 이 페이지에 삽입해서 나타내 보면 아래와 같습니다.
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
내용내용내용내용
위 목차에서 항목 2을 누르면 항목 2로 갈 거고, 항목 2를 누르면 다시 목차로 돌아갈 겁니다. 아래에서 코드를 다운받으시면 됩니다.
코드가 동작하는 방식
이 코드는 상호 참조하는 방식으로 동작합니다.
위 그림에서 보듯이, 만약에 id를 A, B라고 정했으면 href 는 반대로 B, A 라고 써 주면 서로 간에 왔다 갔다 할 수 있는 방식입니다. 실제로 삽입하기 위해서는 티스토리의 기본모드 말고, html 모드로 들어가서 태그 부분에 작성해줘야 합니다.
어떤 때에 사용하면 좋은가?
이 섹션은 제 개인적인 생각입니다. 블로그 글을 아무리 잘 쓰고 아무리 정성스럽게 포스팅해도, 결국 읽는 사람들은 보고싶은 두세 줄만 본다, 라고 생각했을 때 보고 싶은 내용으로 바로 이동하게 해 줄 수 있지 않겠느냐....
그러니까 결국 글은 뭐가 됐든간에 몇개의 문단으로 되어 있고, 각 문단 (소주제) 에는 제목을 갖다붙일 수 있을 것이고, 그 각각의 제목에다가 링크를 해주면 보고 싶은 거만 골라 볼 수 있지 않을까? 거창하게 얘기했지만 결국 나무위키처럼 만들겠다는 소리죠 네네
이 경우 컨텐츠내 광고와 조금 모순될 수도 있기는 할 텐데... 잘 생각해봐야하긴 하겠습니다. 왜냐면 이 포스팅도 그런 식으로 구성되어 있거든요
그런 얘기를 들었습니다. 블로그를 나무위키처럼 운영해라, 그러면 구글에서 좋아한다. 글이 수시로 수정되고 (최신성 유지), 목차와 내용이 잘 구분되어 있고, 사이트 내 참조도 잘 되어 있고, 머 그런 내용들이 아닐까 해서 구글 SEO에 맞춰서 조금씩조금씩 바꿔나가는 작업을 시도하는 중에 이런 내용을 소개드리게 되었습니다.
오늘도 긴 글 읽어주셔서 감사하구요, 다음에 더 알찬 글로 돌아오겠습니다!
댓글