[HTML] 하이퍼링크

하이퍼링크란 다른 사이트 혹은 같은 문서 내 다른 위치로 이동하는 것을 말한다. 'anchor'의 약자인 <a> 태그를 사용하여 정의한다. <a> 태그는 기본적으로 href 속성을 가지며 이 속성값에 URL을 입력해 원하는 곳으로 이동한다.

<a href="URL">

 

URL에 표기할 수 있는 값으로 다음의 다섯 가지 유형이 있다.

표기 유형	표기 예
절대경로 URL 표시	href="https://www.google.co.kr"
상대경로 URL 표시	href="hello.html" <base> 태그에 기본 URL 지정
페이지 내 요소 위치 표기	href="#top"
프로토콜 URL 표기	https://, ftp://, mailto:, file: 등
스크립트 표기	href="javascript:alert("hello");"

 

웹 사이트 이동

하이퍼링크가 가장 많이 사용되는 경우는 다른 웹사이트로 이동할 때이다. <a> 태그의 href 속성에 연결하고자 하는 웹 사이트의 URL을 지정해 주면 원하는 사이트로 이동이 가능하다. target 속성은 링크를 클릭했을 때 웹 사이트가 열릴 곳을 지정하는 역할을 한다.

 

target 속성값의 종류

속성값	설명
_blank	새로운 웹 브라우저 창에 연다
_self	현재 웹 브라우저 창에 연다(기본값)
_parent	부모 웹 브라우저 창에 연다
_top	웹 브라우저 전체 영역에 연다

 

문서 내 특정 위치로 이동

같은 문서 내에서 원하는 위치로 바로 갈 수 있도록 해주는 책갈피 기능을 할 수 있다. <a> 태그의 name 속성 혹은 id 속성을 이용해 문서 내 이동할 위치를 지정하고, href 속성에 #name 혹은 #id 값을 입력해 해당 위치로 링크를 걸 수 있다.

<a href="#id">id 위치로 이동합니다.</a>
<a href="#name">name 위치로 이동합니다.</a>

<p id="id">이곳은 id의 위치입니다.</p>
<p name="name">이곳은 name의 위치입니다.</p>

 

id와 name 속성의 차이점은 id 속성값이 중복값을 가질 수 없다는 점이다.