HTML 강좌 | 하이퍼링크(Hyperlink) 만들기

하이퍼링크(Hyperlink)는 <a> 태그로 만듭니다.

링크의 대상은 웹페이지, 파일, 이메일 등이 될 수 있으며, href 속성으로 이동할 주소를 정합니다.

웹페이지, 파일로의 하이퍼링크

하이퍼링크를 만드는 기본 문법은 다음과 같습니다.

<a href="url">Link Label</a>

url에는 이동할 웹페이지의 경로가 들어갑니다.

기본적으로 링크를 클릭하면 현재 페이지에서 링크 대상으로 이동합니다. 만약 새 창 또는 새 탭에서 링크를 열고 싶으면 다음과 같이 target 속성을 추가합니다.

<a href="url" target="_blank">Link Label</a>

target 속성값에는 _blank 이외에 _self, _parent, _top 등이 있습니다. _self가 기본값이고 나머지는 페이지를 frame으로 나누었을 때 사용합니다.

링크 대상은 보통 웹페이지이지만, 이미지, 동영상, 파일 등 여러가지가 될 수 있습니다. 동영상 플레이어가 실행되거나 파일이 다운로드 되는 등 웹브라우저의 설정에 따라 처리합니다.

문서 내 특정 위치로의 하이퍼링크

앵커(Anchor)는 HTML 문서에 사용하는 마커(Marker)입니다. 책갈피라고 번역하기도 합니다. 문서 내 원하는 위치에 앵커를 만들고, 그 앵커로 가는 링크를 만들 수 있습니다.

앵커는 <a> 태그의 name 속성으로 만듭니다. 그리고, href 속성값에 name 값을 쓰고, 그 앞에는 #을 붙입니다. 간단한 예는 다음과 같습니다.

<p><a href="#result">Go to result.</a></p>
  ---
<a name="result"><h2>Result</h2></a>

Go to result를 클릭하면 result 앵커가 있는 곳으로 이동합니다. 만약 a.html 문서 내에 있는 result 앵커로 가는 링크를 만들고 싶다면 다음과 같이 하면 됩니다.

<p><a href="a.html#result">Go to result.</a></p>

이메일주소로의 하이퍼링크

이메일 주소로의 하이퍼링크는 다음과 같이 만듭니다.

Contact <a href="mailto:admin@cmsfactory.net">Admin</a>

링크를 클릭하면 메일 프로그램이 실행됩니다. 하지만, 스팸메일 등의 이유로 잘 사용하지는 않습니다.

Category

Created on 2016-11-20 17:49 | Updated on 2016-11-20 17:49

이 글을 공유하기

Kakao

Book navigation