[기초태그강좌] 링크 -클릭하면 넘어가기

오늘은 링크를 한번 배워봅시다. 사실 태그를 배우는 가장 큰 이유가 아닐까 생각되어집니다. 클릭하면 다른곳으로 넘어가는 것~~ 정확한 명칭은 <하이퍼링크> 라고 합니다^^ 다른 문서나 미디어 파일을 연결(Link)시켜주는 것으로, 'anchor(닻)'을 의미하는데~ 그냥 '링크건다' 이렇게 알고 있으면 편합니다.

[링크 기본 태그]

<a href="웹페이지주소">연걸어</a>

▶ <a>태그가 링크의 핵심 태그입니다. 뒤에 쪽에 </a>는 태그의 기본 닫는다는 표현이지요. 'href'는 Hyper와 Reference 라는 요소의 약자입니다. 그냥 외우시면 됩니다 ㅜㅜ  일반적으로 웹페이지주소 이렇게 생각하셔도 무방합니다. 정확하게는 웹페이지주소 URL은 물론 HTML문서, 워드프로세서, 압축파일, 실행파일 등을 모든 종류의 파일로 링크시킬 수 있습니다.

[실제 다양한 사용 예시]

<a href="http://www.naver.com">네이버</a>

<a href="story.html">이야기</a>

<a href="music.wma">음악</a>

<a href="winzip.exe">윈집다운받기</a> 

 

 

[문자로 링크시키기]

오늘은 여러가지 중에서도 문자와 그림으로 링크하는 걸 배워봅시다. 링크태그의 기본은 글씨를 클릭해서 링크를 하는 겁니다.

<a href="웹페이지주소">웹페이지</a>

▶ 위와 같이 사용할 경우 '웹페이지' 라는 글자가 디스플레이 되고 이 글씨를 클릭하면 링크시킨 주소로 넘어가게 됩니다. 들어갈 글자는 필요에 따라 임의로 사용하시면 됩니다.

[타겟(target)의 종류 및 기능]

<a href="웹페이지주소" target="_blank">웹페이지</a>

위와 같이 웹페이지주소 뒤에 target 이라고 해서 붙는 경우가 많습니다. 아니 꼭 사용하는게 좋습니다. 클릭했을때 자기자신창이 바뀔 것인지 새창을 열것인지 등을 결정하는 태그입니다. 일단 어떤 것들이 있는지 살펴볼까요~~

target=_blank
링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고, 새로운 브라우저(새 창, New Navigator)에서 열게한다. 가장 많이 사용합니다.

target=_self
하이퍼링크 시킨 문서를 같은 프레임에서 열게한다. 아무것도 설정하지 않을 경우 기본 설정이다

target=_top
링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된 브라우저 화면으로 열도록 한다. 예전에 프레임을 나눠서 홈페이지를 만들때 필요했던 방식이다. 요즘은 프레임 자체를 안나누고 원프레임으로 많이 사용한다.

target=_parent
기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크한다. 이것 역시 예전에 프레임을 나눠서 홈페이지를 만들때 필요했던 방식이다. 

[그림으로 링크시키기]

마우스로 그림을 클릭할 경우 링크로 이동합니다. 링크태그에서 가장 많이 사용되어지고 실질적으로 필요한 태그이지요^^ 

<a href="웹페이지주소"> <img src="이미지주소" border="0"> </a>

글자 대신 이미지를 넣는 방식입니다. 이미지를 넣는 방법은 지난번 강좌 아래 링크를 참조해주세요^^

2009/09/29 - [IT강좌/태그-이정도는 알자] - [기초 태그 강좌] 이미지 링크 걸기

※ 여기서 중요한 태그 하나~ 바로 border="0" 입니다. 따로 적을려고 하다가 반드시 필요하기 때문에 같이 적어 놓았습니다. 링크의 경우 자동으로 테두리가 생성되고 그 테두리는 클릭해서 색만 바뀔뿐 사라지지 않습니다. 아주 지져분해지게 되죠~ 그래서 그림으로 링크시킬 경우에는 꼭 사용해야 됩니다.


2009/09/28 - [IT강좌/태그-이정도는 알자] - [기초 태그강좌] HTML 문서의 기본 구조