[html/css] a태그에 대한 거의 모든 것

[html/css] a 태그에 대한 거의 모든 것

---

html 태그 정리 a태그

---

 

<a> 태그(앵커 태크)는 href 특성 을 통해 다른 페이지나 같은 페이지의 특정 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 기능을 가진 태그 입니다.

 

 

Attributes

a. href

1. <a> 태그를 클릭시 이동하는 URL 지정하는 속성

 

 

2. 페이지 내부 영역을 가리키는 fragment URL

 

 

3. tel: URL을 사용하는 전화번호

 

 

4. mailto: URL을 사용하는 이메일 주소

 

 

5. 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있습니다.

 

b. download

• 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다.
• 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

 

 

c. target

링크한 URL을 표시할 위치를 지정합니다. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다.

 

 

1. _self: 현재 페이지에서 바로 이동
2. _blank: 새 탭에서 URL을 이동합니다. (기본값은 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다)
3. _parent: 부모 페이지(현재 페이지를 open한 페이지)에서 URL을 이동합니다. 부모가 존재하지 않으면 _self 와 동일하게 동작합니다.
4. _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 동작합니다.

---

a 태그를 사용할 경우 반드시 고려해야 될 5가지 체크리스트

1. target 속성을 사용할 때는 rel="noreferrer" 를 적용하자.

• target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면
  웹사이트가 window.opener API 악용 공격에 취약해집니다.
  취약점 설명 포스팅 참고

Target="_blank" - the most underestimated vulnerability ever

다만, 최근 브라우저(Firefox 79+ 등)는 target="_blank"를 지정하면 임의로 rel="noopener" 설정과 동일한 보호 수준을 적용합니다.

 

2. 링크 안 콘텐츠는 링크가 향하는 곳을 설명해야한다.

 

3. <a> 태그를 버튼으로 사용하는 것을 지양하자.

흔히 <a> 태그에 href="#" 혹은 javascript:void(0)으로 지정해 페이지 새로고침을 막아서 버튼처럼 만들어 사용하는 패턴이 자주 사용됩니다.

 

이런 가짜 href 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.

 

대신 <button>을 사용하세요. 하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다.

 

 

4. <a> 태그 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.

아이콘을 사용해 링크의 행동을 강조할 땐 대체 텍스트를 꼭 지정하세요.

 

 

5. <a> 태그 요소의 크기

원활한 인터렉션을 위해 충분한 크기의 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치 스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44px 크기를 권고합니다.