A Element (Anchor | Bookmark)
Home > Document > HTML > 중급 과정 > Anchor & Bookmark

페이지 목차

ANCHOR

A(Anchor) Element 는 Web을 Web 답게 해주는 역할을 하는 Element 라고 할 수 있겠습니다. 지금 이 사이트의 왼쪽 메뉴중에 하나를 클릭하면 그 메뉴에 링크(Link)되어 있는 문서가 오른쪽 프레임에 나타나는 것 처럼 수 많은 문서 또는 사이트와 연결 시키는 역할을 합니다. 우리가 Web이라는 단어를 쓰는 이유도 이러한 연결들이 마치 거미줄(Web) 처럼 서로 얽혀 있다고 해서죠...

이러한 연결은 또 하나의 의미를 가지는데, 그건 바로 공유(Sharing) 라는 것 입니다. 함께 나눈다는 뜻이 되겠죠. 현재와 같은 네트웍이 형성되기 전에는 똑 같은 자료라도 각자가 작업을 해야 했습니다. 그렇지만 네트웍이 형성된 지금은 어떤 자료를 각자가 작업하는게 아니라 그 자료를 어떤 장소에 저장해 놓고 자료가 있는 장소와 자료 이름만 가르쳐 주면 그걸 아는 사람이면 누구나 그걸 나눌 수 있다는 뜻입니다. 그게 바로 공유 정신이기도 하구요. 이 걸 잘 이용하면 먼가 큰 걸 할 수 있을 것 같지 않습니까? 아마 각자가 다른 자료를 만들어서 서로 그걸 서로 나눌 수만 있다면 그 효과는 어마 어마 할 것입니다. 바로 그런 것을 하기 위한 기본적인 기능을 페이지가 되겠습니다.

Legend : Optional, Forbidden, Empty, Deprecated, Loose DTD, Frameset DTD   [표 보는 방법]
ElementStart tagEnd tagEmptyDeprecatedDTD
A     


A
href
hyperlink reference
hypertext를 클릭했을 때 연결되는 url 이나 uri 또는 문서의 책갈피(Bookmark)
url <A href="http://www.w3c.org">W3C</A>
uri <A href="http://www.w3c.org/default.html">index</A>
bookmark1 <A href="#bookmark01">책갈피1</A>
bookmark2 <A href="http://www.w3c.org/default.html#mark1">책갈피2</A>
target
문서를 Load시킬(띄울) 창 또는 프레임 이름. 각 이름 앞에 '_'(underbar)를 붙입니다.
_self 현재창 : 즉, 자기 창 스스로에 문서를 띄웁니다. (Default)
_blank 새창 : 현재 창은 그대로 있고, 새창에 문서를 띄웁니다.
_top 프레임(frame)으로 나누어진 문서의 최 상위 프레임.
_parent 프레임(frame)으로 나누어진 문서의 한 단계 상위 프레임.
E-mail Link
E-mail 보낼 주소를 Link시킵니다. mail과 to 붙여씀.
예) <A href="mailto:webmaster@cadvance.org">이메일 보내기</A>
공통 속성
dir, id, class, style, title, 발생하는 Event는 공통 속성표 를 참조
사용 예)
<A href="http://kr.yahoo.com" target="_blank">야후 코리아 새창 띄우기</A>


첫번째 고비, 넘어야 할 산...
모든 분야가 그렇지만 HTML에서도 반드시 넘어야 할 고비가 있게 마련이져... 바로 이 A(Anchor) Element가 그런 셈이죠. 사용법 자체는 매우 간단합니다. 예를 들어

<A href="url 또는 uri" target="창이름 또는 문서를 띄울 프레임이름">hypertext</A>

와 같습니다. 그런데 문제는 href="url | uri" 바로 이 부분... 문제의 attribute가 되겠습니다. DOS 시절 부터 컴퓨터를 사용했거나, 컴퓨터에 익숙한 사람들에게는 사실 별 문제가 아닙니다만 이제 막 컴퓨터를 시작한 사람들에겐 과연 첫 번째 난관이라 할 수 있겠군요. 제가 HTML 입문에서 설명한 HTML 문서의 특징 중 하나인 문서 안에 다른 파일을 포함 시키지 못한다는 항목이 되겠습니다. 아래에 나름대로 자세히 설명하긴 하겠지만 이해가 잘 안 간다면 주변 사람들에게 물어서라도 꼭 이해하도록 하세요. 이거 모르면 웹 디자인?... 그건 이미 물 건너간 얘기고 말짱 황입니다. HTML 중급 과정에 첫 페이지로 A Element를 선택한 이유가 이 걸 모르고서는 절대 중급이 될 수 없다는 뜻이겠죠...




1. 앵커(Anchor)

앵커(Anchor) 라는 단어 처음 듣는 단어는 아니죠? 뉴스를 진행하는 진행자를 앵커라고 부르기도 하고, 배가 부두에 정박해서 배를 고정시키기 위해서 바닷속에 내리는 갈구리같이 생긴 닻도 앵커라고 합니다. 뉴스 앵커는 시청자와 뉴스를 연결해 주고, 배의 앵커는 배와 부두를 연결해 주는 역할을 하죠. HTML에서 이 앵커라는 단어의 뜻은 다른 문서와의 연결(Link) 또는 문서가 길어질 경우 문서내에 지정하는 특정 위치(책갈피 : Bookmark)로의 이동을 말합니다. 이와 같이 문서를 연결시키려면 경로(url 이나 uri)를 표시해 줘야 하는데, 경로는 절대경로상대경로 두 가지 방법으로 표시합니다.

  • 절대 경로
    절대경로는 웹사이트의 고유주소(url)와 url 내부의 folder와 filename 전체를 다 표시해 주는 방법입니다. 사실 절대 경로를 사용하면 별로 머리 아플 일이 없습니다. 예를 들어 아래와 같이 http://www.webdesigners.co.kr 이라는 url 이 있고 sub1 folder에 Pictuer.gif 이라는 Image file이 있다고 한다면 "http://www.webdesigners.co.kr/sub1/Picture.gif" 로 표시해 주면 됩니다.


  • 상대 경로
    상대경로는 그야말로 상대적인 경로를 뜻하는데, 상대적이라는 말은 어떤 위치를 기준으로한 상대적인 위치와 filename이 되겠습니다. 아래의 표를 보시죠. A ~ E, 가 ~ 마, 1 ~ 5를 각각 전철역이라고 하고 나는 현재 'A' 역에 있습니다. 그런데 어떤 사람이 와서 '4' 역으로 갈라믄 어뜩하져?' 하고 물어 본다면 뭐라고 대답하면 좋을까요? 저 같으면 현재 이 역에서 오른쪽으로 3 정거장가고, 거기에서 아래로 2 정거장 가라고 할 것 같군요. 그렇다면 기준위치는 어디가 되는거죠? 물론 현재 이 역인 A 역이 되겠군요. 이와 같이 상대 경로란 어떤 위치나 어떤 위치에 있는 파일을 기준으로한 상대적인 경로라고 할 수 있습니다.

    전철역 안내도
    A B C D E
    1 2 3 4 5

대략 이해는 했으리라 보지만 아직 이런 의문이 남아 있으리라 봅니다. 골치 아프지 않게 절대경로를 쓰지 왜 상대경로 운운하느냐 하는 의문 말입니다. 그 이유는 이렇습니다. 우리가 직접 서버를 운영하든 무료 홈페이지 계정을 이용하든 우리가 사는 집과 마찬가지로 '이사'를 하는 경우가 생기게 마련이죠. 예를 들어 http://www.homeNow.com 이라는 도메인을 사용하다가 http://www.homeMove.com 이라는 도메인으로 이사를 합니다. 이럴 때 모든 문서를 절대 경로로 표시했다면 (대략 100개 정도의 문서를 Link했다고 치죠.)
http://www.homeNow.com 라는 절대경로를 모두 http://www.homeMove.com 로 수정해야 되는 불상사가 생긴단 말이죠. 어째 좀 이해가 가시는지...



2. 절대경로와 상대경로의 DHTML

아래의 Table(표)에 절대경로와 상대경로를 Dhtml 을 사용하여 보다 Dynamic 하게 표현해 보았습니다. 아래의 표를 좀 더 잘 이해하기 위해서 각 폴더와 파일에 대한 설명을 잘 보시기 바랍니다. 일단 http://www.webdesigners.co.kr 이라는 도메인이 있다고 가정하겠습니다. 실제로는 없는 도메인이죠...

폴더와 파일에 대한 설명
root http://www.webdesigners.co.kr 전체를 의미하면 root folder라고 한다.
sub1 root folder의 한단계 하위 folder.
Picture.gif root folder의 한단계 하위 folder인 sub1 folder에 저장된 파일
sub2 root folder의 두 단계 하위 folder이며 sub1 folder의 한 단계 하위 folder
sub3 root folder의 세 단계 하위 folder이며 sub1 folder의 두 단계, sub2 folder의 한 단계 하위 folder
각 folder 의 문서 각 폴더마다 folder이름.html (root에는 index.html) 이 있습니다.
../ (../) 는한 단계 상대적 상위 folder 라는 표시로 사용한다. (../../) 이라고 표시하면 두 단계 상위 folder, (../../../) 이라고 표시하면 세 단계 상위 folder의 상대적 경로 표시.


아래의 설명을 잘 보고 Picture.gif라는 Image파일을 각 folder에서의 상대 경로로 어떻게 표시하는지, 반대로 Picture.gif 의 위치에서 각 folder의 상대 경로를 어떻게 표시하는지 잘 이해하시기 바랍니다. 매우 중요한 개념입니다.

 
http://www.webdesigners.co.kr
root - index.html
sub1 - sub1.html
Picture.gif
sub2 - sub2.html
sub3 - sub3.html
Box나 글자 위에 마우스를 올리면 상대 경로를, Box를 클릭하면 절대 경로를 볼 수 있습니다.




hkp_devf (1K) 상대 경로를 사용하기 위한 필수 조건
문서가 저장되어 있어야 합니다. 어떤 Editor든지 저장하지 않은 상태에서는 작업 내용이 Ram 이나 Swap file 이라는 공간에 있을 뿐입니다. 저장을 해야 그 파일의 위치가 생기게 되고, 위치가 생겨야 비로소 상대 경로를 사용할 수 있습니다.




3. 현재 문서에서의 Bookmark(책갈피)

문서의 내용이 너무 길어지다 보면 아래 위로 스크롤을 한참해야하고, 어떤 내용을 찾기도 힘들게 됩니다. 이럴 때 문서내에서 이동하는 Bookmark를 사용하면 보다 편리하게 문서를 볼 수 있습니다. 내 마우스엔 휠이 달렸는데 뭔 걱정이냐구요?... 그것도 어느 정도 길이일 때 얘기죠... 이 문서를 함 보시져... 가운데 손가락이 쩜 피곤하죠?... 더 긴 문서도 무쟈게 많습니다.

아래의 예제는 같은 문서 내의 Bookmark로 이동하는 Link 입니다. 지금부터 아래의 예제로 실습을 해 보는데, 문서가 길어야 현장감 넘치는 효과를 실감할 수 있으므로 우리는 의도적으로 <BR> Tag을 많이 사용해서 문서가 스크롤이 많이 되도록 해 보죠... 아래에 표시한 갯수만큼 <BR> Tag을 40개씩 넣어보세요.

Bookmark 예제 (예제를 작성한 다음 Link를 클릭하면서 스크롤바의 위치를 잘 보세요.)
<HTML>
  <HEAD>
      <TITLE>책갈피(Bookmark) 만들기</TITLE>
  </HEAD>
  <BODY>

        [<A href="#bookmark01">책갈피 1</A>] 
        [<A href="#bookmark02">책갈피 2</A>] 
        [<A href="#bookmark03">책갈피 3</A>] 
        [<A href="#bookmark04">책갈피 4</A>] 
        [<A href="#bookmark05">책갈피 5</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><BR><BR><BR><BR>
        
        <A name="bookmark01">첫 번째 책갈피</A> [<A href="#top">TOP</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><BR><BR><BR><BR>
        
        <A name="bookmark02">두 번째 책갈피</A> [<A href="#top">TOP</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><BR><BR><BR><BR>
        
        <A name="bookmark03">세 번째 책갈피</A> [<A href="#top">TOP</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><BR><BR><BR><BR>
        
        <A name="bookmark04">네 번째 책갈피</A> [<A href="#top">TOP</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><BR><BR><BR><BR>
        
        <A name="bookmark05">다섯 번째 책갈피</A> [<A href="#top">TOP</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><BR><BR><BR><BR>
        
    </BODY>
</HTML>
exec_button (1K)

위의 예제 중에 하나 눈여겨 볼 것이 있는데, [<A href="#bookmark01">책갈피 1</A>] 행에서 '책갈피 1'을 클릭하면 <A name="bookmark01">첫 번째 책갈피</A> [<A href="#top">TOP</A>] 처럼 name="bookmark01"로 bookmark 이름을 주었기 때문에 그 위치로 이동하는 건 당연하지만 <A name="#top">TOP</A> 이라는 책갈피는 Link해 놓은 적이 없다는 사실입니다. 그런데도 문서의 맨 위로 이동하게 되져?... 그건 우리가 사용하는 브라우저 창 상단의 고유 이름이 TOP이기 때문입니다. 그래서 TOP은 따로 name="top" 으로 책갈피 이름을 주지 않아도 되는 거랍니다. 이 페이지 하단의 'TOP'이라는 hypertext도 마찬가집니다. 그래서 어떤 hypertext를 클릭해서 다른 문서를 열게되면 항상 그 문서의 상단으로 이동하게 되는거구요.





4. 다른 문서의 Bookmark(책갈피)로 이동
다른 문서의 책갈피로 이동할 수도 있습니다. 그러니까 문서 Link와 Bookmark 이동이 동시에 되는 셈이죠. 열려고하는 문서 이름이 page1.html이고 page1.html 내의 책갈피 이름이 mark1 이라면

<A href="page1.html#mark1">page1의 mark1 책갈피로 이동</A>

이렇게 표시하면 되겠습니다.



5. Body Element에 사용하는 링크걸린 글자에 대한 Attribute
Body Element 의 글자에 대한 속성
text 문서 전체에 지정하는 글자색
link 링크 걸린 글자색
alink active link : 링크 글자(Hyper Text)를 클릭했을 때의 글자색
vlink visited link : 방문했던 링크의 글자색


예제




링크 예제와 title 속성의 사용

다음은 anchor Element를 사용하여 링크를 나열하는 예제와 title이라는 속성을 사용하여 마우스 커저가 hypertext위에 올라 왔을 때 풍선 도움말을 띄우는 방법을 나타내고 있습니다. 이 title 속성은 화면에 출력되어서 면적을 차지하는 모든 Tag에 적용되는 속성입니다. 다음 페이지의 Web Image 에서 나오는 alt 속성과 같은 효과를 주지만 용도는 다릅니다. 이 title 속성을 사용하면 여러분 홈페이지를 방문한 user들이 hypertext를 클릭해서 링크를 일일이 보지 않아도 설명을 보고 무슨 링크라는 것을 알 수 있습니다. 즉, 필요없는 클릭을 낭비하지 않게 해주는 역할을 하는거져... 가급적 친절하게 많이 사용해 주도록 하시져. 입력 Source 중에 &nbsp; 가 뭔지 아시져?... 모르면 여기 클릭.

입력




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색