[HTML] a태그를 이용한 문서 위치 이동

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 a태그를 활용하여 문서 내부 이동을 활용해보도록 하겠습니다.

해당 기능은 fragment identifier(#service)의 고유 기능인 앵커(anchor)로 웹페이지 내부에서 이동을 위해 사용합니다. 간혹 SPA에서 라우팅을 위해 해시를 사용하기도 합니다.

 

 

특정 id를 가진 엘레먼트 만들기

우선, 특정 id를 가진 엘레먼트를 만들어야 합니다.

<h2 id="title1">특정 id를 가진 엘레먼트 만들기</h2>

저는 위의 <h1>태그에 "title1"이라는 id를 넣도록 하겠습니다.

 

테스트를 위해 공백을 채워보겠습니다.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

 

<a href="#title1">제목으로</a>

그리고 a태그를 이용하여 제목으로 이동하는 링크를 만들어 보겠습니다.

제목으로

위의 링크를 한번 눌러보세요.

제목이 위치한 곳으로 자동으로 스크롤이 이동할 것입니다. ㅎㅎ

 

 

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/a