HTML Hyperlink, 절대경로/상대경로 등

HyperText의 Hyper는 컴퓨터 용어로서, 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.

이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성으이 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크(hyper link)라 한다.

 

HTML link는 hyperlink를 의미하며 a(anchor / 닻) tag가 그 역할을 담당한다.

 

1. href 어트리뷰트

href 어트리뷰터는 이동하고자 하는 파일의 경로를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.

 

1.1 디렉터리 (Directory) : 폴더라고도 불리운다.

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

 

1.2 파일 경로 (File path) : 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다.

• 절대 경로 (Absolute path) : 현재 작업 디렉터리와 관계 없이 특정 파일의 절대적인 위치를 가르킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.
  • http://www.mysite.com/index.html
  • /Users/leeungmo/Desktop/myImage.jpg
  • C:\users\leeungmo\Desktop\myImage.jpg
  • /index.html
• 상대 경로 (Relative path) : 현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가르킨다.
  • ./index.html
  • ../dist/index.js
  • ../../dist/index.js
  • index.html
  • html/index.html

href 어트리뷰트에 사용 가능한 값은 아래와 같다.

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

 

2. target 어트리뷰트

tagrget 어트리뷰터는 링크를 클릭했을 때 윈도우가 어떻게 오픈할 지를 결정한다.

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

 

 

 

* 이 글은 poiemaweb의 콘텐츠를 필사한 글입니다.

출처 :

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