[HTML] Hyperlink
HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.
이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다. 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다.
HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">Visit google.com!</a>
</body>
</html>href 어트리뷰트
href(hyper reference의 약자로 '하이퍼 참조'를 의미한다.) 어트리뷰트는 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다.
디렉터리(Directory)
디렉토리는 파일과 다른 디렉터리를 갖는 파일 시스템 내의 존재물로서 폴더라고도 불리운다.
루트 디렉터리
파일 시스템 계층 구조 상의 최상위 디렉터리이다.
- Unix: /
- Windows: C:\
홈 디렉터리
시스템의 사용자에게 각각 할당된 개별 디렉터리이다.
- Unix: /Users/{계정명}
- Windows: C:\Users\{계정명}
작업 디렉터리
작업 중인 파일의 위치한 디렉터리이다.
- ./
부모 디렉터리
작업 디렉터리의 부모 디렉토리이다.
- ../
파일 경로(File path)
파일 경로는 파일 시스템에서 파일의 위치를 나타내는 방법이다. 경로에는 절대경로와 상대경로가 있다.
절대경로(Absolute path)
현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.
- http://www.mysite.com/index.html
- /Users/Joara/Desktop/myImage.jpg
- C:\users\Joara\Desktop\myImage.jpg
- /index.html
상대경로(Relative path)
현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
- ./index.html
- ../dist/index.js
- ../../dist/index.js
- index.html
- html/index.html
href 어트리뷰트에 사용 가능한 값은 아래와 같다.
| Value | Description |
| 절대 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’);” |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:test123@example.com?Subject=Hello again">Send Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>
</body>
</html>fragment identifier를 이용한 페이지 내부 이동 방법은 다음과 같다.
<!DOCTYPE html>
<html>
<body>
<h2 id="top">Top of page!</h2>
<p>
변명 중에서도 가장 어리석고 못난 변명은
'시간이 없어서'이다. -에디슨-
</p>
<p>
나만이 내 인생을 바꿀 수 있다
아무도 날 대신해 줄 수 없다. -캐롤 버넷-
</p>
<p>
그대는 인생을 사랑하는가?
그렇다면 시간을 낭비하지 말라
시간이야말로 인생을 형성하는 재료이기 때문이다. -벤자민 프랭클린-
</p>
<p>세상에서 가장 현명한 사람은
모든 사람으로부터 배우는 사람이다
가장 사랑받는 사람은 칭찬하는 사람이다
가장 강한 사람은 감정을 조절할 줄 아는 사람이다. -탈무드-
</p>
<p>진정으로 웃으려면 고통을 참아야 하며
나아가 고통을 즐길 줄 알아야 한다. -찰리 채플린-
</p>
<p>성공의 비결은 단 한 가지,
잘할 수 있는 일에 광적으로 집중하는 것이다. -톰 모나건-
</p>
<p>좋은 성과를 얻으려면
한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다. -단테-
</p>
<p>
절대 어제를 후회하지 마라
인생은 오늘의 나 안에 있고
내일은 스스로 만드는 것이다. -L. 론허바드-
</p>
<p>
어리석은 자는 멀리서 행복을 찾고
현명한 자는 자신의 발치에서 행복을 키워간다. -제임스 오펜하임-
</p>
<p>
너무 소심하고 까다롭게 자신의 행동을 고민하지 말라
모든 인생은 실험이다
더 많이 실험할수록 더 나아진다. -랄프 왈도 에머슨-
</p>
<p>
우리 인생의 가장 큰 영광은
결코 넘어지지 않는 데 있는 것이 아니라
넘어질 때마다 일어서는 데 있다. -넬슨 만델라-
</p>
<p>
평생 살 것처럼 꿈을 꾸어라
그리고 내일 죽을 것처럼 오늘을 살아라. -제임스 딘-
</p>
<p>
네 믿음은 네 생각이 된다
네 생각은 네 말이 된다
네 말은 네 행동이 된다
네 행동은 네 습관이 된다
네 습관은 네 가치가 된다
네 가치는 네 운명이 된다 -마하트마 간디-
</p>
<p>
인간이 불행한 이유는
자신이 행복하다는 사실을 모르기 때문이다
단지 그뿐이다.-표도르 도스토옙스키-
</p>
<p>
세상은 고통으로 가득하지만
그것을 극복하는 사람들로도 가득하다. -헬렌 켈러-
</p>
<p>
원하는 것을 얻기 위한 첫 번째 단계는
내가 무엇을 원하는지 결정하는 것이다. -벤스타인-
</p>
<p>
이미 끝나버린 일을 후회하기보다는
하고 싶었던 일들을 하지 못한 것을 후회하라 -탈무드-
</p>
<a href="#top">Go to top</a>
</body>
</html>target 어트리뷰트
target 어트리뷰트는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.
| Value | Description |
| _self | 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈한다 (기본값) |
| _blank | 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈한다 |
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
</body>
</html>target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점(Tabnabbing 피싱 공격)이 있다. 따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다.
rel은 relation의 약자로 '관계'를 의미한다.