내 티스토리 글 본문 특정 위치로 이동하는 외부링크 URL 만들기

가끔 다음과 같은 행동을 하고 싶을 때가 있다.

이 내용 내가 다른 글에서 언급했는데, 이 글을 읽는 사람들이 참고하면 좋겠다는 생각.

그런데 그 내용이 글 중간에 있어서 링크하기 좀 그렇다는 생각.

 

그럴때 사용할 수 있는 방법을 소개하고자 한다.

먼저 위치링크 개념이 있어야한다.

위치링크

이 블로그의 경우 쭈미로운 생활의 한눈에 스킨을 사용중이라 목차가 자동으로 생성되고

목차를 클릭하면 해당 위치로 이동한다.

 

누르면

이동!

id 가 중요하다(feat. HTML)

이게 어떻게 되는 것이냐면

소제목(h3)에 해당하는 'ggplot 한글 깨짐 방지 및 해결 - 테마 설정' 에 id가 설정되어 있다.이 id를 링크에 걸어주고 링크를 클릭하면 그 id가 위치한 곳으로 이동하게 되는 것이다. 예시를 보자.

#section-4에 주목

<h3 style="color: #000000; text-align: start;" data-ke-size="size23" id="section-4">
<span style="background-color: #f6e199;"><b>ggplot 한글 깨짐 방지 및 해결 - 테마 설정</b></span></h3>

개발자모드로 'ggplot 한글 깨짐 방지 및 해결 - 테마 설정' 부분을 확인했더니 id에 section-4가 설정되어 있는 것을 알 수 있다.

이 id는 직접 설정할 수도 있지만, 지금 내가 사용하는 '한눈에 스킨'을 사용하면 자동으로 설정된다.

 

이제 목차에는 어떻게 링크가 달려있나 확인해보자.

<a href="#section-4">ggplot 한글 깨짐 방지 및 해결 - 테마 설정</a>

'ggplot 한글 깨짐 방지 및 해결 - 테마 설정' 부분의 id인 #section-4를 사용하여 링크한 것을 볼 수 있다.

 

여기까지 이해했다면, 혹은 이미 알고 있었다면 이제 특정 위치로 이동하는 외부링크 만드는 건 아주 쉽다.

특정 위치로 이동하는 외부링크url 만들기

https://내티스토리.tistory.com/글번호/#id

완전 쉽다. 이 글을 예로 들어본다. 이 글의 url은 다음과 같다.

https://oooo12.tistory.com/29

그리고 나는 이 글 중간에 있던 'id 가 중요하다(feat. HTML)'로 바로 이동하는 링크를 만들어 보려 한다. 먼저 id가 어떻게 걸려있는지 개발자모드로 확인해보자.

<h3 data-ke-size="size23" id="section-1"><b>id 가 중요하다(feat. HTML)</b></h3>

id가 'section-1'이다. 이제 다 끝났다.

https://oooo12.tistory.com/29/#section-1

위 링크를 클릭해보면 새창이 뜨면서  'id 가 중요하다(feat. HTML)' 로 이동할 것이다.

 

아래 글 최하단 링크에도 이 방법이 적용된 링크가 걸려있어서, 다른 글 중간으로 바로 이동한다.

[R언어 SOS]RStudio에서 Plot 한글 깨지는 경우 해결책. 맥 mac m1 유저