퐌다의 HTML 강좌

HTML 태그 배우기 6-1탄 - 하이퍼링크(Hyper Link) / 문서 연결하기 -

퐌다 2011. 4. 25. 09:10


안녕하세요~ 여러분의 HTML 태그 마스터 길라잡이 퐌다 인사 올리겠습니다.
금일 강좌는 지난 강좌 말미에 잠시 언급했던 하이퍼링크에 대해서 배워보겠습니다.

혹시라도 지난 강좌를 못보셨던 분들은 아래 지난 글 보기를 선택하셔서 원하는 부분을
보고 오시기 바랍니다~ 그래야 실력이 늘어요~ㅎ


지난 글 보기



  학습 목표

● Hyper Link 사용법을 이해한다.
● HTML 내부 문서, 외부문서를 링크하는 방법을 익힌다.
● E-mail 링크하는 방법을 직접 사용해 본다.



하이퍼링크란 윈도우의 도움말 같은 형태로 문서안에 특정 문자열이나 이미지를 마우스로 클릭했을 때,
관련 된 다른 문서를 연결해 주는 것을 말 합니다.

하이퍼링크에서 적용할 수 있는 형식은 자신의 홈페이지에서 다른 홈페이지로 연결하거나 다른 문서로 연결하는 방법
또는 자신의 홈페이지 안에서 연결하는 방법 등이 있습니다.



  <A>...</A> 태그 기능 및 속성 알기








HTML 문서에 하이퍼링크를 연결하기 위해서는 앵커(<A>) 태그가 사용됩니다.
아래 그 기능 및 속성에 대해 정리해보았습니다.


<A>...</A> 태그
- 기능 : 링크 지정
- 속성 : HREF="html문서"  ;  "그림파일"  ;  "URL"",  NAME="레이블 이름" ,  TARGET="프레임 이름"  


A는 "Anchor(닻)"의 약자로 <A>태그 사이의 문자들은 다른 일반 문자와 색깔이 다르며, 보통 밑줄이 그어져 있습니다. 
또한,  마우스 포인터를 그 문자위에 갖다 놓으면 손 모양의 아이콘으로 바뀝니다. 

링크는 내 컴퓨터 안의 다른 HTML 파일연결과 내부 문서연결, 웹의 다른 문서, 그리고 E-MAIL을 링크시킬 수 있습니다.



  다른 문서로 연결하기




현재 작성하고 있는 문서에서 임의의 다른 문서로 연결하기 위한 방법으로
다음과 같은 형식으로 HTML태그를 사용하면 됩니다.

<A href="문서파일명"> 다른 문서 연결하기 </A>

'문서파일명'이라고 적힌 곳에는 링크 시키고자 하는 문서 파일명을 넣어주면 되는데,
연결할 문서가 현재 문서와 다른 폴더에 있거나 다른 드라이브에 있다면 문서파일명 앞에 경로명을 넣어 주어야 합니다.

경로명에는 상대경로와 절대경로 두 가지가 있는데, 상대경로는 현재파일을 기준으로 한 경로명이고,
절대경로는 현재 드라이브에 자신의 HTML 파일이 있는 곳까지의 경로명을 모두 써주어야 합니다.
말이 조금 어려운가요? 

지난 강좌에 이어 이번 강좌에서도 상대경로와 절대경로라는 말이 또 나왔는데요.
이부분에 대해서는 따로 강좌를 작성해서 이해시켜 드리도록 하겠습니다. 일단 제가 이끄는데로 따라오시면 됩니다.

그럼, 하이퍼링크 문서를 만들어 보도록 하겠습니다.


하이퍼링크 문서 작업을 하기 위해서는 두개의 html 문서가 필요합니다.
하나는 원래 웹문서이고 나머지 하나는 원래 문서에 나와있는 링크를 클릭 했을때 이동하게 되는 웹문서로 사용됩니다.

메모장을 열어 위 그림에 나와있는 소스를 각각 입력하고,
파일명을 '다른 문서 연결하기.html' 과 '다른 문서 연결하기 결과.html' 로 하여 바탕화면에 저장합니다.
이때, 필히 두개의 웹문서는 바탕화면에 있어야 합니다.(경로 지정 때문입니다.)

그 후, '다른 문서 연결하기.html' 을 웹브라우저로 열어 하이퍼링크로 연결된 문자를 클릭하면 아래 그림과 같이
새로운 창으로 '다른 문서 연결하기 결과.html' 이 열리는 것을 확인 할 수 있습니다.


여러분들도 저와 같은 결과가 나오셨나요? 똑같이 나왔다면 제대로 작업이 된 것입니다.
혹시라도 잘 안되시는 분들을 위해 파일 첨부해 드리겠습니다. 
바탕화면에 그대로 저장하셔서 실행하시면 됩니다.

다른 문서 연결하기 결과.html

다른 문서 연결하기.html
그리고 위 소스 중에 target="_blank" 라는 문구가 보이는데요. 여기서 쓰이는 taget 은 문서를 보여주는 방법을 규정합니다.
전체 화면에 보여주느냐... 새창으로 보여주느냐... 등으로요.

○ _SELF   : 링크된 새로운 문서를 현재의 프레임에 보여준다.
○ _PARENT   : 현재 프레임의 상위 프레임을 보여준다.
○ _TOP   : 화면의 모든 프레임을 지우고 화면 전체에 보여준다.
○ _BLANK   : 현재 창을 그대로 두고, 새로운 창을 열어 보여준다.



  문서안에 링크 연결하기



이번에는 문서안에 링크를 연결해 보도록 하겠습니다.
문서안에 링크 연결하기란 같은 페이지 내에서 보여주고 싶은 부분에 이름을 주어 그 이름을 링크시키는 것인데요.

한 화면에 너무 많은 내용이 들어가면 스크롤바를 계속 내리면서 보아야 하기 때문에 조금 불편합니다.
이런 경우 스크롤바를 이용할 필요없이 쉽게 이동할 수 있는데,
필요한 부분에 NAME을 지정해 두고 그 이름을 선택하면 바로 그 문서의 특정위치로 이동하게 되는 것 입니다.


메모장에 위에 나와있는 소스를 입력하세요.

그리고 'HTML의 첫걸음' 과 '위로 돌아가기' 사이에 아무 내용이나 채워 우측에 웹브라우저 스크롤이 생기게 만든 다음
하단에 있는 '위로 돌아기기'를 눌러보세요. 제대로 입력하셨다면 'HTML의 첫걸음' 이 있는 최상단으로 이동하셨을 겁니다.
이기능은 주로 문서가 길어질 때, 이용자의 편의를 위하여 원하는 부분으로 바로가기 위해 사용합니다.

저는 여기 문서자체에 링크를 걸어봤습니다. 아래 '위로 돌아가기'를 눌러보세요~^^

위로 돌아가기





  글을 마치며..


이상으로 하이퍼링크를 이용하여 외부문서 및 내부 문서를 연결하는 방법에 대해 배워보았습니다.
다음 시간에는 학습목표 마지막에 있던 E-mail 링크하는 방법과 다른 사이트로 연결하는 방법에 대해 배워보겠습니다.

다음시간까지 오늘 배운 내용 잘 숙지하시고 연습도 많이 해보세요~^^ 백문이불여일타!!


 퐌다의 추천 도서




저작자표시 비영리 변경금지