HTML 앵커 태그 <a> 완벽 정리

1. 기본 구조

<a href="링크주소">링크 텍스트</a>

• href 속성: 이동할 목적지를 지정합니다.
• 링크 텍스트: 사용자가 클릭하는 부분입니다.

2. 주요 속성

• href: 이동할 URL이나 경로 지정
  • 절대 경로: https://example.com/page.html
  • 상대 경로: ./page.html
• target: 링크를 여는 방식
  • _self: 현재 탭에서 열기 (기본값)
  • _blank: 새 탭에서 열기
  • _parent: 부모 프레임에서 열기
  • _top: 최상위 프레임에서 열기
• title: 링크 위에 마우스를 올렸을 때 표시되는 풍선 설명
• download: 링크 클릭 시 파일 다운로드 유도
• rel: 현재 문서와 링크 문서의 관계
  • 예: rel="noopener noreferrer" (보안상 새 탭 열기 시 자주 사용)
  • 예: rel="nofollow" (검색엔진 최적화 관련)

3. 활용 예시

(1) 외부 사이트 링크

<a href="https://www.google.com" target="_blank">구글로 이동</a>

(2) 같은 페이지 내 특정 위치로 이동 (앵커 링크)

<a href="#section1">섹션 1로 이동</a>
<h2 id="section1">섹션 1</h2>
<p>내용...</p>

(3) 이메일/전화 연결

<a href="mailto:example@email.com">이메일 보내기</a>
<a href="tel:+821012345678">전화 걸기</a>

(4) 파일 다운로드

<a href="files/sample.pdf" download>PDF 다운로드</a>