HyperText의 Hyper는 컴퓨터 용어로서 텍스트 등의 정보가 동일 선상에 있는 것이 아니라 다중으로 연결되어 있는 상태를 의미한다. 이것은 HTML의 가장 중요한 특징인 link의 개념과 연결되는데 기존 문서나 텍스트를 순서대로 읽어야 하는 고정성의 제약에서 벗어나 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공한다.
한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 이 기능을 하이퍼링크(hyper link)라 한다. HTML link는 hyperlink를 의미하며 a(anchor) tag가 그 역할을 담당한다.
<!DOCTYPE html>
<html>
<body>
<a href="https://www.naver.com/">네이버 방문하기</a>
</body>
</html>
1. href 속성
href 속성은 이동하고자 하는 파일의 위치(경로)를 값으로 받는다. 경로(path)란 파일 시스템 상에서 특정 파일의 위치를 의미한다. href 속성에 사용 가능한 값은 아래와 같다.
| 절대 URL | 웹사이트 URL (href=”http://www.example.com”) |
| 상대 URL | 자신의 위치를 기준으로한 대상의 URL |
| fragment identifier (anchor) | 페이지 내의 특정 id를 갖는 요소에 링크 (href=”#top”) |
| 메일 | mailto: |
| 전화 | tel: |
| script | href=”javascript:alert(‘Hello’);” |
2. target 속성
target 속성은 링크를 클릭했을 때, 현재 페이지에서 이동할 것인지, 새로운 창을 사용할 것인지 지정한다.
| _self | 링크를 클릭했을 때 연결문서를 현재 윈도우에서 오픈함 (기본값). |
| _blank | 링크를 클릭했을 때 연결문서를 새로운 윈도우나 탭에서 오픈함. |
target="_blank"를 사용하여 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트 할 수 있는 보안 취약점이 있다. 따라서 rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 공식적으로 권장하고 있다.
3. rel 속성
rel 속성은 현재 문서와 링크된 문서 사이의 연관 관계(relationship)을 명시한다. 여러 검색 엔진들이 링크에 대한 더 많은 정보를 수집하기 위해 사용할 수 있다.
| alternate | 프린트 페이지나 번역된 페이지와 같이 해당 문서의 대체 버전에 대한 링크를 나타냄. |
| author | 해당 문서의 저자에 대한 링크를 나타냄. |
| bookmark | 즐겨찾기(bookmarking)에 사용하는 고유 주소(Permanent URL)를 나타냄. |
| external | 링크된 문서가 현재 문서와 같은 사이트 내에 있지 않음을 나타냄. |
| help | 도움말 문서에 대한 링크를 나타냄. |
| license | 해당 문서의 저작권 정보에 대한 링크를 나타냄. |
| next | 연관된 문서들의 모음 중 다음 문서에 대한 링크를 나타냄. |
| nofollow | 유료 링크와 같이 검색 엔진이나 봇(bot) 등이 추적해서는 안 됨을 나타냄. |
| noreferrer | 사용자가 하이퍼링크를 클릭할 때 브라우저가 HTTP 리퍼러 헤더(referer header)를 전송해서는 안 됨을 나타냄. |
| noopener | 하이퍼링크를 따라 연결되는 어떠한 브라우징 컨텍스트(browsing context)도 오프너(opener)여서는 안 됨을 나타냄. |
| prev | 문서들 중에서 이전 문서를 나타냄. |
| search | 해당 문서를 위한 검색 도구를 나타냄. |
| tag | 현재 문서를 위한 키워드(tag)를 나타냄. |
'Road to Web Developer > HTML' 카테고리의 다른 글
| [입문] Text Tag (0) | 2022.10.26 |
|---|---|
| [입문] HTML Tag 기본 (0) | 2022.10.11 |
| 시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) (0) | 2020.09.27 |
| HTML 작성 시 유의사항 (0) | 2019.10.21 |
| HTML (HyperText Markup Language) 란? (0) | 2018.12.03 |
