본문 바로가기

Programming/HTML5 & CSS3

[HTML] 클릭 이벤트 발생 시 새 창 띄우기

텍스트나 이미지를 클릭했을 때 다른 페이지로 이동하는 이벤트를 만들 때 새로운 페이지가 나타나는 방식은 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>

 

 

새 탭에서 열기

 

기존 탭에서 열기