HyperText
텍스트 등의 정보가 동일 선상이 아닌 다중으로 연결되어 있는 상태
hyperlink
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능
link tag
- hyperlink를 의미함
- a (anchor) tag가 그 역할을 담당함
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com">Visiting google site</a>
</body>
</html>1. href attribute
- 이동하고자 하는 파일의 위치(경로)를 값으로 받음
1.1 Directory
- root directory
- Unix : /
- Window : C:\ - home directory
- Unix : /User/(계정명)
- Window : C:\User(계정명) - working diretory : ./
- parent directory : ../
1.2 File path
-
파일 시스템에서 파일의 위치를 나타내는 방법
-
절대경로 (Absolute path)
- working directory와 관계없이 특정 파일의 절대위치를 가리킴
- root directory를 기준으로 파일의 위치를 나타냄- /User/leesora/Desktop/image.jpg
- C:\User\leesora\Desktop\image.jpg
- /index.html
-
상대경로 (Relative path)
- working directory를 기준으로 파일 위치를 나타냄- ./index.html
- ../project/index.js
- index.html
- html/index.html
-
href attribute에서 사용가능한 값
- 절대 URL : 웹사이트 URL
- 상대 URL : 자신의 위치를 기준으로 한 대상의 URL
- fragment identifier : 페이지 내 특정 id를 갖는 요소의 링크
- 메일 : 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:someone@example.com?Subject=Hello again">Send email</a><br>
<a href="javascript:alert('hello');">Javascript</a><br>
</body>
</html>2. target attribute
- 링크를 클릭했을 때 창을 어떻게 열지를 지정함
- _self : 링크 클릭 시 연결 문서를 현재 창에서 오픈 (기본값)
- _blank : 링크 클릭 시 연결 문서를 새로운 창이나 탭에서 오픈
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank">Visiting google site</a>
</body>
</html>