[HTML] Hyperlink 정리

HyperLink (한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능)

 

    - HyperText의 Hyper는 컴퓨터 용어

 

    - 텍스트 등의 정보가 동일 선상에 있는것이 아니라 다중으로 연결되어 있는 상태를 의미

 

    - HTML의 중요 특징 link의 개념과 연결되는데 기존 문서나 텍스트의 선형성, 고정성 제약에서 벗어나 사용자가    

     원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공

 

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

 

 

-> 실행 시, Visit google.com! text click하면 google 화면으로 간댜~

 

 

 

1. Href attribute (이동하고자 하는 파일의 위치를 값으로 받는다.)

 

 

 

2. Directory

 

루트 디렉터리(파일 시스템 계층 구조상의 최상위 디렉터리)         - Unix:/     - Windows:C:\

홈 디렉터리(시스템의 사용자에게 각각 할당된 개별 디렉터리)          - Unix:/User/{계정명}     - Windows:C:\User\{계정명}

작업 디렉터리(작업 중인 파일의 위치 디렉터리)          - ./

부모 디렉터리(작업 디렉터리의 부모 디렉터리)          - ../

 

 

 

3. File path

 

절대경로(Absolute path)    - 현재 작업 디렉터리와 관계없이 특정 파일의 절대적인 위치를 가리킨다.    - 루트 디렉터리를 기준으로 파일 위치를 나타낸다.    http://google.com    /Users/Ahyoung/Desktop/iLoveYou.jpg   C:\users\Ahyoung\Desktop\iLoveYou.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’);”

 

 

ex) fragment identifier는 href = "(#+가고싶은 id)" 눌리면 거기로 이동

 

<h2 id="top">내가 바로 위야</h2>

<a href="#top">위로 가고시퍼</a>

 

 

 

 

 

4. target attribute (target attribute는 링크를 클릭했을 때 윈도우를 어떻게 오픈할 지를 지정한다.)

 

<a href="http://www.google.com" target="_blank">구글링 쪼아요!</a>

 

_self : 링크 클릭시 연결문서를 현재 윈도우에서 오픈 (기본값)

_blank : 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈

 

 

 

 

 

 

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