1. Hyperlink란?
다중이라는 의미의 hyper + 연결이라는 의미의 link 를 합한 hyperlink는 한 텍스트에서 다른 텍스트로, 다른 url로 이동할 수 있도록 해주는 순간이동 게이트이다.
예를 들어, 징검다리를 건널 때 1번돌에서 2번돌을 건너뛰어 3번돌로 바로 갈 수도 있는 것처럼 hyperlink는 다른 곳으로 건너뛸 수 있도록 한다.
hyperlink는 <a>태그로 사용한다.
2. href 속성
hyperlink의 href 속성은 url, id 등을 통해 이동하고자 하는 경로 값을 가진다.
1) Directory
- 루트
- 파일 시스템의 최상위 경로
- ex) C:\
- 홈
- 사용자의 개별 디렉토리
- ex) C:\Users{계정명}
- 작업
- 작업 파일이 위치한 디렉토리
- ./
- 부모
- 작업 파일의 부모 디렉토리
- ../
2) 파일 경로
-
절대경로
- 현재 작업 중인 파일 위치와 상관 없이 절대적인 경로
- ex) C:\Users\index.html
-
상대경로
- 현재 작업 중인 파일 기준으로 알 수 있는 상대적인 경로
- ex) ./index.html
-
fragment identifier
- 요소의 id 값을 통해 해당 위치로 이동
-
메일
-
script
3. target 속성
기본적으로 hyperlink를 통해 외부 url로 이동하면 default로 현재 탭에서 이동하게 되는데 새 탭이나 새 창에서 브라우저를 이동하고 싶을 경우 target 속성에 _blank 값을 이용할 수 있다.
_self: default
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>새 탭에서 Google로 이동!</a><br>
</body>
</html>새 탭에서 url을 오픈할 경우 JS로 개인정보를 탈취할 수 있는 Tabnabbing 피싱 공격의 위험성이 있다. 그래서 noopener 옵션을 사용해 안전성과 성능을 보장받는 것이 좋다.
noopener 참고
한 줄이 모여 책이 되듯 기록하기