원하는 곳으로 자유롭게 - Link(1)


링크(Link)란.."하이퍼링크"(hyperlink)를 줄인 말입니다. "하이퍼링크"(hyperlink)란 한 정보 개체로부터 다른 곳으로 선택적인 연결을 해주는 통로입니다. 즉, 웹페이지 끼리, 웹사이트 끼리 또는 이미지, 메일, 또는 파일로 연결 시켜주는 것을 말합니다. 링크의 형태는 단어에 밑줄이 쳐져 있다든지 마우스를 가져다 대면 커서가 손바닥으로 변하는 그림입니다. 이것을 클릭하는 순간, 이용자가 원하는 곳으로 빠르게 위치이동을 시켜 주거나 다른 파일을 가져올 수도(download) 있게 되는데요. 이 강조되어 있는 개체를 앵커(Anchor)라고 부르고, 앵커와 그 개체가 합쳐져 하이퍼텍스트 링크를 구성합니다. 제 생각엔 WWW의 가장 큰 장점이 바로 이 hyperlink가 아닌가 해요. 아주 간단한 웹 페이지라 하더라도 이 link만 제대로 시켜 놓는다면 무궁무진한 분량의 자료가 될 수도 있잖아요? 그럼, 이 멋진 Link에 대해서 한 개씩 살펴보도록 할까요?

"A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web."


텍스트나 이미지에 링크걸기

현재 페이지의 특정위치로 이동

다른 페이지의 특정위치로 이동



1. 텍스트나 이미지에 링크 걸기


<A href="파일이름 or URL">...</A>


A는'Anchor'의 약자로 '닻'이라는 뜻입니다. A는 웹의 바다에 링크라는 '닻'을 내리는 것을 의미합니다. href는 'Hyper REFerence'라는 용어에서 온 것입니다. 즉, Hyper 기능을 가진 링크를 어디어디에서 참조하라는 의미입니다.

즉, "A href는 웹의 바다에 닻을 내려 링크가 걸려 있음을 표시하고 다음에 오는 Hyper 기능을 가진 URL을 참조하라"라는 의미입니다.

A태그는 텍스트 문서와 이미지의 경우는 다른 곳으로 이동하는 기능을 하며, 파일의 경우에는 다운로드 기능을 합니다.


첫째, 링크태그의 기본원리
  1. 링크태그의 기본은 (a)...(/a)태그입니다.
  2. 어느 곳으로 연결시켜줄 것인가를 지정해 주어야하는데 이걸 지정해주는 속성이 href="주소" 속성입니다.
둘째, 연결태그 A가 갖추어야 할 조건
  1. 링크를 걸어 줄 수 있는 내용물은 텍스트 or 이미지
  2. 링크를 클릭했을 때 이동할 URL 삽입
셋째, 연결태그 A의 중요 속성과 모양
  1. A태그는 문서와 문서의 연결고리 역할을 하며, 그 속성으로는 href, name, target 등이 있습니다. 하지만 이 A태그는 href나 name속성 중 하나는 반드시 사용해야 하는 제약이 있습니다.
  2. 연결태그 A는 웹 브라우저에 나타날 때 일반문서의 텍스트들과는 달리 색상에서 다른 데이터들과 차이가 나며 밑줄이 그어져 있습니다.



<html> <head> <title>텍스트나 이미지에 링크걸기</title></head> <body> <p> ★ 텍스트에 링크를 건 예제 </p> ☞ <a href="http://truesea.net/2000/" target="_blank">2000원으로 아침상차리기</a> <p> ★ 이미지에 링크를 건 예제</p> ☞ <a href="http://truesea.net/2000/" target="_blank">2000원으로 아침상차리기 <img src="img/anihot.gif"></a> </body> </html>

★ 텍스트에 링크를 건 예제

☞ 2000원으로 아침상차리기

★ 이미지에 링크를 건 예제

☞





1. 이미지 링크 시 발생하는 에러

위의 그림 중 첫 번째는 정상적으로 링크가 걸린 경우이고, 두 번째와 세 번째는 링크가 잘못 걸려 나타나는 현상을 표시한 것입니다. 이런 문제는 아래에 보시는 것과 같이링크 사이에 공백이 삽입되어 발생합니다.


<A HREF="http://www.truesky.net"><img src="doll.gif"> </A>

위와 같이 (A)...(/A)태그 사이에 이미지가 삽입될 때 공백이 들어가면 경우에 따라 두 번째와 세 번째 이미지와 같은 현상이 발생합니다.
에러 현상을 구체적으로 설명하면, 두 번째 이미지는 이미지 옆으로 밑줄이 나타나고, 세 번째 이미지는 마우스로 이미지를 누르고 있을 경우 이미지 옆쪽으로 점선모양의 작은 사각형이 생깁니다.
이런 경우를 웹에서 자주 보게 되는데, 주 원인은 엔터의 사용에 있는 경우가 가장 많다고 하는군요. html문서는 엔터도 하나의 스페이스 공간으로 생각하기 때문입니다.

<A HREF="http://www.truesky.net"> <img src="doll.gif"> </A>

2. 이미지 링크시 클릭할 때 점선 제거

두 이미지의 링크 상태를 소스를 통해 살펴 보겠습니다. onfocus='this.blur()'를 적용하면 링크시에 나타나는 점선을 없앨 수 있습니다.

일반적인 경우 <A HREF="http://truesky.net/ticlub"><img src="doll.gif"></A> 링크 점선을 없앤 경우 <A HREF="http://truesky.net/ticlub" onfocus='this.blur()'><img src="doll.gif"></A>


위의 그림을 눌러 점선이 나타나는지 확인해 보세요.

3. 텍스트 링크에 대체 텍스트 사용


이미지에는 alt태그를 사용하여 대체 텍스트를 만듭니다. 텍스트 링크에도 이런 효과를 적용할 수 있는데 이것을 "Tool Tip"이라고 합니다. "Tool Tip"은 title=" "형식으로 사용합니다.


<A HREF="http://truesky.net/ticlub" title="인터넷을 좋아하는 교사">눌러봐용!</A>

눌러봐용!

(위의 글자에 마우스를 슬며시~ 대 보세요.^^*)


2. 현재 페이지의 특정위치로 이동


①<A href="#이름">...</A>, ②<A name="이름">...</A>


이 태그는 한 페이지에 많은 내용이 있을 경우 특정 위치로 바로 이동하게 할 때 사용합니다. 제가 지금 쓰고 있는 이 강좌도 이걸 이용하고 있는데요. 위쪽의 작은 table속에 있는 목차를 클릭하면 그 내용이 들어 있는 위치로 바로 이동을 하고 있죠?

  1. A href는 링크가 걸려 있음을 표시하고 있는데 다음에 오는 위치를 참조하라는 것입니다.
  2. 그리고 #부분은 네임포인트라고 하는데 이것은 링크를 거는 곳에 사용됩니다.
  3. A name은 A href의 내용을 클릭했을 때 찾아갈 이름을 지정합니다. 이름은 마음대로 정하시면 됩니다.
  4. 그러나 "name에 적용할 이름"은 항상 동일해야만 제대로 실행이 됩니다.



<A HREF="#1">1.엠파스 의 연산자</A> <A HREF="#2">2.구글 의 연산자</A> <A HREF="#3">3.네이버 의 연산자</A> <A HREF="#4">4.야후 의 연산자</A> <A NAME="#1">1.엠파스 의 연산자</A> <A NAME="#2">2.구글 의 연산자</A> <A NAME="#3">3.네이버 의 연산자</A> <A NAME="#4">4.야후 의 연산자</A>




3. 다른 페이지의 특정 위치로 이동


①<A href="URL#원하는 위치의 이름">, ②<A name="원하는 위치의 이름">


바로 위에서 배운 태그와의 다른 점은 동일 문서 내에서의 링크가 아닌, 다른 문서의 특정지역으로 이동할 수 있게 하는 것입니다. 따라서 이동할 문서의 파일명(URL)을 앞에 써주면 되겠습니다. 크게 다른 점은 없죠? 바로 이 부분이 지난 2회 경진대회 2차예선 홈페이지 문제에 출제 되었던 내용이었습니다.



<A HREF="원하는 위치의 URL#5">5.알타비스타 연산자</A> <A HREF="원하는 위치의 URL#6">6.한미르의 연산자</A> <A HREF="원하는 위치의 URL#7">7.심마니의 연산자</A> <A HREF="원하는 위치의 URL#8">8.미스 다찾니의 연산자</A> <A HREF="원하는 위치의 URL#9">9.까치님께서 정리하신 연산자</A> <A NAME="#5">5.알타비스타 연산자</A> <A NAME="#6">6.한미르의 연산자</A> <A NAME="#7">7.심마니의 연산자</A> <A NAME="#8">8.미스 다찾니의 연산자</A> <A NAME="#9">9.까치님께서 정리하신 연산자</A>
5.알타비스타 연산자
6.한미르의 연산자
7.심마니의 연산자
8.미스 다찾니의 연산자
9.까치님께서 정리하신 연산자