0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성

0021 HyperText 링크를 제공하는 앵커(anchor)의 <a>요소 03 target 속성

HyperText 링크를 클릭하면 목적지 주소(destination address)로 지정된 페이지나 페이지 내의 요소를 열게 된다. 이 때, 어떤 식으로 새로운 페이지를 창(window)에 띄울지 결정하고 싶을 수 있다. 이러한 내용을 선택할 수 있는 것이 target 속성이다. 

    

즉, 링크된 문서를 어디에 열지 결정하는 속성이 target 이다.

   

target은 속성값으로 다음의 5가지를 가진다. 

    

_blank : 링크된 문서를 새로운 창이나 탭에 연다.

     

_self : 링크된 문서를 링크가 있는 현재 창의 현재 프레임에 연다. target 속성을 별도로 지정하지 않으면 기본으로 이 속성값으로 지정된다.

     

_parent : 링크된 문서를 상위(부모) 프레임에 연다.

     

_top : 링크된 문서를 현재의 전체 창에 연다.

    

framename : 지정된 이름의 프레임에 링크된 문서를 연다.

다음의 그림을 보면 target의 속성값의 역할이 조금 명확해진다. 

프레임이라는 것은 웹 페이지 안에 웹 페이지를 넣을 수 있는 틀이다. 나중에 이것에 대해서 자세히 다루는 것으로 하고 이번에는 간단하게만 다루도록 하자.

    

위의 그림은 전체 웹 페이지가 Frame 1, Frame 2, Frame 3의 3개의 프레임으로 나누어지고 각각의 프레임에 별도의 웹 페이지가 표시되어 있는 것이다. Frame 1과 Frame 2는 별도의 프레임이고 Frame 3은 Frame 2 안에 들어있는 하위(자식) 프레임이다. 

    

웹 페이지가 이와 같이 짜여져 있는 상황에서 Frame 3에 위치한 링크가 target 속성에 따라서 어떻게 작동하는지 하나하나 살펴보자.

    

#1링크를 클릭하면 target의 속성값이 "_blank"이므로 새로운 탭(TAB)이나 창(window)에 링크된 문서가 열린다.

    

#2링크를 클릭하면 target의 속성값이 "_self"이므로 현재 링크가 위치한 프레임인 Frame 3에서 링크된 문서가 열린다. 

    

#3링크를 클릭하면 target의 속성값이 "_parent"이므로 현재 링크가 위치한 Frame 3의 상위(부모) 프레임인 Frame 2에서 링크된 문서가 열린다. 

    

#4링크를 클릭하면 target의 속성값이 "_top"이므로 링크된 문서가 가장 상위의 프레임인 현재 창이나 탭(TAB)의 전체 화면으로 열린다. 

     

#5링크를 클릭하면 target의 속성값이 "framename"이므로 링크된 문서가 지정된 프레임에서 열린다.

마지막으로 전역 속성(global attribute)인 title 속성과 달리 target 속성은 <a> 요소에서만 사용되는 속성이다.

Anki 파일

아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 

Ankilog 파일:   0021 a요소 03 target 속성.apkg