프로그래밍/스크립트

하이퍼링크, 문서의 특정위치로 링크하기

라제폰 2008. 12. 9. 11:03
  하이퍼링크, 문서의 특정위치로 링크하기

<A>링크걸기

 
웹페이지를 보면 글자나 그림등을 다른 웹페이지 또는 다른 파일등으로 연결해놓은것을 볼수 있습니다. 바로 그런것을 하이퍼링크라고 합니다.
또 단순하게 다른 웹페이지로 연결만 되는것이 아니라 다른웹페이지의 특정위치 또는 해당페이지의 특정위치로 연결되는 경우도 있는데.. 이것을 주로 책갈피기능이라고 합니다.
이때 사용하는 태그가 바로 <A>태그 입니다.

<A>태그에 href속성을 사용해서 연결할페이지를 설정합니다.
href값은 연결해야하는 문서나 이미지의 경로입니다. 즉 <A>태그와 </A>태그 사이에 삽입되어있는 글이나 그림을 클릭하면 이동해야하는 페이지 또는 이미지의 경로를 href값으로 써주면 되는것입니다.

<A>태그에 target속성을 사용해서 연결할 웹페이지 또는 이미지를 어떤방법으로 연결할지 결정하게 됩니다. 여기서 어떤방법이란..지금 현재 브라우저에서 바로 연결할것인지 또는 새로운 웹브라우저를 열어서 연결할것인지.. 또는 앞으로 배우게될 프레임이 나누어진 웹페이지라면 어떤 프레임에 보여줄것이지.. 등등을 정해주게 되는것입니다.

<A>태그에 name 속성을 이용하게 되면 웹페이지의 특정 부분으로 이동하게 해주는 책갈피 기능을 설정할수 있습니다. 즉 name에 임의의 이름을 결정해 주고 다른곳에서 name에 해당하는 이름으로 링크를 걸어주면 이름이 있는 곳으로 페이지 이동을 하게 되는것입니다.
설명이 좀 어설픈가요?? 즉 name속성은 해당 <A>태그가 있는 곳에 특정 표시를 하는것입니다. 그래서 다른곳에서 그곳으로 이동할때는 그 표시로 링크를 걸어주면 되는것이구요..
그리고 하이퍼링크를 사용해서 책갈피 위치로 이동하게 할 경우에는 href속성값에 #표시와 함께 책갈피에 등록한 name속성값을 입력해 주면 됩니다.



<A>태그의 속성과 인자값을 정리해 보겠습니다.

 
태그
속성
인자
표현
설명
<A>
href
연결
페이지경로
 <A href="http://tagclub.intizen.com"> 태그클럽</A> "태그클럽"을 클릭하면 http://tagclub.intizen.com으로 연결
target
_blank
 <A href="경로" target="_blank">
링크 </A>		 "링크"를 클릭하면 연결된경로가 새로운 브라우저에서 열림
_parent
 <A href="경로" target="_parent">
링크 </A>		 "링크"를 클릭하면 연결된경로가 현재 프레임을 호출한 상위 프레임에서 열림
_self
<A href="경로" target="_self">
링크 </A>		 "링크"를 클릭하면 연결된경로가 현재 프레임에 보여줌
(※target속성을 지정하지 않으면 디폴트값은 _self)
_top
 <A href="경로" target="_top">
링크 </A>		 "링크"를 클릭하면 연결된경로가 현재프레임을 모두 없애고 웹 브라우저의 화면 전체에 보여줌
특정
프레임이름
 <A href="경로" target="main">
링크 </A>		 "링크"를 클릭하면 연결된경로가 main이라는 이름을 가진 프레임에 보여줌
name
임의의 이름
 <A name="a"></A> 임의의 이름"a"를 표시

 

<A>태그의 사용예제

 
<HTML>
      <HEAD>
            <TITLE>&lt;A&gt;태그의 사용예제</TITLE>
      </HEAD>
      <BODY>
 

target속성을 바꿔주면서 링크를 걸어보겠습니다.<br><br>
<A href="http://tagclub.intizen.com" target=_blank> 태그클럽 </A><br>
<A href="http://tagclub.intizen.com" target=_parent> 태그클럽 </A><br>
<A href="http://tagclub.intizen.com" target=_self > 태그클럽 </A><br>
<A href="http://tagclub.intizen.com" target=_top> 태그클럽 </A><br><br><br>

이번에는 특정부분으로 이동해 볼까요? <br>
<A href=#a>name=a로 설정한 부분으로 이동합니다.</a>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<A name=a>여기가 a 입니다.</A>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>

      </BODY>
</HTML>