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>
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!