하이퍼링크 (a)
하이퍼링크 (Hyperlink)와 a 태그
웹(Web)이 왜 "거미줄"이라고 불릴까요? 바로 전 세계의 문서들이 하이퍼링크(Hyperlink)를 통해 얽히고설켜 있기 때문입니다.
<a> (Anchor) 태그는 마치 마법의 공간 이동 포탈처럼 클릭 한 번으로 사용자를 다른 페이지나 웹사이트, 심지어 모바일의 통화/이메일 앱으로 순간이동시켜 줍니다.
1. 하이퍼링크의 핵심 속성(Attributes)
단순한 페이지 이동부터 새 창 열기까지, <a> 태그의 동작을 결정하는 필수 속성들입니다.
| 속성명 | 사용 예시 | 설명 및 역할 |
|---|---|---|
href |
href="https://google.com" |
(필수) 이동할 목적지의 URL이나 문서 내 앵커(#)를 지정합니다. |
target |
target="_blank" |
링크를 클릭했을 때 열릴 위치를 지정합니다.
|
title |
title="새 창에서 열기" |
마우스를 올렸을 때 나타나는 툴팁(Tooltip) 텍스트를 제공하여 접근성을 높입니다. |
rel |
rel="noopener noreferrer" |
새 창(_blank)을 열 때 발생할 수 있는 악의적인 해킹(피싱)을 방지하기 위한 보안 속성입니다.(새로 열린 창에서 원래 페이지를 몰래 조작하지 못하게 연결을 끊어주는 안전장치 역할을 합니다.) |
2. 모바일 친화적인 특수 하이퍼링크
현업에서 자주 사용되는 모바일 기기 맞춤형 딥링크(Deep Link) 방식입니다.
tel:- 스마트폰에서 클릭 시 즉시 전화 다이얼 앱을 엽니다. (예:href="tel:010-1234-5678")mailto:- 클릭 시 기본 이메일 작성 앱을 띄웁니다. (예:href="mailto:contact@minstudio.com")
3. 하이퍼링크 실습
버튼 스타일의 링크와 특수 기능 앵커 태그가 브라우저에서 어떻게 동작하는지 테스트해 보세요.