하이퍼링크

<a> 앵커 태그는 href 속성과 함께 하이퍼링크를 만든다. 링크는 인터넷의 근간이다.

1. href 속성

필수는 아니지만 거의 대부분 <a> 태그에서 찾을 수 있다. 하이퍼링크의 주소를 제공하면 <a>가 링크로 변환된다. href 속성은 현재 페이지, 사이트 내 다른 페이지 또는 다른 사이트 내 위치에 하이퍼링크를 만드는 데 사용된다. 또한 파일을 다운로드하거나 이메일을 전송하기 위해 코딩되어야 할 특정 주소로 이메일을 전송하기도 한다.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

1-1. a 태그는 웹사이트(URL)로 하이퍼링크를 연결하게 되면 절대경로를 사용한다.

  <a href="https://likelion.net/school">태킷 프론트엔드 스쿨 (부트캠프)</a>

1-2. target 속성

target 속성을 이용하여 현재 페이지에서 다른 페이지를 보여주거나 새창을 열어 다른 페이지를 보여주기도 한다. 일반적으로 default로 _self 값을 가진다. _self는 현재 페이지에서 다른페이지를 보여준다. 새창으로 이동은 target="_blank" 속성값을 가진다.

✅ target 속성 값으로 _blank 설정되어 있을 경우는 rel 속성의 값으로 noopener noreferrer를 지정해야 한다.

<a href="https://www.naver.com" target="_blank" title="네이버로 이동합니다." rel="noopener noreferrer">네이버</a>
<a href="https://www.daum.net" target="_blank" title="다음으로 이동합니다." rel="noopener noreferrer">다음</a>

❓❔ target 속성 사용 시 rel 속성으로 noopener noreferrer를 지정해야 하는 이유

궁극적인 이유는 보안과 성능 문제를 방지하기 위해서이다.
target="_blank" 는 링크를 클릭했을 때 새로운 탭이나 창을 열도록 설정하는데, 이때 새로 열린 페이지가 원래 페이지의 window 객체에 접근할 수 있다. 이렇게 되면 원래 페이지의 내용을 조작하거나, window.opener 객체를 통해 악성 스크립트를 실행할 수 있는 취약점이 발생할 수 있다. 이를 탭 납치(Tabnapping)라고도 부른다.

1. rel="noopener" (보안 문제 해결)

• noopener는 새로운 탭에서 열리는 페이지가 원래 페이지의 window.opener 객체에 접근하지 못하도록 한다. 이렇게 하면 새 텝이 열리더라도 원래 페이지와의 연결이 차단되어 보안 취약점이 해결된다.

2. rel="noreferrer" (추가적인 프라이버시 보호)

• noreferrer는 브라우저가 링크 클릭 시 참조 정보(referrer)를 새로 열린 페이지에 전달하지 않도록 한다. 보통 웹 페이지를 이동할 때, 원래 페이지의 URL 정보가 새 페이지에 전달되는데, 이 속성을 사용하면 프라이버시 보호가 강화된다.
• 또한 noreferrer는 기본적으로 noopener와 같은 기능도 포함하고 있어, 보안 및 프라이버시를 동시에 강화한다.

✅ 새창으로 이동

<a href="https://github.com/dnqls9875" target="_blank">우빈님의 Github</div></a>

1-3. title 속성

title 속성은 모든 태그에서 사용 할 수 있는 전역 속성이다. 하지만 a태그와 가장 궁합이 좋다. 접근성 관점에서 링크 적절한 타이틀을 입력하는게 좋다. title은 보조적인 역할을 담당한다. 설명에 주가 되서는 안된다.

❓❔ a 태그 title 속성을 입력 시 접근성 측면에서 중요한 이유

1. 스크린 리더 사용자에 대한 정보를 제공할 수 있기 때문이다. 시각 장애나 저시력 사용자들은 화면의 콘텐츠를 시각적으로 확인 할 수 없다. 그렇기 때문에 스크린 리더를 사용해 페이지를 탐색한다. 스크린 리더는 <a> 태그의 링크 텍스트나 title 속성을 읽어주는데 적절한 설명이 없는 경우에 사용자는 링크의 목적을 명확하게 이해하기 어렵다. 그렇기 때문에 a태그에 title 속성을 넣어주는게 좋다.
   
   
2. 중복된 링크 설명을 방지한다. 여러 링크에 동일한 텍스트가 반복되는 경우, 사용자는 각각 링크가 다른 목적을 가리켜 혼란을 줄 수 있다. 이때 타이틀 속성을 사용해 링크마다 고유한 설명을 부여하면 스크린 리더 사용자가 혼란을 덜 느끼게 되고, 각 링크가 정확히 어떤 역할을 하는지 명확히 알 수 있다.

title 속성 예시

<!-- 좋지 않은 사례 -->
<a href="https://likelion.net/school" title="태킷 부트캠프 스쿨 상세페이지로 이동">
  <img src="./../assets/icon/plus-on.svg" alt="" />
  좋지 않은 사례
</a>

<!-- 좋은 사례 -->  
<a href="https://likelion.net/school" title="태킷 부트캠프 스쿨 상세페이지로 이동">
  <img src="./../assets/icon/plus-on.svg" alt="상세 페이지 보기" />
  태킷 부트캠프 스쿨 상세보기
</a>

✅ 결론
1. 이미지에 적절한 alt 텍스트를 추가해 스크린 리더 사용자에게 링크의 목적을 알릴 필요가 있다.
2. 링크 텍스트는 "좋지 않은 사례"처럼 추상적이거나 불필요한 텍스트가 아니라, 링크의 목적을 명확하게 설명하는 텍스트로 바꿔야 한다.
3. title 속성에만 의존하지 말고, 링크 목적이 충분히 텍스트와 이미지에서 전달되도록 해야 한다.

1-4. 링크 프래그먼트 식별자

링크는 링크 프래그먼트 식별자일 뿐이며 요소를 id="id명"로 교체한다.

 <!-- Framement 식별자 방식으로 name 속성으로 위치 지정하기 -->
 <a name="start"></a> 
 <h1 id="heading">하이퍼링크 요소</h1> 
  
 <!-- name 속성, id 속성 값이 있는 위치로 이동 -->
 <a href="#start">맨위로</a>
 <a href="#heading">맨위로</a> 

참조 : web.dev