한 텍스트에서 다른 텍스트로 건너 뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link) 라고 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<a href="http://www.google.com">Visit google.com!</a>
// Visit google.com!을 클릭하면 구글 홈페이지로 이동하게 한다.
</body>
</html>
hypertext reference의 약자고, 이동하고자 하는 파일의 위치(경로)를 값으로 받는다.
경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.
루트 디렉토리 : 파일 시스템 계층 구조 상의 최상위 디렉토리이다.
- Unix : /
- Windows : C:\
홈 디렉토리 : 시스템의 사용자에게 각각 할당된 개별 디렉토리이다.
- Unix : /Users/{계정명}
- Windows : C:\Users{계정명}
작업 디렉토리 : 작업 중인 파일이 위치한 디렉토리이다.
- ./
부모 디렉토리 : 작업 디렉토리의 부모 디렉토리이다.
- ../
HTML 시리즈의 네번째 글에서 언급한 것처럼 파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다.
절대경로(Absolute Path)
루트 디렉토리를 기준으로 파일의 위치를 나타낸다.
- http://www.mysite.com/index.html
- /Users/leeungmo/Desktop/myImage.jpg
- C:\Users\leeungmo\Desktop\myImage.jpg
상대경로(Relative Path)
현재 작업 디렉토리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
- ./index.html
- ../dist/index.js
- html/index.html (현재 작업 디렉토리의 하위 디렉토리인 html로 가서, index.html)
href 속성에 사용 가능한 값은 아래와 같다.
<a href="#top">
은 페이지 내에 top이라고 하는 id를 갖는 요소로 바로 이동이 가능하게 한다.
target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할지를 지정한다.
_self
(기본값) : 링크를 클릭했을 때, 연결 문서를 현재 페이지에서 오픈한다._blank
: 링크를 클릭했을 때, 연결 문서를 새로운 탭에서 오픈한다.<body>
<a href="http://www.google.com" target="_blank">Visit google.com!</a>
</body>
이 경우, 결과창에서 Visit google.com!을 클릭하면 google.com이 새로운 탭으로 열리는 것을 확인할 수 있었다.