티스토리 HTML 내부 목차 만들기

티스토리 HTML 내부 목차 만들기

---

내가 쓰는 글이 길어지고 많은 정보를 담게 되면 한눈에 알아보기 쉬운 목차가 필요하다. 구글 SEO 또한 이러한 목차를 기반으로 한 글을 좋아한다고 하니 이 점 적극 활용해서 내 글이 더 많은 노출이 되도록 하면 수익에 더 도움이 될 수 있겠다. 그리 어렵지 않으니 처음부터 차근차근 잘 따라해보길 바란다.

 

목차 1. 꼭 기억해야 할 HTML 코드 2. 목차에 링크 생성하기 3. 링크 이동위치 설정하기 4. 끝으로

 

꼭 기억해야 할 HTML 코드

<div id=""></div> <a href="#"></a>

위 두가지 코드는 꼭 기억해야 한다.

첫번째 태그인 <div id=""></div>는 링크가 이동할 포인트에 쓸 코드이고

두번째로 쓰인 <a href="#"></a>태그는 목차에 쓰일 코드이다.

 

 

목차에 링크 생성하기

위에 설명한 HTML 코드를 목차에 먼저 걸어준다.

꼭 기억해야 할 HTML 코드에 코드를 넣는다는 가정 하에

 

<a href="#1">꼭 기억해야 할 HTML 코드</a>

 

이렇게 작성해서 태그를 완성시켜 주면 된다.

추가로 설명하자면 href 태그의 # 뒷부분에는 이동할 위치의 값을 본인이 임의로 작성해도 되는 부분이다.

편의상 이동할 위치의 이름에는 숫자대로 나열해 작성했다. (1, 2, 3)

 

 

링크 이동 위치 설정하기

이제 이동하고자 하는 위치에 코드를 걸어주고 글을 작성하면 된다.

<div id="1">꼭 기억해야 할 HTML 코드</div>

id="1"은 위에 목차링크를 생성할 때 href="#1"이랑 연결하는 것으로

이렇게 작성하여야 링크가 서로 연결된다.

 

HTML 코드 이용해 목차 만들기

 

끝으로

이렇게 내부 목차를 만들어서 상대방이 원하는 정보를 손쉽게 이동할 수 있게 해주면 글 전체적으로 깔끔한 느낌을 주고 또 가독성이 높아지는 효과를 주며 가독성도 높아진다. + 구글 SEO가 좋아하는 글쓰기에 해당한다고 하니 잘 활용해서 깔끔한 포스팅 작성바랍니다.