HTML

a 태그 특정 위치로 이동하기

okc no1 2020. 12. 5.
반응형

이제 a태그를 통해서 페이지를 이동하게 되면, 최상단으로 가게 되는데 해당 문서에서 특정 위치나, 다른 페이지에서 특정 위치로 가는 방법이 있습니다. 물론, JS 등을 사용해서 이동하는 방법도 있겠지만, a태그를 통해서 간단하게 이동이 가능합니다.

 

1. 같은 페이지에서 특정 위치 이동

<a href="#box">박스 영역으로 이동</a>
<div id="box">
	여기는 박스 영역
</div>

위의 a태그에서 href에 #ID 영역만 작성하게 되면, 바로 이동이 가능합니다. 

 

2. 다른 페이지에서 특정 위치로 이동

<a href="URL/#">이동</a>

위의 a태그에서는 특정 위치로 이동하려는 사이트 + 그 섹션이 있는 ID값을 같이 기재해주면 a태그에서 이동하려는 URL과 해당 섹션으로 자동으로 포커스가 이동이 됩니다. 

 

a태그 특정위치로 이동

이동된 사이트는 제가 플레이하는 일루전커넥트 홈페이지인데, 위의 내용과 같이, 태그를 기입하면 원하는 ID값이 있는 섹션으로 이동이 가능합니다.

반응형

댓글

💲 추천 글