티스토리 본문에 하이퍼링크 설정

워드의 하이퍼링크처럼 목차에서 클릭을 통해 바로 이동하는 것처럼 티스토리 내에서 본문에 하이퍼링크를 설정할 순 없을까요? 이번 글에서는 티스토리의 본문글 내에 하이퍼링크를 설정해 보겠습니다.

목차 1. 개요 2. 하이퍼링크 설정하기

1. 개요

티스토리 내에서 글을 읽거나 쓸 때 사진이 많이 첨부된 글은 모든 글 또는 소제목이 많은 글 같은 경우는 읽지 않고 내가 원하는 부분으로 이동하고 싶은 경우가 있습니다. 티스토리 본문 내에서 하이퍼링크를 설정하기 위해서는 일반적으로 글을 작성할 때의 기본모드가 아닌 'HTML'에서 구현 가능합니다. 티스토리에서 자체적으로 기능이 주어지지 않았기 때문에 저희가 태그 등을 이용해서 구현해줘야 합니다.

하이퍼링크 <a href> 태그와 <id> 속성, 총 2가지를 사용하여 글 내부에 하이퍼링크를 설정해 보겠습니다.

2. 하이퍼링크 설정하기

반응형

하이퍼링크 설정하기는 편집모드 변경부터 출발지와 도착지 설정까지 총 3가지 단계로 나누어봤습니다. HTML이 처음이라 익숙하지 않으신 분들을 위해 따라오기 쉽게 그림을 첨부하였으니 보시면서 순서대로 차근차근 진행해 보겠습니다.

2. 1 편집모드 변경

첫 번째로 모드를 '기본모드'에서 'HTML'로 바꿔줍니다. 글 작성 시 상단의 메뉴바에서 기본모드라고 적힌 부분을 클릭하시면 아래의 그림과 같이 3가지 모드를 선택할 수 있게 나오는데 그중에서 HTML을 클릭해 주시면 됩니다.

2. 2 목차에 링크설정하기

두 번째는 목차에 링크설 정하기입니다. 링크를 걸어줄 목차의 문장 앞뒤에 <a href="#임의의 명칭">, </a>를 넣어줍니다.

이 글을 예시로 들면, 저의 목차는 총 2개이며, 각각 개요와 하이퍼링크 설정하기입니다. [1. 개요]를 목차 1, [2. 하이퍼링크 설정하기]를 목차 2로 해보겠습니다.

여기서 뒤에 임의의 명칭인 목차 뒤에 숫자 1,2를 붙이는 이유는 위치 즉, 링크의 출발지가 겹칠 수도 있기 때문에 숫자로 분류했습니다. 이 방법이 알아보거나 설정하실 때도 편하실 거라 생각됩니다.

2. 3 링크의 이동하게 될 위치 설정

세 번째는 링크의 목적지 설정입니다. 두 번째에서는 목차에 링크 즉, 출발지를 설정했기 때문에 도착지도 설정해야 합니다. 자신이 원하는 도착지에 id="임의의 명칭"을 넣어주시면 끝입니다.

저의 경우에는 본문글보다 글의 소제목으로 이동하는 것을 원하기 때문에 10, 13번 줄이 아닌 9,12번 줄에 도착지를 설정하였습니다. 본문내용으로 이동을 원하시는 분도 있을 텐데 그것은 개인적으로 자유롭게 하시면 될 것 같습니다.

 

여기까지 티스토리 본문 글 내에 하이퍼링크 설정하는 방법에 대해 알아보았습니다. 글을 쓰다 보면 목차가 없으면 내가 글을 어디쯤 쓰고 있는지 머리가 멍해질 때가 있습니다. 마찬가지로 읽는 입장에서 보면 링크가 없으면 웹페이지 내에서 찾기 기능을 쓰거나 스크롤을 내려서 찾아가야 되는 불편함이 있습니다. 익숙하지 않거나 불편하더라도 읽는 사람을 생각해서 목차는 물론이고 가능하다면 하이퍼링크까지 걸어주는 친절함이 있다면 좋지 않을까라는 개인적인 생각입니다. 다들 보기 편하고 이쁜 글 작성하려고 노력해 봅시다.