HTML - anchor 요소

HTML의 <a> 요소는 현재의 페이지에서 다른 페이지로 이동하기 위해 사용하는 요소이다. 우리가 흔히 말하는 링크를 만들 수 있는 대표적인 요소다.

 <a href="" ></a>

 

인라인 요소로 작용하는 <a> 태그는 href 속성과 같이 써야 온전하게 쓸 수 있다.
href는 링크를 클릭했을때 보내고 싶은 엔드 포인트를 작성해줘야 한다. 태그 사이에는 엔드포인트를 명시적으로 작성해야한다.

<a href="https://www.w3schools.com/html/">W3Schools HTML Tutorial</a>
<a href="#top">페이지 상단으로 이동</a>
<a href="mailto:cdh0283@gmail.com">cdh0283@gmail.com 메일보내기</a>
<a href="tel:8005551212">전화걸기</a>

 

기본적으로 웹사이트 URL을 작성하면 그 주소로 이동한다. 
#을 작성하거나 #top를 작성하면 현재페이지의 최상단으로 이동하게 된다.
mailto:(메일주소)를 작성하면 outlook이나 메일을 보낼 수 있는 어플리케이션이 동작된다.

tel:(전화번호)를 작성하면 해당번호로 전화를 걸 수 있다. 

이미지를 넣어서 링크를 만들어 줄 수도 있다.

<a href="https://www.apple.com/"
      title="애플 홈페이지로 이동"
      target="_blank"
      rel="noopener noreferrer">
      <img
        src="/src/assets/apple/apple_watch.jpeg"
        alt="애플워치"
        width="200"
        height="142" />
    </a>

 

해당 코드를 보면 title과 target 속성을 확인할 수 있다.
title 속성을 사용하면 마우스를 올렸을 때 툴팁같이 텍스트를 볼 수 있다.
target 속성은 클릭했을때 어떤 창에서 열릴지 결정하는 속성이다.

값	설명
_self	(기본값) 현재 창에서 링크 열기
_blank	새 탭 또는 새 창에서 링크 열기
_parent	현재 프레임이 있다면 상위 프레임에서 열기
_top	현재 프레임이 있다면 최상위 창에서 열기
framename	특정한 이름을 지정해 해당 프레임에서 열기

 

target="_blank" 사용할 때 주의할 점이 있다.

 

target="_blank"로 새 창에서 열리면, 새 창에서 window.opener를 통해 원래 창의 JavaScript 객체에 접근할 수 있다.

악성 사이트가 window.opener.location을 변경하여 피싱 공격을 할 수도 있다.

 

이런 문제를 해결하기 위해 target="_blank" 사용할 때 rel="noopener noreferrer" 속성을 사용하면 된다.

noopener는 새창에서 원래 창으로 접근하지 못하도록 막는 역할을 하고

noreferrer는 HTTP Referer 정보(사용자가 어디에서 왔는지)를 새 창에 전달하지 않는다.
대부분의 최신 브라우저는 noopener가 자동으로 적용되지만 구형 브라우저를 쓰는 상황이 있을 수 있으므로 명시적으로 사용하는게 좋다.