HTML : a 와 하이퍼링크

HTML : a와 하이퍼링크

 

<a> : anchor (닻)

---

• href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일 , 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만들 때 사용한다.
• <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.
• 별도의 스타일링을 하지 않아도 파란색 글씨에 밑줄이 그어져 있는 게 기본값이다.

 

---

예시

---

You can reach Michael at:

• Website
• Email
• Phone

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

 

---

절대 경로

---

• 현재 위치와 관련 없이 절댓값의 위치로 이동함 (언제 어디에서 이동하든 같은 경로)

<a href="http://www.google.com/">google</a>

 

상대 경로

---

• 현재 위치를 기준으로 목적지까지의 경로를 작성한다.
  • ../ : 상위 디렉터리
  • ./ : 현재 위치의 디렉터리

<a href="../.././~html">경로</a>

 

---

<a> 속성

herf

---

• 하이퍼링크가 가리키는 URL 링크는 HTTP 기반 URL(http, https) 일 필요는 없고, 브라우저가 지원하는 모든 URL스킴을 사용할 수 있다.
  • 페이지 구획을 가리키는 Fragment URL
  • 미디어 파일 일부를 가르키는 미디어 Fragment
  • tel : URL을 사용하는 전화번호
  • mailto : URL을 사용하는 이메일 주소
  • 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.reqisterProtocolHandler()를 통해 지원할 수 있다. 

이메일 / 전화

send me email
(111) 1111

<a href="malito:aaa@email.com">send me email</a>
<a href="tel:111-1111">(111) 1111</a>

• 이메일/전화는 현재 사용하는 기기에서 메일 프로그램/ 전화 프로그램을 이용하여 연결한다.
• 이메일 : mailto → PC안의 메일 프로그램이 실행된다.
• 전화 : tel → PC 내의 전화 프로그램이 실행된다.

 

target

---

• 링크한 URL을 표시할 위치 → 목적지를 어디에 띄울 건지 정할 수 있다.
  • _self : URL을 현재 페이지에서 이동한다 (기본값)
  • _blank : URL을 새창에서 표시한다.

 

예시 _blank

google

<a href="www.google.com" target="_blank">google</a>

• 참고 : target을 사용할 때, rel="noreferrer"을 추가해 window.opner API의 악의적인 사용을 방지할 수 있다.
  1. noopener : 새로 열린 페이지에서 window.opner가 존재하지 않게 한다.
  2. noreferrer : noopener와 기능은 동일하나 다른 페이지를 탐색할 때 브라우저가 참고 웹 페이지의 주소를 보내지 못하게 한다
     • 쉽게 설명하면 링크를 클릭할 때 참조자 정보를 숨긴다.
     • 누군가 자신의 웹페이지 링크를 게시했을 때 noreferrer 값이 포함된 링크를 클릭하면 해당 사용자가 어디에서 왔는지 알 수 있는 방법이 없다.

예시 

google

<a href="http://www.google.com" target="_blank" rel="noopener noreferrer nofollow">google</a>

 

---