티스토리 본문 내 하이퍼링크 이동 만들기

티스토리 블로그를 작성하다 보면 내용이 길어져 목차를 따로 만들고 목차를 누르면 해당 내용으로 연결되도록 하고 싶을 때가 있다. 이럴 때 어떻게 해야 할까? 티스토리 본문 내 하이퍼링크 이동을 만드는 방법에 대해서 알아보겠다. 한가지 주의할 점은 html에 대한 지식이 좀 있어야 한다는 것. 이런 거 머리 아파하는 분들의 경우 정신건강을 위해 빠른 포기를 권유드린다.

 

티스토리 본문 내 하이퍼링크 이동?

팃토리 본문 내 하이퍼링크 이동을 사용하면 아래와 같이 본문 상단에 목차를 따로 작성하고 하단에 1, 2와 같은 내용이 있다고 할 때 목차 부분을 누르면 해당하는 1번, 2번 내용으로 본문의 스크롤이 내려가도록 할 수 있다는 것.

 

티스토리 본문 내 하이퍼링크 적용 방법

자, 그럼 지금부터 아래를 따라해보자. 

1. 먼저, 위와 같이 목차를 작성하고 하단에 일부 내용을 작성한다. 

2. 그리고 티스토리 상단 메뉴 중 오른쪽에 있는 모드를 html로 변경시켜준다.

3.  그럼 아래와 같이 html 코드가 나오는데 빨간색 박스 표시와 같은 코드를 넣어주어야 한다.

 

요점은 목차가 되는 부분에 <a href="#이름">원래 목차 내용</a> 를 넣어주고

연결될 부분은 <p id="이름"></p> 형태가 되도록 넣어주어야 한다는 점이다. 아래 예시를 보자.

 

 

주의할 점, 헷갈리는 점

여기서 헷갈리면 안 되는 부분은 원래 본문에 <p ~> </p>이렇게 시작되는 코드가 있을 때는  id="이름"만 넣어주면 된다는 점이다. 그리고 <a href="#이름">원래 목차 내용</a>에서 #을 빼먹으면 안 된다. 그리고 연결될 id="이름"에서는 #이 없다.

 

여기서 '이름'이라고 되어 있는 부분은 원하는대로 지정한다. 다만 링크를 적용할 목차와 연결할 내용에 동일한 이름을 써야 한다. 예를 들어

<a href="#anc1">원래 목차 내용</a>이렇게 넣은 부분과 연결한 내용에는

<p id="anc1"></p>

 

<a href="#list1">원래 목차 내용</a>이렇게 넣은 부분과 연결한 내용에는

<p id="list1"></p>

이렇게 코드 중 이름 부분을 동일하게 해야 정상적으로 연결된다.

 

목차에 리스트를 적용한다면?

티스토리 기능 중에 아래와 같이 리스트 기능이 있다. 저걸 적용하면 앞에 점이 찍히면서 목차나 제목 등이 좀 더 눈에 띄도록 할 수 있다. 만약 이걸 적용한 상태에서 하이퍼링크 코드를 넣으려면 어떻게 넣어야 할까?

 

아래처럼 넣으면 된다. 기본적으로 리스트를 적용하면 적용한 글자 앞에 <li> ~ </li>가 생긴다. 이 다음에 <a href="#이름"> ~ </a> 코드를 넣어주면 된다. 링크할 부분에 적용하는 <p id="이름" >~</p> 이건 동일하다.

 

마무리

최대한 간단하게 설명하려고 노력했으나 이런 내용을 처음보시는 분들에게는 어려웠을 수 있다고 생각한다. 원하는 내용을 득하여 필요한 부분에 적용하셨길 바란다. 혹시 내용이 도움이 되었다면 하트를 눌러주시면 정말 정말 감사할 것 같다.