Programming/HTML5 & CSS3
[HTML] 클릭 이벤트 발생 시 새 창 띄우기
hi-choi
2020. 12. 17. 22:41
텍스트나 이미지를 클릭했을 때 다른 페이지로 이동하는 이벤트를 만들 때 새로운 페이지가 나타나는 방식은 target 속성의 값을 수정해주면 바꿀 수 있습니다.
새 페이지 출력 방식 수정 : target 속성
새로운 페이지가 나타나는 방식은 target 속성의 값을 수정함으로써 바꿀 수 있습니다. target 속성의 기본 값은 _self로 되어있으며 이는 새로운 페이지가 기존 탭에서 나타나도록 합니다. target 속성에는 다음과 같은 값들이 있습니다.
| 값 | 설명 |
| _self | 기본값. 기존 탭에 새 페이지 출력 |
| _blank | 새로운 창(탭)에 새 페이지 출력 |
| _parent | 부모 프레임에 새 페이지 출력 |
| _top | 프레임 밖에 새 페이지 출력 |
아래 코드는 텍스트 클릭 시 새 탭에 네이버 홈페이지를 기존 탭에 다음 홈페이지를 출력하는 이벤트를 발생시키는 코드입니다. 이를 위해, target 속성에 각각 _blank와 _self를 지정하였습니다.
<head>
</head>
<body>
<h3> 새 탭에서 열기 </h3>
<a href="https://www.naver.com/" target="_blank">클릭</a>
<h3> 기존 탭에서 열기 </h3>
<a href="https://www.daum.net/" target="_self">클릭</a>
</body>
