HTML 목차 이동 - a 태그 앵커, 책갈피, TOC 하이퍼링크 - 아이공
HTML 목차 이동 - a 태그 앵커, 책갈피, TOC 하이퍼링크 - 아이공
1. 해당 목차로 바로 이동하고 싶은 욕구
네이버 블로그의 경우 html 사용이 불가하기 때문에 어떤지는 모르겠지만 대다수의 블로그에서는 HTML의 사용이 가능하고 T-story 티스토리, 구글 Blog인 Blogger, Wordpress 모두 HTML 사용이 가능합니다.
그런데 우리는 어떤 목차 TOC(Table of Contents)를 만들고 그 목차를 클릭했을 때 하단 혹은 상단에 해당하는 위치로 바로 이동하고 싶다는 고민을 하게 됩니다.
가령 우리에게 4개의 번호로 된 항목이 존재한다고 가정해봅시다.
목차
만약 이 상태에서 1번 항목을 클릭했을 때 1번 항목에 해당하는 글로 위치가 변경되는 것을 확인할 수 있습니다. 4번까지의 모든 항목에도 마찬가지입니다.
1번 항목
2번 항목
3번 항목
4번 항목
2. 목차 이동 방법 - HTML : a href를 활용한 방법
이 방법을 하는 법은 2단계로 매우 간단합니다.
1단계
글을 적을 때 목차는 아래와 같이
< a href="#원하는 숫자, 알파벳" > 해당 목차 글자 </a>
이렇게 적습는다.
저의 경우는 아래와 같이 html를 적용시켰습니다.
<ul>
<li><a href="#sa">1번 항목</a></li>
<li><a href="#sb">2번 항목</a></li>
<li><a href="#sc">3번 항목</a></li>
<li><a href="#sd">4번 항목</a></li>
</ul>보통 a href는 링크를 걸 때 많이 사용하는데 목차와 같이 이용하고 자하는 앵커의 경우 #을 붙임으로써 id로써도 사용이 가능합니다. 그렇기 때문에 위와 같이 목차를 정의할 수 있습니다.
물론 그냥 숫자를 사용해서 #1과 같이 구성할 수 있는데 저는 그것이 잘 되지 않았습니다. 인식이 안 된달까
다른 방식으로 아래와 같은 방식도 있습니다.
< a name="#원하는 숫자, 알파벳" > 해당 목차 글자 </a>
혹시 궁금하다면 해보길 바랍니다.
제가 썼다고 해서 읽는 분의 블로그나 홈페이지에 꼭 잘 된다는 보장이 없기에 다양한 방식으로 시도해보길 바랍니다.
그러나 저는 < a href="#원하는 숫자,알파벳" > 해당 목차 글자 </a>의 방식으로 합니다.
2단계
이제 #을 통해 설정했으니 우리가 원하는 항목의 위치의 html로 가서 #을 제외한 값만 설정해주면 됩니다.
<a name="sa">1번 항목</a>
<a name="sa"></a>
1번 항목
참고로 2가지 방식을 써놨는데 첫 번째의 경우는
< a name="원하는 숫자, 알파벳" > 해당 목차 글자 </a>
이런 방식으로 가능하지만 간혹 이렇게 하면 해당 목차 글자에 꾸며놨던 css가 없어지는 경험을 하기도 합니다. 때문에 2번째로 적어놨던 방식처럼 빈 공간에 받아놓고 그 아래 CSS에 적용된 글자를 적는 방식을 채택했습니다.
<a name="sa"></a>
1번 항목물론 여기서도 a name 말고도 a href을 사용할 수도 있고 T-story 티스토리 같은 경우
<p id="sa"> 해당 목차 내용 </a>
와 같이 적용할 수도 있었습니다.
이와 같은 방식으로 우리는 목차에의 링크를 적용할 수 있음을 알 수 있었습니다.
3. 구글 블로거 Blogger에게 불행한 소식
참고로 구글 블로거인 Blogspot Blogger에게는 안 좋은 소식이 있는데 우리가 목차에서 설정한 a href의 식을 마지막 글을 발행하기 전에 설정해야만 변형이 되지 않습니다.
변형됨 : <li><a href="https://www.blogger.com/blogger.g?tab=~#sa">1번 항목 </a></li>
만약 따라 했음에도 실행이 되지 않는다면 위와 같은 이유에서 일 가능성이 큽니다. 그러기에 만약 목차의 하이퍼링크를 설정해서 이동하고 싶다면 맨 마지막에 설정하도록 습관을 들여야 할 것 같습니다.
물론 이런 내용들은 다른 블로거들에게는 해당되지 않을 수 있으나 그 블로그에 고질적인 오류나 스킨적 충돌 문제, 외부 HTML 소스와의 충돌 문제가 있을 수 있기에 잘 살펴야 합니다.
읽어주셔서 감사합니다.
