HTML 목차 이동 - a 태그 앵커, 책갈피, TOC 하이퍼링크

네이버 블로그의 경우 html 사용이 불가하기 때문에 어떤지는 모르겠지만 대다수의 블로그에서는 HTML 사용이 가능하고 지금 보고 있는 구글 Blog인 Blogger 역시 HTML이 사용이 가능합니다. T-story 티스토리, Wordpress 또한 마찬가지.

그런데 우리는 어떤 목차를 만들고 그 목차를 클릭했을 때 하단 혹은 상단에 해당하는 위치로 바로 이동하고 싶다는 고민을 하게 됩니다.

가령 우리에게 4개의 번호로 된 항목이 존재한다고 가정해봅시다.

목차

만약 이 상태에서 1번 항목을 클릭했을 때 1번 항목에 해당하는 글로 위치가 변경되는 것을 확인할 수 있습니다. 4번까지의 모든 항목에도 마찬가지입니다.

1번 항목

-------------

--------------------------

-------------

2번 항목

-------------

--------------------------

-------------

3번 항목

-------------

--------------------------

-------------

4번 항목

-------------

--------------------------

-------------

이 방법을 하는 법은 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번 항목

참고로 이 때 < a name="원하는 숫자,알파벳" > 해당 목차 글자 </a>
이런 방식 또한 가능하지만 간혹 이렇게하면 해당 목차 글자에 꾸며놨던 css가 없어지는 경험을 하기도 합니다.

때문에

<a name="sa"></a>
1번 항목

과 같이 항목의 CSS는 그대로 둔 채로 그 위에 a href를 설정함에 따라 편리하게 사용이 가능합니다.

2단계 역시 a name 말고도 a href을 사용할 수도 있고
T-story 티스토리 같은 경우
< p id="sa"> 해당 목차 내용 </a>
와 같이 적용할 수도 있었습니다.

이와 같은 방식으로 우리는 목차에의 링크를 적용할 수 있음을 알 수 있었습니다.

참고로 Blogspot Blogger에게는 안좋은 소식이 있는데 우리가 목차에서 설정한 a href의 식을 마지막에 설정해야만 변형이 되지않습니다.
변형됨 : <li><a href="https://www.blogger.com/blogger.g?tab=~#sa">1번 항목</a></li>
만약 따라했음에도 실행이 되지 않는다면 위와 같은 이유에서 일 가능성이 큽니다.
그러기에 만약 목차의 하이퍼링크를 설정해서 이동하고 싶다면 맨 마지막에 설정하도록 습관을 들여야할 것 같습니다.

읽어주셔서 감사합니다.

Breaking

2019년 12월 1일 일요일

HTML 목차 이동 - a 태그 앵커, 책갈피, TOC 하이퍼링크