<a>태그로 간단하게 문서 내로 이동하기

블로그에서 보면 목차를 누르면 해당 목차로 스크롤이 내려가거나 올라가는 것을 쉽게 볼 수 있다. html언어를 배우기 전에는 마냥 신기하고 어려워보였는데, <a> 태그로 쉽게 할 수도 있다는 것을 알게 되었다. 몇가지 속성만 알고 있다면 말이다.

---

<a> 태그의 특성

<a> 태그는 href(hypertext reference : 참조) 속성이 있는데, 이 속성을 넣어줘야 다른 링크로도 갈 수 있고 내가 원하는 곳으로 이동시켜준다. 아래 쿠팡배너처럼 누르면 쿠팡으로 이동하는 것도 다 html언어의 <a href=""> 속성인 것이다.

 

 

내부문서 최상단으로 가기

<a href=""> 쌍따옴표 안에는 무조건 링크만 포함되는 것이 아니라, "#이름" 처럼 표기하여 내부로 이동할 수 있다. 즉, 목차 선택처럼 이동가능하다. 예를 들어 브라우저의 스크롤이 최상단으로 가기 위해서는 아래와 같은 코드를 넣을 수 있다.

 

<a href="#">최상단으로</a>

 

▲ 위의 출력값 (브라우저의 최상단으로 가게함)

최상단으로

 

<a>태그로 내가 원하는 위치로 가기

<h3 id="move"> a태그의 특성 </h3>
<a href="#move"> 최상단이동 </a>

 

위의 코드처럼, 내가 원하는 위치인(a태그의 특성)으로 이동시키려면 해당 태그 안에 id="id값"을 지정해주고, 그 id와 <a href="#id값"> 처럼 같은 값을 넣어줘야 이동할 수 있다. *이때 <a> 태그에만 #을 넣어준다.

 

▲ 위의 출력값 (목차 1로 이동)

목차1으로 이동