티스토리 본문 내 링크 이동 설정하기

위 움짤을 주목해주세요.
'여기'를 클릭했더니 본문 내 다른 위치로 빠르게 화면이 이동하는 것을 볼 수 있습니다.

오늘은 이와 같이, 티스토리 본문에 링크를 걸어서 본문 내 특정 위치로 빠르게 이동하는 방법을 소개합니다. 본문 내용이 길어지거나 목차를 구성해서 체계적으로 글을 작성할 때 활용하기 좋은 방법입니다.

---

 

이동하고자 하는 위치에 '구분선'을 생성합니다. 

 

링크를 클릭하면 이 위치로 화면이 이동하게 됩니다.

 

링크를 생성할 위치를 결정합니다. 위 이미지에서 '여기' 에 링크를 걸어보겠습니다.

 

기본모드 - HTML 클릭

 

HTML 편집 화면이 열렸습니다.

 

Ctrl + F 눌러서 'hr' 입력.

*hr은 '구분선'의 태그 이름입니다.

 

앞서 생성한 구분선을 찾습니다.

 

<hr contenteditable="fasle" ..........

이런 식으로 적혀있을 텐데요..

 

<hr id="아이디" contenteditable="fasle" ..........

id="아이디" 부분을 새로 작성해줍니다.
아이디는 본인이 원하는 문자 조합으로 자유롭게 만들어도 됩니다. 복사해서 따로 메모해 두세요.

---

 

링크를 생성해보겠습니다.

링크를 생성할 곳을 찾습니다. 제 경우에는 '여기'를 찾으면 됩니다. 다음과 같이 코드를 작성해주세요.

 

<a href="#아이디"> '여기' </a>

링크를 생성할 문자의 앞 뒤를 <a> 태그로 감싸주면 됩니다.
앞서 <hr> 태그에 부여한 아이디를 똑같이 입력하고, 아이디 앞에 #을 꼭 붙여주세요.

 

다 됐습니다. 기본모드를 눌러서 HTML 편집기를 빠져나갑니다.

 

링크를 생성한 곳에 밑줄이 생기면서 파란색으로 변했습니다. 제대로 링크를 걸었다는 뜻이죠.

 

우측 하단 '완료' 버튼을 눌러서 게시글을 발행하면 링크가 정상 작동합니다.

* 확인해보니 '미리보기' 상태에서는 링크가 작동하지 않더라고요..

 

 

---

 

이상으로, 티스토리 본문에 링크를 걸어서 빠르게 이동하는 방법을 소개해드렸습니다. 티스토리 유저분들께 도움이 됐길 바랍니다. 감사합니다.