🔗 13. HTML `a` 태그 완전 정복 — 링크 하나에도 숨겨진 디테일이 많다

---

HTML에서 가장 기본이 되는 태그 중 하나인 a 태그.
하지만 실제로 프로젝트를 하다 보면 단순한 링크를 넘어서
다운로드, 새창 열기, 미디어 타입 설정 등 다양한 활용을 하게 된다.
이번에 다시 정리하면서 디테일한 부분까지 한번 짚어봤다.

---

✅ 기본 사용법

<a href="https://www.example.com">방문하기</a>

• href: 이동할 URL을 지정
• 클릭하면 해당 링크로 이동함

---

✅ 다양한 속성들

1) download

링크를 클릭했을 때 해당 리소스를 다운로드하게 만든다.

<a href="image.jpg" download>이미지 다운로드</a>

• 파일 이름도 지정할 수 있음 (download="customname.jpg")

---

2) target

링크를 어디서 열지 결정하는 속성

• _self: 기본값, 현재 창에서 열기
• _blank: 새 창(또는 새 탭)에서 열기
• _parent: 부모 프레임에서 열기
• _top: 최상위 창에서 열기

<a href="https://www.example.com" target="_blank">새 탭에서 열기</a>

Tip: 보안을 위해 _blank를 사용할 때는 rel="noopener noreferrer"를 같이 써주자!

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

---

3) rel

현재 문서와 링크 문서 간의 관계를 설명하는 속성

• noopener: 새 창에서 열 때 부모 페이지 접근 차단
• noreferrer: Referer 정보를 보내지 않음
• nofollow: SEO에 영향을 주지 않음

---

4) 미디어 타입

media 속성으로 디바이스 조건을 걸 수도 있다.

<a href="video.mp4" media="screen and (max-width: 800px)">작은 화면에서만 비디오 링크 활성화</a>

---

✅ 페이지 내부 이동 (Anchor)

<a href="#section1">섹션 1로 이동</a>

<section id="section1">
  <h2>섹션 1</h2>
</section>

• #id를 이용해 문서 내 특정 위치로 점프할 수 있다.

---

✅ 요약

속성	설명
href	링크할 대상 URL
download	클릭 시 파일 다운로드
target	링크 열 위치 설정
rel	문서 간 관계 설정
media	링크 활성화 조건 설정

---

📝 내가 느낀 점

처음에는 a 태그는 그냥 링크 정도로만 생각했는데,
보안이나 SEO, UX 측면까지 고려하면 꼼꼼하게 속성을 다루는 게 진짜 중요하다는 걸 알게 됐다.
특히 noopener를 안 쓰면 보안 문제가 생길 수 있다는 건 이번에 새롭게 알게 된 사실이었다.

---

✍️ "링크 하나에도 보안, 성능, UX가 녹아 있다."