|
하이퍼 텍스트(HyperText)를 서로 연결시켜주는 것을 하이퍼 링크(Hyper Link)라고 한다. 이번에는 서로 다른 웹 페이지간의 이동이나 하나의 웹 페이지내에서 원하는 곳으로 빠르게 이동할 수 있는 앵커(Anchor) 태그에 관한 내용이다. <Body> 태그 옵션 중 링크 관련 태그도 함께 알아보자. |
1. <A Href> : Anchor Hyper Reference
|
- <A HREF="#이동할 위치의 이름"> </a> : 페이지내에서의 이동. 지정된 이름을 사용하여 위치를 호출(#을 반드시 써주어야 하며 NAME에 명한 이름을 정확히 써 주어야 길을 잃어버리지 않는다. 페이지내의 이동이므로 NAME과 한 세트임.)
- <A NAME="현재 위치의 이름"> </a> : 현재 위치의 이름 지정(현 위치의 이름을 정하여 이동할 수 있도록 유도)
|
2. 예제-1 (페이지내에서의 이동 - 지정된 이름의 위치를 호출)
|
[Source] |
|
<html>
<head>
<title>
하이퍼 링크
</title>
</head>
<body topmargin="400">
페이지 내에서의 이동<p><br><br><br><br><br>
<a href="#here">여기</a>를 클릭하면 어디로 갈까나?<p><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><!--스크롤 효과가 나타내기 위해 여러 줄을 띄워 본다.-->
<a name="here">스크롤 효과가 나타나야 정확한 결과를 볼 수 있다. 결과를 제대로 볼 수 없다면 스크롤이 나올때 까지 윈도우를 조금 축소시켜 준다.</a>
</body>
</html> |
3. 예제-2 (페이지내에서의 이동 - 호출한 위치로 돌아감)
|
[Source] |
|
<html>
<head>
<title>
하이퍼 링크
</title>
</head>
<body topmargin="400">
<a name="top">페이지 내에서의 이동</a><p><br><br><br><br><br><!--CSS를 사용하면 짧고 간단하게 구현되지만 앞서 배운 태그로 조잡하지만 쉽게 사용하여 본다.-->
<a href="#here">여기</a>를 클릭하면 어디로 갈까나?<p><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><!--스크롤 효과가 나타내기 위해 여러 줄을 띄워 본다.-->
<a name="here">스크롤 효과가 나타나야 정확한 결과를 볼 수 있다. 결과를 제대로 볼 수 없다면 스크롤이 나올때 까지 윈도우를 조금 축소시켜 준다.</a><br><br><br><br><br><br><br><br><br><br>
<a href="#top">원래 위치로 나 돌아갈래~~</a>
</body>
</html> |
4. <A Href> : Anchor Hyper Reference
|
- <A HREF="이동할 페이지 경로"> </a> : 페이지간의 이동(NAME없이 단독으로 사용)
- <A HREF="이동 경로" TARGET="_BLANK"> </a> : 새 페이지에 지정된 웹 페이지가 열림
- <A HREF="이동 경로" TARGET="_SELF"> </a> : 현재 자신의 페이지에 지정된 웹 페이지가 열림
- <A HREF="이동 경로" TARGET="_PARENT"> </a> : 바로 이전 페이지에 지정된 웹페이지가 열림 (프레임으로 구성된 웹 페이지일 경우 이미 구성된 웹 페이지는 사라지고 현재 프레임이 속해 있는 바로 위 프레임셋 영역에 지정된 웹 페이지가 표시된다. 결과는 _TOP과 같게 보여진다.)
- <A HREF="이동 경로" TARGET="_TOP"> </a> : 최상위 페이지에 지정된 웹 페이지가 열림 (기존의 구성된 웹 페이지는 사라지고 지정된 웹 페이지가 표시되는 것은 _PARENT와 같지만 두 개 이상의 프레임셋으로 구성된 경우 모든 프레임을 무시하고 지정된 웹 페이지를 표시하게 된다.)
|
5. 예제-3 (타겟을 이용한 하이퍼링크)
|
[Source] |
|
<html>
<head>
<title>
하이퍼 링크
</title>
</head>
<body>
<a href="http://www.webmadang.net">웹 마당으로 이동</a><p> <!--타겟 생략시 기본은 _self-->
<a href="http://www.webmadang.net" target="_self">현재 페이지에 웹 마당 홈피 띄우기</a><p>
<a href="http://www.webmadang.net" target="_blank">새 페이지에 웹 마당 홈피 띄우기</a><p>
<a href="http://www.webmadang.net" target="_parent">이전 페이지에 웹 마당 홈피 띄우기</a><p>
<a href="http://www.webmadang.net" target="_top">최상위 페이지에 웹 마당 홈피 띄우기</a><p>
</body>
</html> |
6. <Body Link/Vlink/Alink> : Vlink(Visited Link) / Alink(Active Link)
|
- <BODY LINK="#ff0000"> </BODY> : 일반적인 하이퍼링크의 색상을 지정(LINK="RED"와 같음)
- <BODY VLINK="#00ff00"> </BODY> : 단 한번이라도 링크한 경우의 색상을 지정 (방문한 링크)
- <BODY ALINK="#0000ff"> </BODY> : 누르고 있을 때 링크의 색 지정 (활성화된 링크)
|
7. 예제-4 (하이퍼 링크 색상 바꾸기)
|
[Source] |
|
<html>
<head>
<title>
하이퍼 링크색상 바꾸기
</title>
</head>
<body link="darkblue" vlink="deeppink" alink="lawngreen">
<a href="http://www.webmadang.net">웹 마당 강좌 더 보기</a>
</body>
</html> |
▶ 하이퍼 링크 관련 태그 중 _Top와 _Parent는 결과론적으로는 같지만 그 속내는 차이를 둔다. 쉽게 풀어 말하자면 _Parent는 자신의 바로 위인 아버지를 뜻하고 _Top는 제 1대 선조격이라 생각하면 이해가 될런지 모르겠다. ^^
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이
