A Element (Link | Bookmark)

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

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

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

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

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

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

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

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

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

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

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

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

위의 예제 중에 하나 눈여겨 볼 것이 있는데, [<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를 클릭해서 다른 문서를 열게되면 항상 그 문서의 상단으로 이동하게 되는거구요.

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