size="2">6. 내부링크와 외부링크
Html 문서를 하나하나 만들면 이들
문서를 링크시켜 주어야 합니다. 링크를 시킨다는 것은 어떤 이미지나
글을 마우스로 클릭했을 때 연결된 다른 문서로 이동하는 기능을 말합니다.
이것이 Html 문서의 가장 큰 특징이자
장점이라고 할 수 있습니다. 이러한 기능을 하이퍼텍스트(HyperText)라고
하며, 문서와 문서를 서로 이동이 가능하도록 하는 기능을 링크(Link)라고
합니다.
링크에는 내부링크와 외부링크 두
가지가 있습니다. 내부링크와 외부링크의 차이점은 링크시키려는 것이
내부 문서의 일부분이냐 아니면 다른 문서냐에 따라서 구분을 한다고
보면 됩니다.
1) 내부링크
원하는 정보가 있는
부분으로 빠르게 이동할 수 있도록 한 동일 문서상의 링크입니다. 일명
책갈피 기능이라고도 합니다. 물론 다른 문서의 책갈피를 지정해서 링크를
클릭했을 때 다른 문서의 원하는 부분으로 이동하게도 할 수 있습니다.
<A HREF="#책갈피
이름">...</A>
...
<A NAME="#책갈피
이름">...</A>
예를 들면 아래와 같습니다.
<A HREF="#story1">이야기
하나</A>
<A HREF="#story2">이야기 둘</A>
<A HREF="#story3">이야기 셋</A>
...
<A NAME="story1">이야기
하나</A>
<A NAME="story2">이야기 둘</A>
<A NAME="story3">이야기 셋</A>
<!-- 특히 내부링크를
적절히 이용하면 사용자가 쉽게 정보를 찾을 수 있도록 Html 문서를
꾸밀 수 있습니다. -->
<HTML>
<HEAD>
<TITLE>쎌리의 홈페이지 따라하기!</TITLE>
</HEAD>
<BODY>
<A NAME="꼭대기">
<H3>내부링크와 외부링크 연습입니다.</H3>
</A>
<A HREF="#링크">연습하기</A>
<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 HREF=" target=_blank>http://clipartworld.com"
target="_blank">클립아트</A>
<BR><BR>
<A HREF=" target=_blank>http://nanumi.pe.kr">나누미
홈</A>
<BR><BR>
<A HREF=" target=_blank>http://www.interq.co.kr">무료
인터넷 접속</A>
<BR><BR>
<A HREF=" target=_blank>http://www.bomul.com">보물
자료실</A>
<BR><BR>
<A HREF="#꼭대기">맨 위로
올라갈까요?</A>
</BODY>
</HTML> target="_blank">결과보기
2) 외부링크
Html 문서의 외부에 있는 사이트
주소(URL), Html 문서, 이미지, 파일 등을 연결하여 링크를 만들 때
사용하면 됩니다.
<A HREF="파일
이름 또는 사이트 주소">...</A>
예를 들어볼까요?
<A HREF="story.htm">이야기</A>
<A HREF="http://nanumi.pe.kr">나누미 홈</A>
<A HREF="home.htm"><IMG SRC="home.gif"></A>
<A HREF="http://clipartworld.com" target="_blank">
<IMG SRC=" target=_blank>http://clipartworld.com/image/banner.gif"></A>
"A" 는 "Anchor",
"HREF"는 "Hyper REFerence"의 약자입니다. 그리고
위의 예에서 보면 "이야기"나 "나누미 홈"에 파랗게
밑줄이 생기는데, 그 밑줄부분을 클릭하면 링크시킨 페이지로 이동할
수 있습니다. 그리고 target 이라는 것을 줄 수가 있어요. target이란
하이퍼 링크를 클릭했을 때 링크시킨 페이지가 나타날 대상을 말하는데,
위에서와 같이 target="_blank" 라고 하면 새로운 창에 링크시킨
내용이 나타나죠. 생략을 하면 현재 html이 있는 곳에 페이지가 나타나게
됩니다.
그럼 몇 개 알아볼까요?
_blank :
새 창에 html 문서를 나타낸다.
_top : 프레임으로
나눈 페이지라 하더라도 브라우저 전체 화면에 해당 페이지를 나타낸다.
_parent
: parent란 부모라는 뜻이죠? 이건 자바 스크립트를 공부하면 이해하게
됩니다.
_self :
자기자신을 나타내죠. 이것도 자바 스크립트를 공부하면 개념이
서게 될 겁니다.
위에서 많이 사용하는
것은 "_blank"와 "_top"이 많이 사용되고 이 둘만
알아도 전혀 불편한 점은 없습니다.
<!--
브라우저에서 지원하는 파일들(Html, Url, txt, jpg, gif...) 등의 파일은
링크로 이동하여 브라우저에 나타나지만 exe와 같은 실행파일이나 zip
같은 압축파일을 링크시키면 자동으로 다운로드 Dialogue Box가 나타납니다.
-->
<!--
링크시킨 부분이 처음에는 파란색으로 링크를 클릭하는 순간에는 빨간색,
링크를 클릭하고 나면 보라색으로 바뀌는데 이것은 CSS(나중에 설명해요)나
BODY Tag에 옵션을 주어 변경할 수 있어요. Default는 다음과 같아요.
<body bgcolor="white" text="black" link="blue"
vlink="purple" alink="red"> -->
<!--
CSS는 캐스캐이딩 스타일 쉬트라고 하는데 Dynamic Html을 보면 맨 첨에
나와요. CSS를 이용해서 링크부분의 밑줄도 없앨 수 있답니다. 자세한
내용은 HTML 강좌가 끝나구 Dynamic Html 강좌를 할 때 설명할께요.
--> |
[펌 강의] 6. 내부링크와 외부링크 
