FUN IT [IT 소식 ㆍ 기술 ㆍ 노하우]

<a..> 태그를 활용해서 티스토리 목차 만들기 !! 

안녕하세요 ! 쉐어스퀘어 입니다.

티스토리를 통해 정보성 콘텐츠를 운영하시는 많은 분들은 어떻게 하면 자신의 블로그에 많은 사람들을 유입시킬 수 있지? 어떻게 하면 구글 및 다른 포털 사이트 검색에 노출이 될까? 많은 생각들을 하실 것 같습니다. 저도 그와 같은 생각으로 여러 고민속에 있는대요.. 막상 며칠 고민하며 지내보니 고민만할뿐 아무것도 하지 않고 있는 제 모습을 보게 되었답니다. 그래서 만우절인 오늘부터는 뭐든 1개씩이라도 도전해서 성취를 해보려 다짐했답니다. (아자!!)

자 ! 본론으로 돌아와서 나름 관리가 잘 되어 있는 티스토리를 보면 제목, 목차, 소제목1,2,3... 이렇게 깔끔하게 잘 글들이 정돈되어 있습니다. 또한 목차에 제목들을 누르면 소제목으로 바로 스크롤 이동도 됩니다. 어떻게 하면 그렇게 만들 수 있지? 하며 여러 글들을 찾아보니 a 태그를 활용해서 목차 ~ 바로가기 기능을 구현할 수 있다는 결론을 찾게 되었습니다. 습득한 내용에 대해서는 또 공유를 했을 때 배가 되는 법!! 바록 공유드리겠습니다. 

＠ 목차 "<a.. > 태그를 활용해서 티스토리 목차 만들기 !!"

( V ) 1. 구성 방식에 대한 간단한 설명 

( V ) 2. 그대로 따라해보기 

( V ) 3. 글을 마치며 

1. 구성 방식에 대한 간단한 설명

  (글 처음으로) ◀◁ 목차로 돌아가기

구성 방식에 대해 간단히 설명드리겠습니다. <a..> 태그를 활용하는 방법이구요, a 태그에서 href 값에 각 목차에 해당하는 id 값을 정의해 준다음, 각 목차를 눌렀을 때 스크롤 이동이 되었으면 하는 위치의 태그(p 태그, h3 태그 등..)의 id값으로 앞서 정의한 id 값을 넣어주면 됩니다. 쉽게 말해 a 태그의 href 값으로 정의된 id값이 들어있는 특정 태그의 위치로 커서를 이동해 주는 방식입니다. 이렇게 설명해 드려도 당연히 이해가 어려우실거라 생각됩니다. 아래의 예제로 추가 설명드리겠습니다. 

2. 그대로 따라해보기

  (글 처음으로) ◀◁ 목차로 돌아가기

먼저! 아래와 같이 목차, 본문 형태로 에디터에서 간단히 템플릿을 만들어 봅니다. 

그리고 우측 상단에 있는 "기본모드"로 되어 있는 것을 "HTML"모드로 변경합니다. 

그러면 HTML 소스 형태로 에디터가 표출이 됩니다. 여기서 너무 두려워하실 필요 없습니다. 그대로 따라하세요. 저는 목차든, 제목이든 H2, H3 태그를 이용해서 표시했기 때문에 해당 태그 바로 뒤에 목차 부분이냐, 포커스가 이동될 부분이냐에 따라 A 태그와 P 태그를 바로 뒤에 사용해 주시면 됩니다. 

예를 들어 목차 부분의 H2 태그의 경우는 아래와 같이 넣어주시면 됩니다.(흰색으로 표시된 부분을 참조하세요.) 

h4 태그 바로 뒤에 원하는 a 태그 부분을 넣어주시고, h4 태그를 닫는 부분 바로 앞에 a 태그를 닫는 의미의 </a>를 넣어주시면 됩니다. 여기서는 해당 목차에 대한 고유 id 값을 지정해 주는 부분이므로 href 뒤 쌍 따옴표("") 사이에 # 포함해서 원하는 id를 정의해 주시면 됩니다. 이젠 해당 목차 제목을 클릭했을 때 본문의 특정 제목 위치로 스크롤이 이동할 수 있도록 본문의 특정 제목 부분에 코딩하는 부분을 아래와 같이 보여드리겠습니다. 

앞서 목차 부분에서 #t01 이라고 id를 지정해 줬기 때문에 본문의 제목 부분은 h3 태그 안에 id값으로 쌍따옴표("") 사이에 t01을 넣어주시면 이로서 목차 기능이 완성됩니다. (※ html 편집시에는 불필요한 공백을 만들지 마시기 바랍니다. 모든 오류의 원인이 될 수 있습니다.) 

위와 같은 방식으로 목차 기능을 구현할 수 있으며, 관련하여 잘 되었는지 확인하기 위해서는 글을 예약 발행하신 후, 글을 열어서 확인하시면 됩니다. 

3. 글을 마치며

  (글 처음으로) ◀◁ 목차로 돌아가기

자! 오늘은 티스토리의 글을 읽는 유저들의 가독성 향상과 구글 검색 노출(구글서치콘솔)에 도움이 될 수 있는 목차 기능을 별도 소스 파일 업로드 없이 티스토리 내 html 소스 편집을 통해 구현하는 방법에 대해 알아보았습니다. 티스토리 목차 기능 구현 방법에 대해 검색했을 때 많은 글들이 어떤 css 파일 추가 및 스킨 소스의 편집을 통해 구현하는 방법을 설명하고 있었고, 일부 글에서 제가 오늘 알려드렸던 간단한 방법에 대해 설명글을 적어주셨지만, 그대로 한다고 했을 때 조금은 이해하기 어려운 불편함들이 있었습니다. 그래서 이글을 읽는 다른 분들만큼은 잘 이해하셔서 원하는 목차 기능을 꼭 구현하셨으면 하는 마음에 글을 쓰게되었네요:) 글이 도움이 되셨길 바랍니다!  감사합니다. 

이상 쉐어스퀘어 였습니다.