반응형
하이퍼 링크(Hyperlink)
- 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능을 하이퍼링크라 하며, <a> (anchor tag)가 그 역할을 담당한다.
<a href="링크주소" target="속성값">HTML 링크</a>href 속성
- href 속성으로는 절대/상대 URL, 메일, 스크립트, 페이지 내의 특정 Id를 갖는 요소(fragment identifier)가 올 수 있다.
<h2 id="top">Top of page!</h2>
<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="mailto:someone@example.com?Subject=Hello">Mail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>
<a href="#top">Go to top</a><br>target 속성
- <a>태그의 target 속성은 링크로 연결된 문서를 어떻게 열지를 명시한다.
- _blank : 새 창이나 새 탭에서 오픈
- _self : 현재 프레임에서 오픈 (기본설정)
- _parent : 부모 프레임에서 오픈
- _top : 현재 창의 가장 상위 프레임에서 오픈
- 프레임(frame) 이름 : 지정된 프레임에서 오픈
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer">Visit google.com!</a>
</body>
</html>- target="_blank"를 사용해 외부 페이지를 오픈하는 경우, 이동한 외부 페이지에서 자바스크립트 코드를 사용해 악의적인 페이지로 리다이렉트할 수 있는 보안 취약점이 있으므로, rel="noopener noreferrer"를 추가해 Tabnabbing 피싱 공격에 대비할 것을 권장한다.
링크의 상태
- 링크가 연결되어 있는 텍스트는 밑줄에 파란색 글자색으로 변경된다.
- link : 아직 한 번도 방문한 적이 없는 상태 (기본설정)
- hover : 링크 위에 마우스를 올려놓은 상태
- visited : 한 번이라도 방문한 적이 있는 상태로, visited 상태의 링크는 밑줄에 보라색 글자색으로 변경된다
- active : 링크를 마우스로 누르고 있는 상태로, active 상태의 링크는 밑줄에 빨간색 글자색으로 변경된다
<style>
a:link { color: teal; }
a:visited { color: maroon; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: red; text-decoration: none }
</style>
페이지 책갈피
- 책갈피를 통해 가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성하고, 그 다음에 작성한 name 속성값을 이용하여 다른 <a>태그에서 링크를 걸면 된다.
<a href="#bookmark"><p>제목 3으로 갑시다!!!</p></a>
...
<h2><a name="bookmark"></a>제목 3</h2>
Reference
반응형
'Language > Html' 카테고리의 다른 글
| [Html] 테이블 요소 - 테두리, 합치기, 캡션 (0) | 2023.06.19 |
|---|---|
| [Html] 리스트 요소 - 비순서, 순서, 정의 목록 (0) | 2023.06.19 |
| [Html] 텍스트 요소 - 줄바꾸기, 밑줄, 중앙줄, 첨자, 인용 (0) | 2023.06.19 |
| [Html] 기본 요소 - 글자 스타일, 색상, 배경 (0) | 2023.06.19 |
| [Html] 시멘틱 웹과 의미 요소 (0) | 2023.06.19 |