HTML의 핵심 개념인 Hyperlink

• Hyper : 텍스트 등의 정보가 동일 선상이 아닌 다중 연결되어 있는 상태__
• Hyperlink : 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능
• <a> 로 수행

1. href 어트리뷰트

이동하고자 하는 파일의 위치(경로)를 값으로 받음

• 디렉토리(Directory)

  • 루트 디렉토리
    • 파일 시스템 계층 구조의 최상단
    • Unix: /
    • Windows: C:\
  • 홈 디렉토리
    • 사용자에게 할당된 개별 디렉토리
    • Unix: /Users/{계정명}
    • Windows: C:\Users{계정명}
  • 작업 디렉토리
    • 작업 중인 파일이 위치한 디렉토리
    • ./
  • 부모 디렉토리
    • 작업 디렉터리의 부모 디렉토리
    • ../

• 파일 경로

  • 절대 경로

    • 현재 작업 디렉토리와 관계없이 특정 파일의 절대적인 위치
    • 루트 디렉토리 기준
    • ex)
      /Users/leeungmo/Desktop/myImage.jpg
      C:\users\leeungmo\Desktop\myImage.jpg
      /index.html

  • 상대 경로

    • 현재 작업 디렉토리 기준 특정 파일의 상대적인 위치
    • ex)
      ./index.html
      ../dist/index.js
      index.html

• 사용 가능 Value

  Value	Description
  절대 URL	웹사이트 URL (href="http://www.example.com/default.html")
  상대 URL	자신의 위치를 기준으로한 대상의 URL (href=”./index.html”)
  fragment identifier	페이지 내의 특정 id를 갖는 요소에의 링크 (href=”#top”)
  script	href=”javascript:alert(‘Hello’);”
  메일	mailto:

2. target 어트리뷰트

링크를 클릭했을 때 윈도우를 어떻게 오픈할지 지정

• 사용 가능 Value

  Value	Description
  _self	링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈 (기본값)
  _blank	링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈

• target="_blank" 취약점
  target="_blank" 로 외부 페이지를 오픈 시 JS 코드로 악의적인 페이지로 Redirect하는 피싱 공격(Tabnabbing) 가능성 존재
  rel="noopener noreferrer" 로 피싱 공격 대비

👨‍🏫 참고

https://poiemaweb.com/html5-tag-link