티스토리 화면 본문 내 하이퍼 링크 이동하는 방법 - GUHG

티스토리 화면 본문 내 링크로 이동하는 방법을 알려드리겠습니다. 티스토리 글을 쓰다 보면 목차를 만들고 싶을 때가 있습니다. 글이 길어지게 되면 검색자는 필요한 정보가 어딨는지 찾을 수 없어 바로 나가버리니까요. 이렇게 되면 글 체류시간이 낮아지면서 블로그 지수에 안 좋은 영향을 끼칠 수도 있습니다.

 

그래서 내 글이 처음부터 끝까지 이어서 읽어야 하는 게 아니라면 목차를 만들고 티스토리 화면 본문 내 링크로 이동할 수 있는 장치를 마련해 두는 것도 좋은 방법입니다. 아래는 제가 처음 목차를 통한 티스토리 본문 내 하이퍼 링크를 걸어 이동할 수 있도록 한 글입니다. 

 

  ☞ 여권 재발급 사진 오류 해결 방법 알아보기 - GUHG

 

반응형

 

이 내용의 결론만 보고 싶다면? 아래를 클릭!!

• 티스토리 블로그 본문 내 하이퍼링크 달기 요약 

 

처음 본문 내 링크 삽입을 해봤습니다. 지금 하고 나니 '참 쉬운 원리구나' 생각하지만, 글을 쓰는 중간 과정에서는 생각보다 시행착오가 여럿 있었습니다. 처음 가는 장소를 네비 없이 운전하는 느낌일까요? 그래서 저와 같은 고민을 하시는 분들에게 내비게이션처럼 더 쉽게 본문 내 링크 삽입을 할 수 있도록 아는 정보는 최대한 공유해야겠다는 생각이 들었습니다.

 

화면 본문 내 링크 이동은 다른 글 링크 삽입하는 것과 원리는 동일합니다. 즉, 목차에 있는 문장에 하이퍼링크를 다는데, 그 도달하는 지점이 다른 글이 아닌 현재 본문 내에서 내가 원하는 위치가 되는 것입니다. 그렇다면 내가 원하는 위치의 링크를 생성하고 그것을 삽입할 수 있으면 이동 링크 달기는 끝! 

 

하이퍼 링크를 달아주는 a 태그(Tag) 속성 href 사용하기

 

본문 내 이동하는 방법은 하나가 아닐 것입니다. 그중 제가 생각하기에 가장 쉬웠던 방법으로 안내해 드리겠습니다.

 

HTML에서 <a></a> 태그는 하이퍼링크를 걸어주는 태그입니다. 본문을 기본 모드에서 HTML 모드로 바꾸면 볼 수 있습니다. 제가 위에 '여권 재발급 사진 오류 해결 방법 알아보기' 글을 링크 걸어뒀죠? 그걸 HTML 모드로 보면

 

하이퍼 링크를 달아주는 a 태그

 

제가 의도한 최종 도달해야 할 글인 '여권 재발급 사진 오류 해결 방법 알아보기'의 주소가 빨간 <a></a> 태그 사이에 들어가 있는 게 보이시나요? 그럼 벌써 반은 오셨습니다. 그 주소를 표시하는 방법이 href(하이퍼링크)입니다. href 속성 다음에 들어오는 링크가 내가 최종 도달해야 할 목적지라고 볼 수 있습니다. 그래서 제 글로 보내기 위해 

 

href = "https://guhg.tistory.com/entry/여권-재발급-사진-오류-해결-방법-알아보기"

 

이렇게 최종 목적지를 href 속성 뒤에 써주었습니다. 우리는 최종 목적지가 본문 내 어느 위치이기 때문에 href 뒤에 그 위치를 설정해 주면 됩니다. 

 

 

위치 식별을 위해 href 뒤에 #을 사용한다

 

리스트를 만들고 본문 이동을 시켜보겠습니다. 

 

• 목차1
• 목차2
• 목차3

 

위 목차 1,2,3을 HTML 모드로 보면 

 

목차 1, 2, 3

 

목차는 현재 <li>와 </li>로 묶여 있습니다. 여기에 하이퍼 링크를 달아줘야 하니 <a> 태그와 href 속성을 넣어줍니다. 그럼 아래와 쓸 수 있습니다. 

 

<li><a href = "#NO1"> 목차1 </a></li>

<li><a href = "#NO2"> 목차2 </a></li>

<li><a href = "#NO3"> 목차3 </a></li>

 

이 내용은 목차 1, 2, 3을 누르면 본문 내에 있는 NO1, NO2, NO3으로 이동하라는 명령입니다. 본문 내 내가 원하는 위치를 식별하기 위해서는 NO 앞에 #을 넣었습니다. NO1, 2, 3는 임의대로 표시한 거니 원하시면 변경하셔서 넘버링하셔도 됩니다. (예 : no_1, no_2, no_3 등)

 

 

이동을 원하는 위치에 id로 넘버를 지정해 본문 생성

 

※ 본문 태그는 <p></p> 입니다.

 

제가 검색해본 방법 중 가장 이해하기 쉬웠던 것은 내가 원하는 위치 바로 위해 id로 지정한 본문 명령어를 입력하는 것이었습니다. 일단 먼저 보고 설명하겠습니다. 

 

<p id = "NO1"></p>

<p id = "NO2"></p>

<p id = "NO3"></p>

 

이 말은 하이퍼 링크가 #NO1, 2, 3으로 표시된 목차1, 2, 3의 최종 도달점이라는 말입니다. 내가 이동시키기 원하는 본문 위에 이런 명령어를 추가해 두면 거기로 이동하게 됩니다.

 

 

[목차1]

 

 

[목차2]

 

 

[목차3]

 

이렇게 별도의 목차 1, 2, 3을 만들고 위의 명령어를 입력하겠습니다. 그러면 아래 그림 같이 HTML에는 표시됩니다. 

 

링크 도달 위치 입력

 

이제 완료되었습니다. 위의 본문에서 목차 1, 2, 3을 누르면 아래 [목차1] [목차2] [목차3]으로 이동하는 것을 볼 수 있습니다. 현재 목차 간 간격이 좁아서 큰 차이는 없어 보이지만, 만약 목차 아래 본문 내용이 충분히 추가된다면 유용하게 활용됨을 알 수 있을 것입니다. 

---

 

 

티스토리 본문 내 이동하는 방법 정리

1. 원하는 목차 명령어에 <a href = "#no1"> 문장 </a> 태그를 입력한다.

2. 원하는 위치의 본문 위에 <p id = "no1"></p> 명령어를 입력한다. 

 

이상으로 티스토리 본문 내 하이퍼 링크로 이동하는 방법 알아봤습니다. 티스토리 운영하는 모든 블로거를 응원합니다. 함께 성장해가면 좋겠습니다. ^^