[ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서

앵커 태그는 다른 문서로 이동하거나, 같은 문서의 특정 위치로 이동하거나 혹은 다른 문서의 특정 위치로 이동하는데 사용됩니다.

 

[ 문법 ]

1. 다른 문서로 이동하려는 경우, href 속성에 이동하려는 문서의 경로 혹은 URL을 넣고 “링크 텍스트”를 클릭하면 해당 문서로 이동하게 됩니다.

01 	<a href="url">링크 텍스트</a>
02 	<!-- 예 -->
03 	<a href="https://google.com">구글로 이동</a>
04 	<a href="../test.html">test 문서 열기</a>

 

 

2. 같은 문서의 특정 위치로 이동하려는 경우(내부 링크), href에 #를 이용해서 id값을 지정하고 이동하고자 하는 태그에 같은 id값을 써주면 된다.
여기서 “Section 1로 이동”을 클릭하면 화면이 스크롤 하면서 해당 위치로 이동하게 됩니다.

01 	<a href="#section1">Section 1로 이동</a>
02 	...
03 	...
04 	...
05 	<h1 id="section1">Section 1</h1>

 

 

3. 다른 문서의 특정 위치로 이동하려는 경우 위의 1, 2번에서 설명한 것을 모두 사용하면 됩니다.
즉 href의 url끝에 id를 추가해주면 url의 문서로 이동한 후 id값이 있는 곳을 스크롤 됩니다.

01 	<!-- test1. html -->
02 	<a href="https://test.com/test2.html#Section1">test2.html로 이동</a>

 

01 	<!-- test2. html -->
02 	...
03 	...
04 	...
05 	<h2 id=”Section1” >test.html에서 이동해 오는 곳</h2>

 

 

앵커 태그는 인터넷이 지금처럼 발전할 수 있도록 하는데 기반을 만들어 준 태그입니다. 
초창기 인터넷은 문서의 특정 단어나 문장을 클릭하면 링크된 문서로 이동하는 기능을 이용해서 학자들 간 논문이나 문서를 효과적으로 사용하기 위해 개발되었습니다.
그것이 발전을 거듭해 지금의 거대한 인터넷이 된 것이지요. 만일 앵커 태그가 없었다면 불가능한 일이었을 겁니다.

 

 

<a> - Anchor 태그 사용 설명서