티스토리 책갈피(앵커태그,하이퍼링크) 이미지 시작 텍스트 이동 html 코드

안녕하세요! 이미지를 시작점으로 해서 텍스트가 있는 곳으로 이동하는 앵커태그, 하이퍼링크 태그의 경우는 생각보다 쉽지 않고, 지저분한 느낌이 없잖아 있습니다. 그럼에도 시도해보고 싶은 분들을 위하여 몇가지 htlm 코드를 남겨드리면 다음과 같습니다.

 

 

 

기본적으로 

 

<a href="#c1">1.서론</a></br>
<a href="#c2">2.본론</a></br>

 

이와같이 시작점의 코드를 임의 생성해 볼 수 있습니다. 목차를 넣고, 해당 세부 제목을 누르면 목적한 지점으로 이동시키는 코드입니다. 

 

 

여기서) 종료지점에 대한 html 코드가 필요하겠죠. 

 

<p id="c1" 이동할 텍스트</p>
<p id="c2">이동할 텍스트</P>

 

아이디를 넣고, 종료지점의 대표적인 텍스트를 지정하면 이동할 지점으로 목차에서 누르면 이동이 가능합니다. 그렇다면, 너무 텍스트 베이스로 진행을 하게되면 무미건조한 느낌이 있어서 이미지를 목차로 넣고 이동할 지점을 넣고 싶어하는 분들도 있을 것입니다. 

 

 

이런 경우에는 "ending-point" 태그를 통해서 좀더 기술적으로 작업이 가능합니다. 하지만, 저도 해봤지만, 뭔가 기대한 것 만큼 즐겁게 나오지 않는다는 것을 경험을 통해서 확인해봤습니다. 아무리 얘기를 해도 직접 경험해보시면 어떤 내용인지를 알 수 있을 것 같아 정리해드립니다. 

 

 

 

[시작지점 html 코드]

 

<a href="#ending-point">
   <img src="path/to/your/image.jpg" alt="이미지 설명">
</a>

 

예를들면, 이렇습니다. 

 

<a href="#ending-point">
   <img src="https://tistory2.daumcdn.net/tistory/941631/skin/images/1.PNG" alt="1">
   <p>1번이미지</p></br>

 

<a href="#ending-point">
   <img src="https://tistory4.daumcdn.net/tistory/941631/skin/images/2.PNG" alt="2">
   <p>2번이미지</p></br>

 

다만, 목차가 하나가 아니라 여러개의 경우는 줄지어 세울 수 없으니 줄바꿈 </br> 을 넣어서

끊어주면 됩니다. 

 

 

[종료지점 html 코드]

 

<h2 id="ending-point">내 제목</h2>

이렇게 넣어도 되고,

 

<p id="ending-point">내 제목</p>

 

해당되는 지점에 티스토리 기본모드 > HTML로 전환하여 저 코드를 넣고 맞게 수정하면 되는 것입니다. 간단해 보여도 직접해보시면 시간을 좀 잡아먹는 간단 코드입니다. 

 

 

아래에는 실제로 적용한 앵커태그 시현 화면입니다.

 

https://blogad.tistory.com/801