HTML/하이퍼링크

하이퍼링크는 지정 범위의 텍스트 또는 이미지를 다른 페이지로 링크를 걸어서 그 부분을 선택하면 해당 페이지로 이동할 수 있게 하는 요소이다.

보통은 링크라고 불리며 하이퍼링크를 넣는 것을 링크를 건다라고 한다. 인터넷 익스프롤러 등 주요 브라우저에서는 링크를 걸어놓은 문자에서는 밑줄로 표시를 한다.

링크를 걸 때에는 a 요소(Anchor의 줄임말)를 사용한다.

기본적인 사용

<a href="URL">표시시킬 URL 또는 텍스트</a>

a 요소로 둘러싸인 텍스트를 선택하면 지정된 페이지로 이동을 할 수가 있습니다. 텍스트는 지정된 링크의 페이지 내용이 뭔지를 알 수 있는 내용이 바람직하며 ‘여기’, ‘이 링크’와 같은 지시 대명사는 되도록 피하는 것이 좋습니다.

이미지에 링크를 걸 때

<a href="URL"><img src="표시시킬 이미지의 URL" alt="대체 텍스트"></a>

대체 텍스트는 이미지가 표시될 수 없는 환경에서 이미지 대신에 표시를 하는 것이기 때문에 해당 링크의 페이지가 어떤 내용인지를 알 수 있는 것을 적는 게 바랍직합니다. 이미지에 링크를 걸었을 때 브라우저에 따라서 이미지 주위에 테두리를 표시하지만 border="0"을 지정하거나 스타일 시트를 사용해서 테두리를 제거할 수 있습니다.

웹이 아닌 곳으로 링크를 걸 때

브라우저가 직접 처리할 수 없는 형태의 파일이나 프로토콜을 링크로 지정하면 다른 처리가 행해지며 파일의 처리 방법을 확인하는 화면이 나오거나 다른 어플리케이션이 자동적으로 파일을 받아서 링크를 열거나 하는 형태로의 처리가 행해진다.

예시: 메일 주소(mailto 프로토콜)

<a href="mailto:메일 주소">표시시키고 싶은 텍스트</a>
<a href="mailto:메일 주소?subject=메일 제목&amp;body=내용">표시시키고 싶은 텍스트</a>

mailto:메일 주소로 지정하면 메일 주소로 링크를 걸 수가 있으며 링크를 클릭하면 브라우저측에서 지정된 메일 클라이언트로 그 주소가 들어간 메일을 작성하는 화면이 나온다.

subject=에서 메일의 제목, body=에서 메일 내용을 지정할 수 있지만 모든 메일 클라이언트가 그렇게 할 수 있는 것은 아니기 때문에 주의가 필요하다.

링크 타겟

<a href="URL" target="링크 타겟">표시시키고 싶은 URL 또는 텍스트</a>

target 속성을 지정하는 것으로 링크를 여는 방법을 설정할 수 있다. 다만, 강제적으로 새로운 창을 열게 하는 것은 같은 창으로 열고 싶어하는 사용자에게는 폐를 끼칠 수 있으며 전면 화면 표시나 음성 브라우저 사용자에게도 폐를 끼칠 수 있기 때문에 이러한 방법은 피하는 게 좋다.

타겟명	개요
_blank	새로운 창 또는 탭 페이지를 연다
_top	프레임 내의 페이지에서 링크를 걸었을 때 프레임을 모두 제거해서 페이지를 창 전체에 연다
_self	프레임 내의 페이지에서 링크를 걸었을 때, 같은 프레임에서 연다
_parent	프레임 내의 페이지에서 링크를 걸었을 때, 링크 페이지를 프레임을 1단계 제거해서 링크가 있는 곳의 프레임에서 연다
임의 이름	1번째는 새로운 창 또는 탭에서 열리지만, そのページを開いたまま同じターゲットのページを開くとすでに同じ名前で開かれたウィンドウまたはタブが上書きされる。フレームの場合、指定されたtargetと同じname属性を付与されたフレームがあればそのフレームを上書きしてリンク先を開く。

라벨

<a name="임의의 라벨 이름">라벨이 붙은 텍스트</a>

a 요소에 name 속성을 지정하면 그 페이지 내의 그 장소에 라벨을 지정할 수가 있다. 라벨을 지정해두고 그 텍스트나 이미지가 있는 곳으로 바로 이동할 수 있게 된다. 이에 따라서 도중의 내용을 생략할 수 있는 것만이 아니라 임의의 장소로 재빠르게 이동할 수 있기 때문에 페이지 내용이 길 경우 등에 편리하다.

<a href="#라벨 이름">링크를 넣을 넣을 텍스트</a>
<a href="URL#라벨 이름">링크를 넣을 텍스트</a>

페이지 내에서 라벨을 넣은 위치로 이동하고 싶을 때에는 a 요소의 href 속성에 #라벨 이름이라는 속성값을 지정, 다른 페이지 내에 있는 라벨로 이동하고 싶을 때는 해당 페이지의 URL에 #라벨 이름을 붙여서 지정한다.

또한, CSS를 사용할 때에는 파이어폭스 등의 일부 브라우저에서 hover 유사 클래스의 설정이 라벨 텍스트에 반영된다.

ID 속성을 사용한 라벨의 지정

<span id="임의의 이름">라벨을 붙인 텍스트</span>

라벨은 id 속성을 사용해서 지정할 수도 있습니다. id 속성을 사용할 경어에는 반드시 a 요소에 대해서 기술할 필요는 없으며 span 요소 등으로 지정했을 경우에도 라벨로 정확히 기능한다.

<a name="임의의 이름" id="임의의 이름">라벨을 붙인 텍스트</a>

id 속성은 오래 된 WWW 브라우저가 해석할 수 없기 때문에 a 요소에 name과 id의 양쪽을 지정하는 방법도 있다. 이 경우 name 속성과 id 속성은 같은 값을 지정한다.

절대 경로와 상대 경로와 절대 URL

절대 패스는 목적으로 하는 주소를 루트 디렉터리를 기준으로 해서 나타내는 방법이며 상대 경로는 현재 표시되고 있는 페이지 주소 등 특정 디렉토리를 기준으로 링크 파일까지의 상대적인 위치 관계를 나타낸다. 절대 URL은 http://～로부터 적어서 나타내는 방법이다. 외부 서버에 대한 링크에서는 절대 URL을 사용해야 된다.같은 서버 내의 링크에 대해서는 상대 경로와 절대 경로, 절대 URL의 어느 것이라도 사용이 가능하다.

예를들면 같은 디렉터리 내에 있는 파일을 절대 경로나 절대 URL로 링크를 시켰을 경우 디렉터리를 이동하거나 디렉토리 이름을 변경하거나 하면 링크가 기능하지 않게 되지만 여기서 상대 경로를 사용하고 있었을 경우 파일 위치 관계가 바뀌지 않으면 디렉터리에 번경을 해도 링크는 그대로 계록 기능을 한다.

<a href="대문">상대 경로</a>
<a href="/wiki/대문">절대 경로</a>
<a href="http://ko.wikibooks.org/wiki/대문">절대 URL</a>