본문으로 건너뛰기

<a> 태그

a 태그

<a> 태그는 다른 페이지로 이동하는 링크(Hyperlink)를 생성합니다.

여기서 a는 Anchor를 의미하며, 링크를 기반으로 콘텐츠를 구조화하는 웹 생태계의 핵심적인 역할을 합니다.


a 태그 주요 속성

a 태그에는 주로 href, target, rel 속성을 사용합니다.


  • href: 이동하는 페이지의 주소(URL) 지정
a 태그 사용법
<a href="https://www.codefriends.net">코드프렌즈 방문</a>

  • target: 링크를 클릭하면 페이지가 어떻게 열릴지 지정. 페이지를 새 창이나 탭에서 열려면 target="_blank" 사용
코드프렌즈 새 창에서 열기
<a href="https://www.codefriends.net" target="_blank">새 창으로 방문</a>

  • rel: 현재 페이지와 링크된 대상 사이의 관계를 지정. target="_blank"를 사용할 때는 보안을 위해 rel="noopener noreferrer"와 같이 사용하는데, 이는 새 창으로 열리는 페이지가 현재 페이지와 관계가 없다는 것을 뜻함
rel 속성 사용법
<a href="https://www.codefriends.net" target="_blank" rel="noopener noreferrer"
>안전하게 새 창으로 방문하기</a
>

a 태그 사용법

1. 외부 웹사이트 링크

클릭 후 외부 웹사이트로 이동합니다. 일반적으로 외부 웹사이트로 이동할 때는 target="_blank"를 사용해 새 창에서 열리도록 합니다.

외부 링크 이동
<a href="https://example.com" target="_blank">예시 웹사이트</a>

2. 문서 내 다른 섹션으로 이동

같은 페이지 내 id(#)로 지정된 다른 섹션으로 이동할 수 있습니다.

문서 내 이동
<a href="#section2">2번 섹션으로 이동하기</a>