Intermediate HTML: Anchor Elements

HTML Anchor 태그와 속성 (Attributes)

Anchor 태그 이해

HTML에서 Anchor 태그 (<a>)는 하이퍼링크를 만드는 데 사용된다. Anchor 태그는 열리는 태그 <a>와 닫히는 태그 </a>로 구성된다. 하지만 단순히 태그만 작성한다고 해서 하이퍼링크가 활성화되지는 않는다.

---

속성 (Attributes)의 역할

HTML 요소에서 속성은 요소에 추가 정보를 제공한다. 속성은 항상 여는 태그 안에 작성되며 태그 이름 뒤, 닫는 꺾쇠 괄호(< >) 앞에 위치한다. 속성은 다음과 같은 구조를 가진다:

1. 속성의 이름
2. 등호(=)
3. 속성 값 (항상 따옴표 안에 작성)

예를 들어, <a href="https://example.com">Example</a> 에서 href는 속성의 이름이고 "https://example.com"은 그 값이다. href 속성은 해당 링크가 연결될 URL을 지정한다.

---

Anchor 태그 속성 사용법

기본 사용법

1. 태그 구조: <a href="URL">링크 텍스트</a>
   • href: 하이퍼링크의 대상 URL을 지정.
   • 예: Google는 "Google"이라는 링크를 생성하며, 클릭 시 Google 웹사이트로 이동.
2. 기본 상태:
   • 속성을 추가하지 않으면 텍스트는 화면에 표시되지만 클릭해도 아무 동작도 발생하지 않는다.
   • href 속성을 추가하면 링크가 파란색 밑줄로 스타일링되고 활성화된다.

---

전역 속성(Global Attributes)

전역 속성은 HTML의 모든 요소에서 공통적으로 사용할 수 있는 속성이다. 이 속성들은 태그의 동작 방식이나 스타일을 조정하는 데 유용하며, 태그에 독립적으로 적용된다. 예를 들머, clss, id, style 같은 속성은 모든 HTML 요소에 적용 가능하며, 따라며 전역 속성으로서 분류가 되어 있다.

• draggable="true": 요소를 드래그 가능하도록 설정.
• 예: <a href="https://example.com" draggable="true">Example</a>는 링크를 클릭 후 드래그할 수 있도록 한다.

---

특정 속성(Specific Attributes)

특정 속성은 특정한 HTML 요소(태그)에만 사용할 수 있는 속성이다. 이 속성들은 해당 요소가 제공하는 고유한 기능이나 역할을 수행하도록 설계되었다. 예를 들어, <a> 태그의 href 속성은 링크가 영ㄴ결되는 URL을 지정하는 데 사용되며, 다른 태그에서는 사용되지 않는다.

---

Anchor 태그를 활용한 예시

1. 특정 속성: href

역할: 링크의 대상 URL을 지정하는 속성이다.

 

예시:

<a href="https://example.com">Visit Example</a>

•  

2. 특정 속성: target

역할: 링크 클릭 시 새 창 또는 현재 창 등에서 열릴 방식을 지정한다.

 

값의 예:

  - _self (기본값): 현재 탭에서 열림.

  - _blank: 새 탭에서 열림.

  - _parent: 부모 프레임에서 열림 (부모 창이 없다면 기본 값으로 작동).

  - _top: 최상위 창에서 열림 (다른 창이 없다면 기본 값으로 작동).

 

예시:

<a href="https://example.com" target="_blank">Open in New Tab</a>

  - 결과: 본 링크를 클릭 시 새 창에서 https://example.com이 열림.

 

3. 특정 속성: hreflang

역할: 링크된 페이지가 무슨 언어로 되어 있는지를 명시하며 이는 단순히 참고 용도로만 사용된다.

 

4. 특정 속성: download

역할: 링크를 클릭할 때 대상 페이지로 연결되지 않고 해당 콘텐츠가 다운로드 되게 한다.

 

예시:

<a download=”파일 이름”>다운로드 링크</a>

파일 이름을 명시하지 않을 경우 기본 값으로 원래 파일 명이 사용된다.

 

5. 특정 속성: rel

역할: 링크와 대상 URL 간의 관계를 설명하거나 보안을 강화한다.

 

자주 사용되는 값:

  - noopener: 새 탭으로 열리는 페이지가 부모 페이지에 접근하지 못하도록 방지.

  - noreferrer: 새 탭으로 열릴 때 참조 정보를 전송하지 않도록 함.

 

예시:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure Link</a>

  - 결과: 보안 및 성능 향상을 위해 새 창이 부모 페이지 정보를 제어하지 못하게 함.

 

이 외에도 nofollow, author, external, help 등 다양한 값이 존재한다.

---

추가: noopener와 noreferrer를 확실히 이해하기

본 강의에서는 noopener와 noreferrer를 아주 간단히 소개하고 넘어갔기 때문에 추가적으로 검색을 통해 확실히 이해하고 넘어가고자 한다.

---

1. noopener

noopener는 새 창을 열었을 때, 새 창에서 원래 페이지(부모 페이지)에 접근하지 못하게 막아주는 속성이다.

 

만약 이 속성이 없다면, 새 창에서 window.opener를 통해 원래 페이지를 조작할 수 있다. 이 속성은 window.opener를 통해 원래 페이지를 조작 하는 것을 막기 때문에, no-opener라는 명칭으로 속성명이 지어진듯 하다.

 

이런 조작은 보안 문제가 될 수 있다. 특히, 악성 웹사이트가 원래 페이지를 해킹하거나 내용을 변경하는 경우가 있다.

 

새 창은 원래 창에 대해서 "아무것도 모르는 상태"가 된다. 즉, 두 창이 완전히 독립적으로 작동하게 된다.

 

예시:

<a href="https://example.com" target="_blank" rel="noopener">Open Securely</a>

 

결과: 새 창이 열리지만, 새 창에서 window.opener를 통해 부모 페이지에 접근할 수 없다.

---

window.opener란?

window.opener는 새 창 또는 탭이 열린 원래 창(부모 창)에 접근할 수 있도록 해주는 JavaScript 객체이다.

 

역할:

새 창에서 부모 창에 접근: 새로 열린 창이 원래 창의 속성이나 함수를 사용할 수 있다.

부모 창 조작 가능: 새 창은 window.opener를 사용해 부모 창의 내용을 변경하거나 실행할 수 있다.

 

작동 방식:

target="_blank"로 새 창을 열 때, 브라우저는 새 창과 부모 창 사이의 연결을 만든다.

새 창에서 window.opener를 사용하면 부모 창의 객체에 접근할 수 있다.

 

간단한 예시:

HTML 코드:

<a href="newpage.html" target="_blank">Open New Page</a>

 

새 창의 newpage.html 코드:

<script>
  // 부모 창의 제목을 변경
  window.opener.document.title = "Changed by New Page!";
</script>

 

결과: 새 창이 열리면 부모 창의 제목(document.title)이 "Changed by New Page!"로 변경된다.

 

window.opener의 문제점:

1. 보안 위험:

악성 코드가 포함된 새 창이 window.opener를 통해 부모 창의 정보를 탈취하거나 내용을 변경할 수 있다.

예: 부모 창의 URL을 조작해 사용자를 피싱 사이트로 유도.

 

2. 성능 저하: 새 창이 계속 부모 창과 연결되어 있으면, 브라우저가 불필요한 리소스를 사용하게 된다.

 

window.opener가 필요한 이유:

지금까지 알아본 내용으로는 window.opener는 마치 보안 취약점과 성능 저하만 유발하는 듯 하다. 그렇다면 이 기능은 어떨 때 필요로 하는 것일까?

 

window.opener는 부모 창과 새 창 간의 상호작용이 꼭 필요한 경우에만 사용되며, 이를 사용할 때에는 특히 확인해 보아야 할 것이 몇가지 존재한다. 그 중 2가지를 정리 해 보았다.

1. 내부 시스템: 같은 도메인 내에서 동작하는 안전한 애플리케이션인가?

2. 신뢰할 수 있는 환경: 부모 창과 새 창이 모두 신뢰할 수 있는 코드로 작성이 되었는가?

 

다만, 일반 웹사이트에서는 가능하면 "re=noopener"를 사용하여 보안을 우선시하는 것이 권장된다.

 

요약하면, window.opener는 신뢰할 수 있는 환경에서 부모 창과 새 창 간 통신이 꼭 필요한 경우에만 사용해야 하며, 그렇지 않을 결우 보안과 성능 문제를 피하기 위해 "re=noopener"를 기본으로 사용하는 것이 좋다.

---

2. noreferrer

noreferrer는 어떤 웹사이트로부터 방문했는지(참조 정보, Referrer)를 노출시키고 싶지 않을 때 사용한다. 이는 개인정보 보호, 보안 강화, 또는 특정 트래픽 정보를 숨기고 싶을 때 유용하다. 기본적으로, 새 창에서 "이 링크는 example.com에서 열렸다" 라는 정보를 받을 수 있게 설정이 되어있다. noreferrer 속성은 이 정보를 숨겨준다.

 

비유: noreferrer는 편지를 보낼 때 발신자 주소를 적지 않는 것과 비슷하다.

---

어떨 때 noreferrer를 사용할까?

a. 개인정보 보호:

사용자가 특정 웹사이트에서 민감한 정보를 다루고 있을 때, 다른 사이트로 이동하는 링크를 클릭할 경우 출처 URL(referrer)에 민감한 정보가 포함될 수 있다. 예를 들어, URL에 검색 쿼리나 사용자의 개인 정보가 포함된 경우, 이를 숨기고 싶을 때 noreferrer를 사용한다.

 

예시: 검색 쿼리를 숨기기

<!-- 사용자가 검색 결과 페이지에서 클릭할 때 검색어 노출 방지 -->
<a href="https://example.com" target="_blank" rel="noreferrer">Visit Example</a>

 

- 만약 URL이 https://search.com?q=user+search라면, noreferrer를 사용하면 example.com은 이 URL 정보를 받지 못한다.

 

b. 마케팅 및 트래픽 소스 숨기기:

광고 캠패인이나 리퍼럴(referal) 프로그램에서 트래픽 출처를 숨기고 싶을 때 사용된다. 예를 들어, 경쟁 업체가 캠페인의 성과를 추적하지 못하게 하거나, 특정 웹사이트로부터의 트래픽을 숨기고 싶을 때 사용한다.

 

예시: 광고 트래픽 보호

<!-- 광고를 통해 방문했지만 출처 숨기기 -->
<a href="https://example.com" target="_blank" rel="noreferrer">Shop Now</a>

 

c. 보안 강화를 위해 사용:

 

특정 상황에서는 출처 정보를 포함한 URL이 공격자에게 노출될 위험이 있다. 이를 방지하기 위해 noreferrer를 사용한다.

 

특히 민감한 데이터를 처리하거나 금융 관련 작업을 수행하는 사이트에서 유용하다.

---

noopener와 noreferrer의 차이

noopener: 새 창에서 부모 창 제어 방지에 초점. 보안과 성능 향상.

 

noreferrer: 참조 정보(Referrer) 숨기기에 초점. 개인정보 보호 및 트래픽 정보 비공개.

 

 

속성	역할	언제 사용하는가
noopener	새 창이 부모 페이지를 조작하지 못하게 함	새 창이 악성 페이지일 가능성이 있을 때
noreferrer	새 창에 부모 페이지의 정보를 숨김	클릭한 페이지 정보를 숨기고 싶을 때
둘 다 사용	보안 강화 + 정보 보호	가장 안전하게 링크를 열고 싶을 때

 

실제로는 보안을 위해 target="_blank"를 사용하는 모든 경우에 rel="noopener noreferrer"를 사용하는 것이 권장된다.

---

정리

이 강의에서는 다음을 배웠다:

1. Anchor 태그를 사용하여 하이퍼링크 생성.
2. href 속성을 활용하여 링크의 목적지 지정.
3. 전역 속성과 특정 요소 전용 속성의 차이.
4. 목록과 하이퍼링크의 결합 사용법.
5. noopener와 noreferrer를 확실히 이해.

각 속성의 활용도를 이해하고, 직접 연습을 통해 개념을 강화하자. 다음 강의에서는 이미지 요소(Image Element)에 대해 학습한다.