HTML 하이퍼링크(hyperlink)를 사용하면 다른 페이지로 자유롭게 이동할 수 있습니다. <a> 태그는 앵커(anchor)를 정의하며, href 속성은 사용자가 링크를 클릭했을 때 이동할 위치를 지정합니다. <a> 태그와 닫는 </a> 태그 사이에는 화면에 표시되는 앵커 텍스트가 들어갑니다.
웹 페이지를 제작하다 보면 다른 웹 페이지나 사이트를 참조해야 할 때가 많습니다. 예를 들어 블로그를 운영하면서 독자에게 관련 있는 글을 소개하기 위해 링크를 걸고 싶을 수 있습니다.
하이퍼링크(Hyperlink), 즉 링크는 한 웹 페이지를 다른 페이지와 연결해 사용자가 여러 페이지 사이를 빠르게 오갈 수 있도록 해줍니다. 하이퍼링크는 내 사이트의 다른 페이지뿐만 아니라 외부 웹사이트의 페이지로도 연결할 수 있습니다.
이 가이드에서는 HTML 하이퍼링크의 기본기를 하나씩 짚어보겠습니다. 링크 대상(target) 설정 방법, 북마크용 앵커 만들기, 이메일 주소 및 페이지 내 요소 연결 방법까지 함께 알아보겠습니다.
HTML 하이퍼링크란?
HTML 하이퍼링크는 다른 웹 리소스를 가리키는 요소입니다. 하이퍼링크는 <a> 태그와 닫는 </a> 태그 사이에 정의되며, 두 태그 사이의 텍스트를 클릭하면 연결된 웹 리소스로 이동합니다.
하이퍼링크는 <a> 태그를 사용해 만듭니다. HTML 파일에서 하이퍼링크의 기본 문법은 다음과 같습니다.
<a href="your_url">이 텍스트를 클릭하면 URL로 이동합니다.</a>
여는 <a> 태그의 href 속성에 지정한 URL이 링크의 목적지가 되고, 두 태그 사이의 텍스트가 해당 URL로 연결됩니다. href 속성에는 https://www.careerkarma.com처럼 절대 URL(전체 주소)을 사용할 수도 있고, 사이트 내 위치를 기준으로 한 상대 URL을 사용할 수도 있습니다.
다음은 특정 웹사이트 홈페이지 주소로 연결되는 링크의 예입니다.
<a href="https://www.careerkarma.com">Career Karma</a>
하이퍼링크 태그의 종류
브라우저에서 표시되는 링크에는 세 가지 종류가 있습니다.
- 방문하지 않은 링크(Unvisited links): 파란색으로 표시됩니다.
- 방문한 링크(Visited links): 보라색으로 표시됩니다.
- 활성 링크(Active links): 빨간색으로 표시됩니다.
일부 웹사이트는 CSS로 이러한 기본 색상을 덮어쓰기 때문에 다르게 보일 수 있지만, HTML에서 스타일을 지정할 수 있는 기본적인 링크 유형은 위 세 가지입니다.
링크 대상(Target) 지정하기
링크가 열리는 방식을 변경할 수도 있습니다. 예를 들어 링크가 새 탭에서 열리도록 하면, 사용자가 현재 보고 있던 페이지를 그대로 유지한 채 탐색을 이어갈 수 있습니다.
이때 사용하는 것이 target 속성입니다. target 속성을 사용하면 브라우저가 링크된 리소스를 어디에서 열지 지정할 수 있습니다.
사용할 수 있는 target 값은 네 가지입니다.
- _self: 같은 창과 탭에서 웹 리소스를 엽니다. HTML 하이퍼링크의 기본값입니다.
- _parent: 부모 창에서 웹 리소스를 엽니다.
- _blank: 새 창 또는 새 탭에서 웹 리소스를 엽니다.
- _top: 전체 브라우저 창에서 웹 리소스를 엽니다.
다음은 각 target 값을 적용한 링크의 예입니다.
<a href="https://www.careerkarma.com" target="_self">현재 탭에서 열리는 링크</a> <a href="https://www.careerkarma.com" target="_parent">부모 창에서 열리는 링크</a> <a href="https://www.careerkarma.com" target="_blank">새 탭에서 열리는 링크</a> <a href="https://www.careerkarma.com" target="_top">전체 브라우저 창에서 열리는 링크</a>
북마크 앵커 사용하기
HTML 하이퍼링크는 문서 내 특정 부분을 가리킬 수도 있습니다. 페이지가 길 때 사용자를 본문의 특정 위치로 안내하고 싶다면 매우 유용한 기능입니다.
북마크 앵커를 사용하기 전에 먼저 이동시키고 싶은 요소에 ID 속성을 정의해야 합니다. 다음은 웹 페이지의 제목에 ID 속성을 선언하는 예입니다.
<h3 id="subtitle3">소제목 3</h3>
HTML 제목 태그에 subtitle3이라는 ID를 부여했습니다. 이제 이 ID를 하이퍼링크에서 참조할 수 있습니다.
<a href="#subtitle3">소제목 3으로 이동</a>
href 속성에 URL 대신 연결하려는 요소의 ID를 지정합니다. ID 앞에 해시 기호(#)를 붙이면 브라우저가 같은 페이지 내부의 위치로 이동한다는 것을 인식합니다.
HTML 앵커 태그(a 태그)
HTML 앵커 태그는 <a> 태그를 의미하며, 사용자를 다른 웹 리소스로 연결하는 역할을 합니다. href 속성은 사용자가 링크를 클릭했을 때 이동하게 될 리소스를 정의합니다.
HTML 앵커 태그 활용 예제
<a> 태그의 실제 활용 예제를 몇 가지 살펴보겠습니다.
상대 URL(Relative URLs)
개발 중인 HTML 문서와 같은 사이트 내 리소스로 연결할 때는 상대 URL을 사용할 수 있습니다. 상대 URL은 로컬 링크라고도 하며 "https://www.sitename.com" 형식의 전체 주소를 쓰지 않습니다. 대신 로컬 서버에 있는 특정 웹 리소스의 파일 경로를 가리킵니다.
예를 들어 Career Karma 사이트에서 자사 블로그로 연결되는 링크를 만든다고 가정해 보겠습니다. 같은 사이트 내부이므로 절대 URL 대신 로컬 URL을 사용할 수 있습니다.
<a href="/blog">Career Karma 블로그</a>
"Career Karma 블로그" 텍스트를 클릭하면 사이트의 /blog 리소스로 이동합니다.
이메일 주소 연결하기
앵커 태그는 이메일 주소로 연결하는 데에도 사용할 수 있습니다. 이메일 주소 링크를 클릭하면 사용자의 기본 메일 프로그램이 열리고, 지정된 이메일 주소로 메시지를 보낼지 묻습니다.
이메일 주소로 연결하려면 링크를 mailto: 프로토콜로 시작해야 합니다.
<a href="mailto:nothing@google.com">이메일 보내기!</a>
링크를 클릭하면 메일 프로그램이 열리고 nothing@google.com으로 메일을 보내도록 안내됩니다.
페이지 내 요소로 연결하기
앵커 태그는 웹 페이지 내 특정 요소로도 연결할 수 있습니다. 앵커가 가리킬 요소의 ID를 지정하면 됩니다. 예를 들어 사용자를 페이지의 "Test Heading" 제목으로 이동시키고 싶다면 다음 코드를 사용할 수 있습니다.
<a href="#test_heading">Test Heading으로 이동</a> <h2 id="test_heading">Test Heading</h2>
링크를 클릭하면 페이지가 자동으로 스크롤되어 test_heading ID를 가진 요소로 이동합니다.
마무리
하이퍼링크는 HTML에서 한 웹 페이지나 리소스를 다른 곳과 연결하는 데 사용됩니다. 내 사이트의 리소스뿐만 아니라 다른 어떤 웹사이트의 리소스와도 자유롭게 연결할 수 있습니다. 이 가이드에서는 HTML 문서에서 하이퍼링크를 사용하는 다양한 방법을 살펴보았습니다.
지금까지 배운 내용을 활용하면 누구나 전문가처럼 HTML 하이퍼링크를 만들 수 있습니다!
HTML 코딩을 더 깊이 배우고 싶다면 HTML 학습 가이드도 함께 참고해 보세요.