HTML+CSS 기초 강의 - 7. 하이퍼링크로 HTML 문서를 연결하기

HTML문서는 하이퍼링크를 통해 진정한 연결형 문서가 됩니다. 

하이퍼링크를 통해 문서의 다른 위치, 또는 다른 문서를 연결함으로써 다른 위치나 다른 문서로 즉시 이동할 수 있게 됩니다.

이렇게 연결된 HTML 문서들은 끊임없이 이어진 하나의 커다란 문서로 거듭나게 됩니다.

거창하게는 그렇지만 

사용방법은 

<a href="#chapter2">클릭하세요</a>

이렇게 간단합니다.

href 속성은 이동할 링크를 입력하는 

<a></a> 사이에 입력된 텍스트 내용이나 이미지를 클릭하면 href 속성에 입력한 위치(URL)로 이동하게 됩니다.

<a href="https://google.com">구글로 이동</a>

이런식으로 하이퍼링크를 사용합니다.

이 하이퍼링크의 "구글로 이동" 텍스트를 마우스로 클릭하면 구글로 이동하게 됩니다.

링크를 입력할때는 상대 경로와 절대 경로에 대해서 알아두어야 합니다.

하이퍼링크는 내 컴퓨터에 있는 문서나 파일을 링크할 수도 있지만 대부분 웹사이트, 또는 웹페이지로써 다른 문서나 위치를 가리키는데 사용합니다.

위의 구글로 가는 하이퍼링크처럼 해당 리소스나 문서, 또는 웹사이트의 전체 경로를 입력해 이동할 위치 경로를 완전하게 표시하는 것을 절대경로라고 합니다.

반대로 HTML문서 자신의 위치를 기준으로 상대적인 위치를 표시하는 것을 상대경로라고 합니다.

상대경로는 내 문서가 있는 내 컴퓨터, 또는 내 사이트 안에서만 유효합니다.

상대경로를 가리킬 경우 현재 HTML문서 위치를 기준으로 위, 현재, 아래 경로를 가리키는 기호를 이용해 상대 위치를 표시합니다.

상대 경로에는 다음 3개의 기호, 또는 하위 경로명만이 올 수 있습니다.

하위 경로명 앞에는 원래 현재 경로명을 표시해야 하지만 생략 가능하기 때문에 하위 경로명이 맨 처음에 나올 수 있습니다.

상대 경로 지정에 사용하는 기호 3개는 다음과 같습니다.

예를 들어 

http://mywebsite.com/subdir/curr.html 

문서 안에서 하이퍼링크를 상대경로로 연결할 경우

../dest.html 과 /dest.html 그리고 절대 경로 http://mywebsite.com/dest.html 은 같은 문서가 됩니다.

./dest2.html, dest2.html, ../subdir/dest2.html 그리고 절대 경로로 http://mywebsite.com/subdir/dest2.html 은 같은 문서가 됩니다.

../../dest.html 과 같은 루트 경로 위의 경로는 지정할 수 없습니다.

상대 경로로 지정할 경우 현재 위치를 기준으로 경로가 결정되고 기준이 되는 현재 위치를 베이스 URL 이라고 합니다.

베이스 URL은 HTML 문서 안에 별도로 정의할 수도 있는데 나중에 <base> 태그를 사용하는 방법을 배우면서 알게 됩니다.

URL 경로 핵심요약

http, https 로 시작하는 URL은 절대 경로이다.

상대경로는 현재 문서위치, 또는 베이스URL을 기준으로 위아래로 상대 위치를 표시하게 된다.

상대 경로 표시에는 ., .., / 기호와 경로명을 조합해 사용한다.

일반적으로 루트 경로 위로는 상대 경로를 지정할 수 없다.

현재 경로를 나타내는 ./ 은 생략할 수 있습니다.

// 로 시작하는 URL 경로

간혹 URL 링크를 보면 "//file.daumcdn.com"과 같은 식으로 http: 나 https: 을 생략한 URL을 사용하는 경우가 있습니다. 

에러가 나지 않을까 싶지만 HTTP 프로토콜 규약을 위반한 것은 아닙니다.

써도 된다는 뜻입니다. 다만 혼동의 여지를 줄 수 있으므로 HTML 문서에 이런식으로 URL을 사용하는 것을 추천하지는 않습니다.

그리고 웹브라우저에서 https://google.com 대신 //google.com 을 쳐도 구글로 이동합니다. 힘들게 https: 를 더 입력하지 않아도 됩니다.

< 이전강의 다음강의 >