하이퍼링크란 사용자가 다른 곳으로 이동할 수 있게 하는 있는 링크를 말한다.
a 태그에서 href 속성을 이용해 사용한다. href 속성은 href="원하는 경로" 형식으로 작성한다.
여기서 경로를 작성할 때 알아야 할 것이 절대경로와 상대경로이다. 절대경로는 라우터의 맨 앞에 / 를 붙여 절대적인 위치를 알려주는 경로다. ex) /users/~~
상대경로는 현재 파일이 기준이다. ./ 은 현재 파일의 위치에서 시작한다는 뜻이고 ../ 은 현재 파일의 부모 파일에서 시작한다는 뜻이다. ex) ./users/~~ , ../users/~~
href 에 사용할 수 있는 경로는 여러가지가 있다.
사이트 주소, 절대경로와 상대경로, id 를 이용한 이동
id 를 이용한 이동은 특정 요소에 id 가 있다면 href="#id" 를 통해 해당 요소로 바로 이동할 수 있는 기능이다.
추가적으로 a 태그에서 쓸 수 있는 속성 중 target 속성이 있다.
target 속성은 하이퍼링크를 클릭해 새 페이지가 열릴 시 이 페이지를 새로운 탭에서 열지, 아님 현재 탭에서 열지 정할 수 있는 속성이다.
target="_blank" - 새로운 탭에서 오픈
target="_self" - 현재 탭에서 오픈
참고로 "_blank" 를 통해 새로운 탭에서 오픈 할 경우 Tabnabbing 이라는 피싱공격을 당할 수 있다. 따라서 target="_blank" 를 사용했다면 rel="noopener noreferrer" 를 같이 써서 보호해야 한다.
'HTML' 카테고리의 다른 글
[HTML] 이미지, 음악, 동영상 (0) | 2023.01.14 |
---|---|
[HTML] 목록(list) 와 테이블(table) (0) | 2023.01.14 |
[HTML] 지나치기 쉬운 HTML 텍스트 관련 태그(em, mark, del, ins, pre 등) (0) | 2023.01.13 |
[HTML] 시맨틱 요소 (0) | 2023.01.13 |
[HTML] HTML의 기본문법 (0) | 2023.01.12 |