본문 바로가기
블로그&인터넷/티스토리

HTML 내부에서 이동하는 링크 만드는 방법

by INKman 2022. 6. 17.
반응형

티스토리 본문에서 페이지 이동 없어 같은 페이지 내에서 이동을 하는 링크 만드는 방법으로 이는 목차를 만들 때 많이 사용을 하는데 서론, 본론, 결론이 있을 때 서론 본론은 필요가 없고 결론만이 필요할 때 책갈피 링크를 이용하여 최상단에서 본론으로 바로 넘어갈 수가 있습니다.

 

목차

 

 

1. 서론

<a href="#1">서론</a>
<a name="1">1. 서론</a>

목록이 있을 때 해당 목록에는 링크를 만드는데 <a href="#1"> 문구 </a> 일반 하이퍼링크랑 같이 만들되 인터넷 주소가 아닌 '#텍스트'로 주소를 대체하여 목적지는 <a name="1"> 문구 </a> HTML를 작성하며 #은 빼고 만듭니다.

 

숫자 1로 입력한 값은 같은 텍스트면 무엇이든 상관이 없으며 같은 글이 들어가면 됩니다. #1을 클릭했을 때 1의 위치로 이동하게 됩니다.

 

 

 

2. 본론

목적지 해당 문구에  <a> 내부링크를 적용하게 되면 브라우저 상단에 붙어버려 개인적으로 가독성이 떨어지는 느낌입니다.

 

 

<p data-ke-size="size16"><a name="본론"></a></p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">2. 본론</p>

내부 링크 목적지를 설정할 때 태그 사이에 텍스트가 들어가지 않아도 아무런 상관이 없기에 목적지와 내가 보여주고자 하는 내용과 상단에 2칸 정도는 텀을 주는 것을 좋아합니다.

 

 

브라우저 상단과 적당한 거리가 생기기 때문에 가독성이 훨신 좋은듯합니다.

 

 

3. 결론

목적지는 a 태그에 name아니어도 가능이한데 ID로도 이동을 할수가 있습니다.

<li><a href="#id">결론</a></li>


<div id="id">3. 결론</div>

id를 적용할 수 있는 div, span, p 등등 거의 모든 태그에서 적용이 가능하기 때문에 따로 a 태그를 만들지 않더라도 구간 별로 id가 적용되어있다면 링크생성만으로 쉽게 적용할 수 있습니다.

반응형

댓글0