HTML

[HTML] 하이퍼링크, href, target

chamjoeun6579 2023. 1. 14. 19:21

하이퍼링크란 사용자가 다른 곳으로 이동할 수 있게 하는 있는 링크를 말한다. 

 

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" 를 같이 써서 보호해야 한다.