블로거가 된다는 건 고심 끝에 주제를 선정해서 어렵게 글을 적어낼 뿐만 아니라 방문자에게 보다 나은 가독성을 제공하기 위해서 어쩌면 지금까지 경험조차 하지 못했던 HTML, CSS, Javascript, jQuery와 같은 웹 언어에 대한 고통스러운 학습도 병행하고 있을지도 모르는 상당히 고난도의 영역이라고 생각됩니다. 필자 또한 전공 분야는 웹 프로그래밍 쪽이 아닌지라 불과 3년 전만 해도 전혀 문외한이었지만 사내에서 웹 관련 프로젝트를 함께 수행하면서 어깨너머로 배웠던 게 블로그를 하는데 꽤나 유용하게 활용되고 있는 덕에 그나마 편의성을 구현하는 데에는 고통이 조금 덜한 편이긴 합니다만 아마도 비슷한 수준의 선상에 있지 않을까 싶은데 그러다 보니 그 어려움에 대한 공감대를 가지고 있기 때문에 어떻게 하면 더 쉽게 설명할 수 있을까 고민했었고 그 결과를 작성한 게 이번 포스팅의 목적입니다. 너무 개념적인 부분부터 어렵게 설명하지는 않겠습니다. 결국 모르면 검색은 얼마든지 할 수 있으니 여기서는 목차 바로가기 만드는 법에 대해서만 다루도록 하겠습니다.
티스토리 목차 바로가기 만들기
1. 블로그 목차를 통해 특정 내용의 줄로 바로가기 기능을 구현하기 전에 <a> 태그와 href 속성에 대한 이해 있어야 합니다. 뭐 아래와 같이 <a> 태그를 통해서 구현할 수 있는 문법이 있기는 한데 본 포스팅에서 우리가 사용하고자 하는 것은 3) 같은 페이지 내 동일 id 요소로 연결 부분입니다.
| <a> 태그 문법은 <a href="URL"></a>로 표현하며, URL에는 1) 절대주소, 2) 상대주소, 3) 같은 페이지 내 동일 id 요소 연결, 4) 스크립트로 처리할 수 있습니다. |
2. 앞서 설명한 <a> 태그를 사용하여 href를 먼저 선언합니다. href 내에는 # 이후 영문, 숫자 등으로 지정하실 수 있습니다. 우선은 HTML 모드로 바꾸지 말고 기본모드로 목차를 구성한 다음에 HTML 모드에서 작업하실 것을 권장합니다.
<a href="#001"> 서론 </a>
<a href="#002"> 본론 </a>
<a href="#003"> 결론 </a>
3. 이제 목차에서 선언된 #001, #002, #003으로 지정 된 서론, 본론, 결론을 선택하였을 때 본문 어디로 이동할 것인지를 지정해주면 됩니다. 티스토리 블로그 문단모양인 제목1, 제목2, 제목3, 본문1, 본문2, 본문3을 사용함에 따라 기본 설정을 바꾸지 않았다면 제목1은 <h2>, 제목2는 <h3>, 제목3은 <h4>로 지정되어 있고, 본문1, 본문2, 본문3은 <p> 태그로 지정되어 있기 때문에 태그가 다르긴 하지만 동일하게 각 태그 내에 id="001" 등으로 매칭을 시켜주면 됩니다.
4. 경우에 따라서 포스팅 글을 적고 목차 바로가기를 구현하고 할 때 HTML 모드를 확인해보면 <a> 태그가 아닌 <p> 태그 등 다른 태그로 포스팅 글 내용이 작성되어 있는 경우가 있습니다. 이런 경우에는 해당 태그 내에 <a> 태그를 만들어주시면 동작하게 됩니다.
예를 들어 아래와 같이 <p> 태그로 내용이 작성되어 있다면,
<p> 목차 설정하는 부분 </p>
아래와 같은 형태로 작성을 해주면 됩니다.
<p><a href="#001">목차 설정하는 부분</a></p>
테스트 시연 및 설명 동영상
아래는 간단히 구현한 목차 바로가기 예시입니다. 모두 적용이 되는지 테스트 시연을 하기 위해 서론은 제목1, 본론은 제목2, 결론은 제목3 문단 모양을 적용하였으며, 끝맺음은 본론3을 적용하였습니다. 혹시나 하는 마음에 적용하는 방법에 대한 동영상을 아래 첨부하였으며, 관련된 코드까지 작성해 놓았으니 복사해서 유용하게 사용하시기 바랍니다.
목차
서론
서론을 시작하는 부분입니다.
본론
본론을 시작하는 부분입니다.
결론
결론을 시작하는 부분입니다.
끝맺음
<h4 data-ke-size="size20"><span style="color: #006dd7;"><b>목차</b></span></h4>
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<ul style="list-style-type: circle;" data-ke-list-type="circle">
<li><span style="color: #006dd7;"><a href="#001">서론</a></span></li>
<li><span style="color: #006dd7;"><a href="#002">본론</a></span></li>
<li><span style="color: #006dd7;"><a href="#003">결론</a></span></li>
<li><span style="color: #006dd7;"><a href="#004">끝맺음</a></span></li>
</ul>
</ul>
</ul>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h2 id="001" data-ke-size="size26"><b>서론</b></h2>
<p data-ke-size="size16">서론을 시작하는 부분입니다.</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h3 id="002" data-ke-size="size23"><span style="color: #000000;"><b>본론</b></span></h3>
<p data-ke-size="size16">본론을 시작하는 부분입니다.</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<h4 id="003" data-ke-size="size20"><b>결론</b></h4>
<p data-ke-size="size16">결론을 시작하는 부분입니다.</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<p id="004" data-ke-size="size14"><b>끝맺음</b></p>'IT(SW)' 카테고리의 다른 글
| 파이썬(Python) Pandas 엑셀파일 읽기 및 쓰기 + 조건 추출 (1) | 2021.06.07 |
|---|---|
| 티스토리 이미지 ALT 속성 처리 및 적용방법과 중요성 (0) | 2021.06.05 |
| 만능 파일 검색 프로그램 : Everything 다운로드 및 설치방법 (0) | 2021.05.18 |
| SSH 기본 포트 22번을 임의 포트로 변경하는 방법 (0) | 2021.05.13 |
| 엑셀 파일 열 때 새창으로 따로 여는 방법 (0) | 2021.05.10 |
댓글