HTML <area> 태그 target 속성 완벽 정리 – 링크가 열리는 위치 지정하기

HTML의 <area> 요소에서 target 속성은 이미지 맵 영역을 클릭했을 때 연결된 문서가 어디에서 열릴지를 지정하는 역할을 합니다. 예를 들어 새 창(또는 새 탭), 같은 프레임, 부모 프레임, 전체 창 등 원하는 위치에 링크 문서를 표시할 수 있습니다.

target 속성 기본 문법

<area target="_blank|_self|_parent|_top|프레임 이름">

target 속성에 사용할 수 있는 값

_blank – 연결된 문서를 새 창 또는 새 탭에서 엽니다.
_self – 링크를 클릭한 동일한 프레임에서 문서를 엽니다. (기본값)
_parent – 부모 프레임에서 문서를 엽니다.
_top – 프레임 구조를 모두 해제하고 창 전체(body)에서 문서를 엽니다.
frame(프레임 이름) – 지정한 이름을 가진 프레임에서 문서를 엽니다.

예제 코드

이제 <area> 요소에 target 속성을 적용한 실제 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
   <h2>Learning</h2>
   <p>Learn these technologies with ease....</p>
   <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
   <map name = "tutorials">
      <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
         href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank"/>
      <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
         href = "/html/index.htm" target = "_blank" />
      <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
      href = "/php/index.htm" target = "_blank" />
  </map>
</body>
</html>

실행 결과

HTML area 태그 target 속성 완벽 정리 – 링크가 열리는 위치 지정하기

예제 코드 분석

위 예제에서 먼저 다음과 같이 이미지에 이미지 맵(usemap)을 연결했습니다.

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

그다음 <map> 요소 안에 각각의 모양(shape)별로 클릭 가능한 영역(area)을 정의했습니다.

<map name = "tutorials">
<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank"/>
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
href = "/html/index.htm" target = "_blank" />
<area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
href = "/php/index.htm" target = "_blank" />
</map>

여기서 각 영역마다 target="_blank"를 지정했는데, 이 값은 연결된 문서를 새 창 또는 새 탭에서 열도록 하는 역할을 합니다. 즉, 이미지 위의 Perl, HTML, PHP 튜토리얼 영역 중 하나를 클릭하면 해당 페이지가 현재 페이지를 벗어나지 않고 새 탭에서 열리게 됩니다.

참고 사항