🔗 <a> 태그로 하이퍼링크 만들기

 

웹 페이지를 만들면서 가장 자주 쓰게 되는 태그 중 하나가 바로 <a> 태그입니다.
a는 anchor(닻)라는 의미로, 문서의 다른 위치나 외부 페이지로 하이퍼링크를 걸기 위한 태그입니다.

 

---

 

🧭 기본 사용법

<a href="https://example.com">예제 사이트로 이동</a>

• href : 이동할 URL 주소
• 링크 텍스트 : 사용자가 클릭할 수 있는 부분

 

---

 

🔍 target 속성 – 새 창에서 열기 vs 현재 창에서 열기

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

• target="_blank" : 새 탭(또는 새 창)에서 링크 열기
• target="_self" : 기본값, 현재 창에서 열림
• target="이름" : 지정된 이름의 창(또는 iframe)에서 열기

 

---

 

✉️ 이메일, 전화번호 링크로 연결하기

<a href="mailto:someone@example.com">이메일 보내기</a>  
<a href="tel:010-1234-5678">전화 걸기</a>

• mailto: : 이메일 클라이언트를 열어 메일 전송
• tel: : 전화 앱을 통해 전화 걸기 가능 (모바일에서 주로 사용)

 

---

 

🧩 URL Fragment (프래그먼트)

문서 내 특정 위치로 바로 이동하고 싶을 땐?
id 속성을 이용해서 내부 링크를 만들 수 있어요.

<!-- 목적지 -->
<div id="section1">이곳으로 이동합니다</div>

<!-- 링크 -->
<a href="#section1">섹션1으로 이동</a>

• href="#id값" : 같은 페이지 내에서 해당 ID를 가진 요소로 이동
• 자주 쓰이는 기능으로, 긴 페이지에서 목차나 탭 메뉴 등에 활용됩니다.

---

 

📝 마무리하며

하이퍼링크를 잘 활용하면 사용자 경험이 훨씬 좋아집니다.
특히 다양한 링크 기능을 알면 실무에서도 아주 유용하게 쓸 수 있어요!

저처럼 프론트엔드 개발을 준비하시는 분들께 조금이나마 도움이 되셨길 바랍니다 😊