HTML_앵커태그(Anchor)

<a>태그

다른 문서로 이동할 수 있는 링크를 생성한다.

 

herf속성

href : 링크의 목적지가 되는 URL을 지정한다. (하이퍼레퍼런스)

ex: <a href="https://nossodia.tistory.com">Click!</a>

앵커태그 사이의 Click!을 누르면 href 속성의 값="URL"로 이동합니다.

target 속성

링크된 리소스를 어디에 표시할지 나타냅니다.

속성값으로 _self, _blank가 대표적이며 타겟 속성을 지정하지않는경우 self 방식으로 동작합니다.

self : 우리가 보고 있던 화면 자체를 외부 링크 페이지로 이동합니다.

blank : 빈 창(새 탭)에 외부 링크 페이지를 표시합니다.

ex: <a href="https://nossodia.tistory.com" target="_blank">Click!</a>

위의 _blank 속성값을 지정하지 않았을때와 비교해보시면 _blank를 지정한 경우 기존 창이 아닌 새탭으로 링크를 불러온 것을 확인 할 수 있습니다.

---

내부링크

<a>태그는 꼭 외부페이지로만 이동하는 것은 아닙니다.

<a>태그를 통해 페이지 내부의 특정 요소로 초점을 이동하기도 하며 이를 내부링크라고 부릅니다.

내부링크를 사용할 때는 href 속성 값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 입력합니다.

보통 페이지 내용이 많아 스크롤이 길어지는 경우 빠르게 화면 상단으로 이동하기 위해 내부링크를 사용합니다.

ex: <a href="#top">최상단으로 이동하기</a>

"최상단으로 이동하기"를 클릭하면 ID 속성값이 top인 내부의 특정요소로 초점을 이동합니다.