HTML '<a>'태그 : 하이퍼링크 생성과 활용

html의 <a>(anchor)태그는 하이퍼링크를 생성하는 데 사용되며, 사용자를 다른 웹페이지로 이동하거나 동일한 페이지 내에서 특정 위치로 스크롤할 수 있도록 합니다. 특히 웹의 네비게이션을 구축하는데 핵심적인 역할을하는 태그입니다.

 

사용법

<a href="URL 또는 경로">링크 텍스트</a>

href : 링크가 이동할 URL 또는 경로를 지정합니다.

링크 텍스트 : 사용자에게 보여질 클릭 가능한 텍스트를 지정합니다. (이미지도 가능 <img>)

<a href="https://illuy.tistory.com/" target="_blank">새 창에서 열기</a>

또한 target속성을 활용해서 링크를 열 위치를 나타내는 속성으로 사용합니다.

• _blank : 새창 또는 새탭에서 열립니다.
• _self : 현재창 또는 현재탭에서 열립니다.
• _parent : 부모프레임에서 열립니다.
• _top : 전체 브라우저 창에서 열립니다.

만약 속성을 명시하지 않았을때에는 _self로 간주되어 링크를 클릭하면 현재창 또는 현재탭에서 새로운 URL이 열립니다.

 

현재 페이지 내에서 문서 내이동

<section id="about">
    <!-- About 섹션 내용 -->
</section>

 

그리고 <a>태그에 링크 추가

<a href="#about">About 섹션으로 이동</a>

도착지에 id를 입력하고 클릭할 부분을 a태그에 #이름을 작성시 도착할 id로 이동합니다.

도착지 : <section id="about"> 

 

+ css를 활용하면 문서내에서 부드럽게 스크롤되며 이동할수 있습니다.

html {
    scroll-behavior: smooth; /* html내에서 이동시 부드럽게 */
    }