Hyper link tag and property

하이퍼링크는 단순히 다른 페이지로 이동하는 기능을 넘어, 이메일 보내기, 전화 걸기, 특정 위치로 이동하기 등 다양한 연결 기능을 수행합니다.

---

1. <a> 태그의 정의와 기본 구조

<a>는 **Anchor(닻)**의 약자로, 현재 위치에서 다른 위치로 연결(Link)을 고정한다는 의미를 담고 있습니다.

• 기본 문법: <a href="주소">표시될 텍스트</a>
• 특징: 인라인 요소이며, 기본적으로 파란색 글씨에 밑줄이 그어진 형태로 나타납니다.

---

2. 필수 및 주요 속성 (Attributes)

링크의 목적지와 동작 방식을 결정하는 핵심 설정들입니다.

• href (Hypertext Reference): 이동할 **대상 주소(URL)**를 지정하는 필수 속성입니다.
• target: 링크를 클릭했을 때 어디에서 열지 결정합니다.
  • _self: 현재 창에서 엽니다. (기본값)
  • _blank: 새 탭이나 새 창에서 엽니다.
• title: 링크에 마우스를 올렸을 때 나타나는 풍선 도움말입니다.
• download: 클릭 시 페이지 이동 대신 파일을 다운로드하도록 지정합니다.

---

3. 다양한 링크 목적지 종류

href 속성에는 웹 주소뿐만 아니라 여러 가지 경로를 넣을 수 있습니다.

• 외부 주소: href="https://www.google.com"
• 내부 파일: href="contact.html"
• 페이지 내 앵커: href="#section1" (특정 ID를 가진 요소로 순간 이동)
• 이메일 및 전화:
  • 이메일: href="mailto:help@example.com"
  • 전화: href="tel:01012345678"

---

4. 실전 예제 코드: "종합 링크 세트"

HTML

 

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

<a href="#top">맨 위로 가기</a>

<a href="manual.pdf" download>설명서 다운로드</a>

<a href="mailto:admin@test.com">문의하기</a>

---

📋 하이퍼링크 주요 속성 요약

속성	역할	주요 값
href	연결할 대상의 경로	URL, ID, 파일명, 연락처
target	링크가 열릴 위치	_blank, _self
title	부가 설명 툴팁	자유로운 텍스트
download	링크 대상을 내려받음	(파일명 지정 가능)

---

학습 정리

• **target="_blank"**를 사용할 때는 보안을 위해 CSS나 JS에서 추가적인 처리를 고려하는 것이 좋다.
• 이미지 태그(<img>)를 <a> 태그로 감싸면 이미지를 클릭했을 때 이동하는 '이미지 링크'를 만들 수 있다.
• **href="#"**은 페이지 상단으로 가는 관습적인 표현으로 자주 쓰인다.

---

웹의 연결 고리인 하이퍼링크 태그를 마스터하셨습니다!

---