개념

다른 페이지, 같은 페이지 위치(#), 파일, 이메일 주소, 전화번호 등 다른 URL로 연결할 수 있는 하이퍼링크를 설정. (Anchor, 외부로 내보내기)

속성(Attribute)

href

• 의미: URL 링크

rel

• 의미: 현재 문서와 링크 URL의 관계

  속성값	설명
  alternate	프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄
  author	해당 문서의 저자에 대한 링크를 나타냄
  bookmark	즐겨찾기에 사용하는 고유 주소를 나타냄
  next	연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄
  prev	문서들 중에서 이전 문서를 나타냄
  noreferrer	사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 나타냄
  noopener	하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener) 여서는 안 됨을 나타냄
  search	해당 문서를 위한 검색 도구를 나타냄
  tag	현재 문서를 위한 키워드(tag)를 나타냄

<aside> ⚠️ *target="_blank" 링크를 사용하는 사람들은 일반적으로 다음과 같은 사실을 전혀 모릅니다.

<a> 태그에 링크된 페이지는 window.opener 객체를 통해 링크 페이지에 부분적으로 접근할 수 있습니다. 그러면 새로 열린 탭에서 window.opener.location을 일부 피싱 페이지로 변경할 수 있습니다. 사용자는 이미 열려 있는 페이지를 신뢰하므로 의심을 받지 않습니다.

이를 방지하기 위해서는 rel="noopener noreferrer" 속성값을 추가해 주면 됩니다.*

</aside>

Target="_blank" - the most underestimated vulnerability ever

target

• 의미: 링크 URL의 표시(브라우저 탭) 위치

  속성값	설명
  _blank	새 창
  _self	현재 창, 기본 값
  _parent	현재 프레임의 부모 프레임에서 새 창
  _top	최상위 프레임에서 새 창

<aside> 💡 *_parent : 만약 어떤 창 A에서 창 B를 새로 열었습니다. 그런데 B에서 _parent로 창을 열면 창 A에서 열리게 됩니다. _top : 최상위 프레임에서 열립니다. _parent와 비슷하지만, _parent는 바로 이전창(부모창)에서 열리는 반면 _top은 최상위(가장 최고 부모)창에서 열립니다.*

</aside>

download

• 의미: 사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠가 다운로드됨을 명시합니다.
• 값: 지정할 파일 이름
• 이 속성은 반드시 href 속성이 있어야만 사용할 수 있습니다.
• 만약 download 속성의 속성값을 생략하면, 다운로드되는 파일의 원래 이름이 사용됩니다.

<a href="/examples/images/tcpschool_logo.png" download>
  <img src="/examples/images/tcpschool_logo.png" alt="tcpschool" width="196" height="26">
</a>