target 속성

Soozoo·2024년 7월 29일

Markup

목록 보기

3/11

HTML에서 target 속성은 링크를 클릭할 때 링크된 문서가 어디에서 열릴지를 지정합니다. <a> 태그에 사용되는 target 속성의 다양한 값을 통해 링크가 새로운 창, 탭, 프레임 등에서 열리도록 할 수 있습니다.

_self (기본값): 링크된 문서가 현재 창이나 탭에서 열립니다.
```
<a href="http://www.example.com" target="_self">현재 창에서 열기</a>
```
_blank: 링크된 문서가 새 창이나 새 탭에서 열립니다. 대부분의 브라우저에서는 새 탭에서 열립니다.
```
<a href="http://www.naver.com" target="_blank">새 탭에서 열기</a>
```
_parent: 링크된 문서가 부모 프레임에서 열립니다. 프레임이 없는 경우 target="_self"와 동일하게 동작합니다.
```
<a href="http://www.example.com" target="_parent">부모 프레임에서 열기</a>
```
_top: 링크된 문서가 전체 창에서 열립니다. 모든 프레임셋을 벗어나 전체 브라우저 창에서 열리게 됩니다.
```
<a href="http://www.example.com" target="_top">전체 창에서 열기</a>
```
프레임 이름: 특정 이름을 가진 프레임에서 링크된 문서를 열 수 있습니다. 예를 들어, 프레임 이름이 myFrame인 경우:
```
<a href="http://www.example.com" target="myFrame">특정 프레임에서 열기</a>
```

보안 위험: target="_blank"를 사용할 때는 보안에 주의해야 합니다. 새 탭에서 열린 페이지가 window.opener를 통해 원래 페이지의 객체에 접근할 수 있기 때문입니다. 이는 피싱 및 클릭 재킹(Clickjacking) 공격에 악용될 수 있습니다.

이를 방지하기 위해, rel="noopener noreferrer" 속성을 함께 사용하여 window.opener를 비활성화할 수 있습니다:
```
<a href="http://www.naver.com" target="_blank" rel="noopener noreferrer">naver</a>
```
사용자 경험: 새 탭이나 새 창에서 링크가 열리도록 하는 것은 사용자가 현재 페이지에서 벗어나지 않도록 하여 더 나은 탐색 경험을 제공할 수 있습니다. 하지만, 너무 자주 사용하면 사용자가 브라우저 탭을 많이 열어 혼란스러울 수 있으므로, 필요할 때만 사용하는 것이 좋습니다.

<a href="http://www.naver.com" target="_blank">naver</a>

위의 코드에서 target="_blank"는 링크를 클릭하면 http://www.naver.com이 새 탭에서 열리도록 지정합니다. 이를 통해 사용자는 현재 페이지를 그대로 유지하면서 새로운 페이지를 탐색할 수 있습니다.

넙-죽