HTML/CSS

[HTML] A Link 태그의 target 속성 예제 - 링크를 새창에서 열기


[HTML] A Link 태그의 target 속성 예제 - 링크를 새창에서 열기


  2023-05-12  333 View 공개

HTML <a> 태그의 target 속성은 링크를 클릭했을 때 페이지가 어디에서 열릴지 지정한다.
다음 표에서 target 속성의 가능한 값들을 확인해 보자. 

속성값 설명
_blank 링크를 새 창이나 탭에서 연다.
_self링크를 현재 창이나 탭에서 연다. (기본값)
_parent 링크를 부모 프레임에서 연다.
부모 프레임이 없는 경우. 이 옵션은 _self 와 같게 작동한다.
_top 링크를 현재 창의 최상위 프레임에서 연다.
다른 프레임이 없는 경우. 이 옵션은 _self 와 같게 작동한다.
frame name 링크를 지정된 이름의 프레임에서 연다.
해당 이름의 프레임이 없는 경우 새 창이나 탭에서 링크를 연다.




예를 들어, 링크를 새 창이나 탭에서 열려면 다음과 같이 작성할 수 있다.
HTML
<a href='https://www.example.com' target='_blank'>Visit Example.com</a>
이때, 보안 이슈를 방지하기 위해 rel='noopener' 또는 rel='noreferrer'를 추가하는 것이 좋다.
이는 새로 열린 페이지가 JavaScript의 window.opener를 통해 원본 페이지를 조작하는 것을 방지한다.
예를 들면 다음과 같다.
HTML
<a href='https://www.example.com' target='_blank' rel='noopener noreferrer'>Secure link to Example.com</a>

HTML <a> 태그의 target 속성은 링크를 클릭했을 때 페이지가 어디에서 열릴지 지정한다. 다음 표에서 target 속성의 가능한 값들을 확인해 보자.

속성값설명
_blank링크를 새 창이나 탭에서 연다.
_self링크를 현재 창이나 탭에서 연다. (기본값)
_parent링크를 부모 프레임에서 연다. 부모 프레임이 없는 경우, 이 옵션은 _self와 같게 작동한다.
_top링크를 현재 창의 최상위 프레임에서 연다. 다른 프레임이 없는 경우, 이 옵션은 _self와 같게 작동한다.
frame name링크를 지정된 이름의 프레임에서 연다. 해당 이름의 프레임이 없는 경우 새 창이나 탭에서 링크를 연다.

예를 들어, 링크를 새 창이나 탭에서 열려면 다음과 같이 작성할 수 있다.

html
<a href='https://www.example.com' target='_blank'>Visit Example.com</a>

이때, 보안 이슈를 방지하기 위해 rel='noopener' 또는 rel='noreferrer'를 추가하는 것이 좋다. 이는 새로 열린 페이지가 JavaScript의 window.opener를 통해 원본 페이지를 조작하는 것을 방지한다. 예를 들면 다음과 같다.

html
<a href='https://www.example.com' target='_blank' rel='noopener noreferrer'>Secure link to Example.com</a>


🚩 HTML/CSS 글 모음 (총 15 건)

HTML 문서내 목차만들고, 바로가기

Last Updated : 2023-09-29
#HTML #CSS #A태그 #a태그

유튜브 공유시 시작시간과 종료시간을 지정하는 방법

Last Updated : 2023-09-29
#HTML #YouTube

[HTML] 이미지 위에 버튼 링크 만들기

Last Updated : 2023-09-19
#HTML

[HTML] 이미지 위에 버튼 만들기

Last Updated : 2023-09-19
#HTML

[HTML] 다국어 웹사이트 구축 : 사용자 언어 자동 인식 및 설정 방법

Last Updated : 2023-09-05

[HTML] 구글 로그인 쉽게 구현하기

Last Updated : 2023-09-05