Hyper link Tag

 

🟦 Hyper link Tag

 

• <a> (Anchor(닻)): 다른 페이지나 같은 페이지의 특정 위치로 이동할 때 사용하는 태그.
  
  • 특징: 인라인 요소로, 기본적으로 파란색 글씨에 밑줄이 그어진 형태로 나타난다.

 

🔸  핵심 속성

<a href="https://www.example.com/report.pdf" 
   target="_blank" 
   rel="noopener noreferrer" 
   title="보고서 PDF 다운로드" 
   download="report.pdf">
   보고서 다운로드
</a>

• href (Hypertext Reference): 이동할 대상 주소(URL)를 지정하는 필수 속성.
• target: 링크를 클릭했을 때 어디에서 열지 결정.
  • _self: 현재 창에서 열기. (생략 시 기본값)
  • _blank: 새 탭이나 새 창에서 열기.
  • _parent: 현재 프레임의 부모 프레임에서 링크 열기.
  • _top: 현재 브라우저 창의 최상위 프레임에서 링크 열기.
• title: 링크에 마우스를 올렸을 때 나타나는 풍선 도움말. (비슷한 속성으로 <alt>)
• download: 클릭 시 페이지 이동 대신 파일을 다운로드하도록 지시.

 

🔸  다양한 링크 경로 종류

• 외부 주소: <a href="https://yo-u-loo.tistory.com/"></a>
• 내부 파일: <a href="contact.html"></a>
• 페이지 내부 특정 id를 가진 요소로 이동 (앵커 링크): <a href="#section1"></a><h2 id="section1"></h2>
• 이메일 및 전화:
  • 이메일: <a href="mailto:이메일"></a>
  • 전화: <a href="tel:번호"></a>

 

 

📍  POINT 📍

✔️  <target="_blank">를 사용 시 보안을 위해 CSS 또는 JS에서 추가적인 처리를 고려할 것. ✔️ 

✔️  <img>와 <a>를 같이 사용하면 이미지 클릭 시 이동하는 이미지 링크로 만들 수 있다. ✔️

✔️ <href="#">은 새로고침으로 페이지 상단으로 가는 관습적인 표현. ✔️ 

 

 

📋 하이퍼링크 태그 속성 요약표 📋

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

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<a href="order.html">주문서 작성하기</a>

<a href="order.html"><img src="images/tangerines.jpg" alt="레드향"></a>

<a href="order.html" target="_blank">주문서 작성하기</a>

<ul>
      <li><a href="#info">레드향</a></li>
      <li><a href="#recipe">레드향 샐러드 레시피</a></li>
      <li><a href="#product">상품 구성</a></li>
</ul>
<h1 id="info">레드향</h1>
<h2 id="recipe">레드향 샐러드 레시피</h2>
<h2 id="product">상품 구성</h2>