HyperText의 Hyper는 컴퓨터 용어로서, 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다.
이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데, 기존 문서나 텍스트의 선형성과 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 이동하여 정보를 취득할 수 있는 기능을 제공한다.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 Hyperlink라고 한다.
<a>
HTML에서 hyperlink를 정의하는 tag이다.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">Visit google.com!</a>
</body>
</html>href attribute
이동하고자 하는 파일의 경로를 값으로 받는다.
파일 경로는 절대 경로와 상대 경로, 두 종류가 존재한다.
- 절대 경로 URL : 현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다. 루트 디렉터리를 기준으로 파일의 위치를 나타낸다.
- http://www.mysite.com/index.html
- /Users/yong/Desktop/myImage.jpg
- 상대 경로 URL : 현재 작업 디렉터리를 기준으로 특정 파일의 상대적인 위치를 가리킨다.
- ./index.html
- ../../dist/index.js
파일의 경로 이외에도, href attribute에 사용 가능한 값은 다음과 같다.
- fragment identifier : 페이지 내의 특정 id를 갖는 element에 대한 링크
ex) href="#top") - 메일
- script
<!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:someone@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>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>"Whenever you feel like criticizing any one," he told me, "just remember that all the people in this world haven't had the advantages that you've had."</p>
<a href="#top">Go to top</a>
</body>
</html>
target attribute
링크를 클릭했을 때, 윈도우를 여는 방법을 지정한다.
값에 따라 윈도우를 여는 방법이 다르다.
- _self : 링크를 클릭했을 때, 연결 document를 현재 윈도우에서 오픈한다. 기본값이다.
- _blank : 링크를 클릭했을 때, 연결 document를 새로운 윈도우나 탭에서 오픈한다.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
</body>
</html>target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 JavaScript 코드를 사용해 악의적인 페이지로 리다이렉트하는 Tabnabbing 공격에 대해 보안취약점이 있다.
따라서, rel="noopener noreferrer" attribute를 추가해서 Tabnabbing 공격에 대비할 것을 권장한다.
참고문헌
더깊이