본문 바로가기
HTML&CSS

[HTML] #,a 클릭하면 원하는 위치로 이동하기

by dev또리 2023. 6. 9.
728x90

 

기본적으로 다른 페이지로 이동이 가능한 링크 걸기는 많이 쓰이는 태그의

대표적인 것으로 <a href=""> 태그가 있다.

하지만 a태그에 단순 url만 삽입은 페이지 간의 이동이 될 뿐이고, 같은 페이지 안에서 특정 위치로 이동 또는 다른 페이지의 특정 위치로의 이동은 조금 더 섬세하면서도 세밀한 작업이 필요하다.

 

 

 

# 으로 이동하

 

- id를 이용한 방법

 

 <a href="#id이름"> id이름으로 이동</a>을 html에서 태그를 걸어주고,

이동할 위치에 <div id="id이름"> 이동할 위치입니다.</div> 태그를 삽입하면 특정 위치로 이동이 된다.

 

<a href="#id이름"> id이름으로 이동</a>
<div id="id이름"> 이동할 위치입니다.</div>

 

 

- name을 이용한 방법

 

 

<a href="링크주소#이름"> 지정한 이름으로 이동 </a>처럼 링크주소 바로 뒤에 특정 위치로 이동할 #이름을 붙여준다.

그리고 이동될 위치에 <a name="이름"> 이동할 위치입니다.</a> name태그를 삽입해주면 현재 페이지든 다른페이지든

내가 원하는 특정한 위치로 이동되니 쉽고 편리하게 애용될 수 있는 방법이다.

 

<a href="url#이름"> 지정한 이름으로 이동 </a>
<a name="이름"> 이동할 위치입니다.</a>
728x90

댓글