클릭하고 연결하기: 링크와 경로의 기초

한 장짜리 문서는 혼자 서 있는 메모와 비슷합니다. 하지만 링크가 생기는 순간 이야기가 달라집니다. 이 문서는 저 문서로, 이 페이지는 저 페이지로 이어지고, 그렇게 문서들의 길이 엮이면서 비로소 웹이 됩니다. 링크를 만들 수 있다는 건 HTML이 단순한 글쓰기 도구를 넘어, 연결의 언어가 된다는 뜻입니다.

이번 장에서는 웹의 핵심 태그인 <a>를 배우겠습니다. 그리고 href, title, target 속성을 이용해 현재 페이지 안에서 이동하고, 다른 페이지로 넘어가고, 외부 사이트로도 연결해 보겠습니다.

링크는 웹의 문이다

웹페이지를 읽다 보면 우리는 계속 선택합니다. 더 읽고 싶으면 클릭하고, 다른 설명이 궁금하면 또 클릭합니다. 이 클릭의 대부분은 HTML 링크가 담당합니다. HTML에서 링크는 주로 <a> 태그로 만들고, 목적지는 href 속성으로 정합니다.¹

가장 기본적인 형태는 아주 단순합니다.

<a rel="nofollow ugc noopener" href="https://example.com">예시 사이트로 이동</a>

여기서 브라우저가 실제로 보여 주는 것은 예시 사이트로 이동이라는 글자입니다. 사용자가 그 글자를 클릭하면 href에 적힌 주소로 이동합니다. 즉, 보이는 것은 링크 텍스트, 실제로 가는 곳은 href입니다.

짧게 정리하면 이렇습니다.

• <a>: 링크를 만드는 태그

• href: 어디로 갈지 적는 주소

• 링크 텍스트: 사용자가 클릭하는 부분

<a> 태그, 웹의 손잡이

<a>는 anchor의 약자입니다. 원래 뜻은 닻이지만, 웹에서는 한 문서를 다른 곳에 연결해 주는 고리처럼 생각하면 이해하기 쉽습니다. 문에 손잡이가 있어야 열 수 있듯이, 웹페이지에도 링크가 있어야 다른 곳으로 이동할 수 있습니다.

예를 들어 자기소개 페이지로 가는 링크를 만들고 싶다면 이렇게 씁니다.

<a href="about.html">자기소개 보기</a>

이 코드는 about.html이라는 파일로 이동하라는 뜻입니다. 아직 인터넷 주소 전체가 보이지 않죠? 괜찮습니다. 이런 방식이 바로 상대 경로이고, 조금 뒤에 더 자세히 다루겠습니다.

href: 링크의 목적지를 정하는 주소

href는 hyperlink reference의 줄임말입니다. 이름은 조금 길지만, 초보자 입장에서는 그냥 "클릭하면 어디로 갈까?"를 적는 자리라고 생각하면 됩니다.¹

href에는 여러 종류의 주소를 넣을 수 있습니다.

외부 사이트로 이동하기

다른 웹사이트로 가는 가장 익숙한 링크입니다.

<a rel="nofollow ugc noopener" href="https://www.google.com">구글로 가기</a>

이처럼 https://부터 시작하는 전체 주소를 적으면 절대 URL이라고 부릅니다. 인터넷상의 목적지를 처음부터 끝까지 전부 적는 방식입니다.⁵

내 사이트의 다른 페이지로 이동하기

같은 사이트 안의 다른 페이지로 갈 때는 전체 주소를 다 쓰지 않고 간단히 적는 경우가 많습니다.

<a href="about.html">소개 페이지</a>

이건 현재 파일과 같은 폴더 안에 about.html이 있다고 가정한 링크입니다. 이런 방식은 상대 경로라고 하며, 현재 문서를 기준으로 목적지를 찾습니다.⁵⁶

같은 페이지 안의 특정 위치로 이동하기

긴 페이지에서 "연락처로 바로 가기" 같은 점프 링크를 만들고 싶을 때는 #id를 사용합니다. href="#contact"라고 쓰면 id="contact"를 가진 요소로 이동합니다.¹⁴

<a href="#contact">연락처로 바로 이동</a>

<h2 id="contact">연락처</h2>
<p>이곳이 연락처 구역입니다.</p>

이 기능은 긴 소개 페이지, FAQ, 목차, "맨 위로" 링크를 만들 때 아주 유용합니다. 스크롤을 한참 내리지 않아도 되니까요.

이메일과 전화 링크도 만들 수 있다

링크는 꼭 웹페이지만 여는 것이 아닙니다. 브라우저가 지원하는 URL 형식을 이용하면 이메일이나 전화도 연결할 수 있습니다.¹

<a href="mailto:[email protected]">이메일 보내기</a>
<a href="tel:01012345678">전화 걸기</a>

mailto:는 메일 앱을 열고, tel:은 전화 가능한 기기에서 전화 동작으로 이어질 수 있습니다. 특히 모바일 환경에서 자주 보게 됩니다.

title: 살짝 덧붙이는 힌트

title 속성은 링크에 대한 추가 정보를 넣을 때 사용할 수 있습니다. 브라우저에 따라 마우스를 올렸을 때 짧은 설명이 보이기도 합니다.³

<a href="about.html" title="자기소개 페이지로 이동합니다">소개 페이지</a>

다만 title은 어디까지나 보조 설명입니다. 가장 중요한 것은 링크 텍스트 자체가 충분히 이해되게 쓰이는 것입니다. title만 믿고 링크 글자를 애매하게 쓰면 오히려 불편해질 수 있습니다.

예를 들어 이것보다는,

<a href="products.html">여기 클릭</a>

이렇게 쓰는 편이 훨씬 낫습니다.

<a href="products.html">상품 소개 페이지 보기</a>

링크는 단순히 눌러 보는 버튼이 아니라, 어디로 가는지 알려 주는 안내판이어야 합니다.¹

target: 어디에서 열지 정하는 속성

링크를 클릭했을 때 현재 탭에서 열지, 새 탭에서 열지를 정하는 것이 target입니다. 기본값은 _self이고, 보통 현재 탭에서 열립니다.¹²

<a href="about.html" target="_self">현재 탭에서 열기</a>
<a rel="nofollow ugc noopener" href="https://developer.mozilla.org" target="_blank">새 탭에서 열기</a>

초보자 단계에서는 두 가지만 먼저 확실히 기억하면 충분합니다.

• _self: 현재 탭에서 열기

• _blank: 새 탭이나 새 창에서 열기

실무에서 가장 자주 보는 것도 이 두 가지입니다.

새 탭 링크에서 함께 기억할 것

외부 사이트를 새 탭으로 열 때는 rel="noopener"를 함께 쓰는 습관도 알아 두면 좋습니다.¹

<a href="https://developer.mozilla.org" target="_blank" rel="noopener nofollow ugc">
  MDN 문서 보기 (새 탭)
</a>

이 속성은 새로 열린 페이지가 원래 페이지를 함부로 제어하지 못하게 도와줍니다. 최신 브라우저에서는 target="_blank"가 비슷한 보호를 자동으로 제공하는 경우도 많지만, 초보자 입장에서는 외부 링크를 새 탭으로 열 때 rel="noopener"도 함께 적는 습관을 들여 두면 안전합니다.¹

또 하나, 새 탭으로 열리는 링크는 사용자에게 그 사실을 알려 주는 편이 좋습니다. 갑자기 새 탭이 열리면 놀랄 수 있기 때문입니다.

예를 들면 이렇게 쓸 수 있습니다.

<a href="https://developer.mozilla.org"
   target="_blank"
   rel="noopener nofollow ugc"
   title="새 탭에서 열립니다">
  MDN 문서 보기 (새 탭)
</a>

좋은 링크 글자는 생각보다 중요하다

초보자가 자주 하는 실수 중 하나가 링크 텍스트를 너무 대충 쓰는 것입니다.

<a href="products.html">여기 클릭</a>

이 링크는 문장 안에서는 얼핏 이해될 수 있지만, 링크만 따로 보면 어디로 가는지 알기 어렵습니다. MDN도 링크 텍스트는 문맥 밖에서도 목적지를 짐작할 수 있게 쓰는 편이 좋다고 설명합니다.¹

조금만 바꿔도 훨씬 좋아집니다.

<a href="products.html">상품 소개 페이지 보기</a>

또는 문장 안에서는 이렇게 쓸 수 있습니다.

<p><a href="products.html">상품 소개 페이지</a>에서 자세한 기능을 볼 수 있습니다.</p>

링크는 "클릭할 곳"이 아니라, 이동 방향을 알려 주는 표지판이라는 감각을 기억해 두세요.

경로란 무엇일까: 브라우저에게 주는 길 안내

링크를 만들다 보면 금방 이런 궁금증이 생깁니다.

"왜 어떤 링크는 https://...처럼 길고, 어떤 링크는 about.html처럼 짧지?"

그 차이가 바로 경로(path)입니다. 경로는 브라우저에게 "그 파일이 어디에 있는지" 알려 주는 방식입니다.⁵

절대 경로와 상대 경로

절대 경로는 목적지 주소를 처음부터 끝까지 전부 적는 방식입니다.

<a rel="nofollow ugc noopener" href="https://example.com/about.html">소개 페이지</a>

상대 경로는 지금 보고 있는 파일의 위치를 기준으로 적는 방식입니다.

<a href="about.html">소개 페이지</a>

보통 외부 사이트로 갈 때는 절대 URL을 쓰고, 내 사이트 내부 페이지를 연결할 때는 상대 경로를 많이 사용합니다.⁵⁶

폴더 구조로 이해하기

다음과 같은 파일 구조가 있다고 상상해 봅시다.

my-site/
├─ index.html
├─ about.html
├─ posts/
│  └─ first.html
└─ guide/
   └─ intro.html

index.html에서 about.html로 가려면 이렇게 씁니다.

<a href="about.html">소개</a>

index.html에서 posts/first.html로 가려면 이렇게 씁니다.

<a href="posts/first.html">첫 글</a>

반대로 posts/first.html에서 첫 화면 index.html로 돌아가려면 한 단계 위로 올라가야 합니다.

<a href="../index.html">홈으로</a>

여기서 ../는 상위 폴더로 한 단계 올라간다는 뜻입니다.⁶

/로 시작하는 경로

가끔 경로가 /about.html처럼 슬래시로 시작하는 경우가 있습니다. 이것은 현재 파일 위치가 아니라 사이트의 맨 위(root)를 기준으로 찾는 방식입니다.⁶

<a href="/about.html">소개</a>

이 방식은 현재 페이지가 어느 폴더에 있든 항상 사이트의 시작점부터 찾기 때문에, 메뉴 링크를 만들 때 편리한 경우가 많습니다.

정리하면 느낌이 이렇습니다.

• about.html → 지금 파일과 같은 위치 기준

• posts/first.html → 현재 위치에서 하위 폴더로 이동

• ../index.html → 한 단계 위 폴더로 올라감

• /about.html → 사이트의 맨 위를 기준으로 찾음

실전 예제: 링크 세 가지를 한 번에 써 보기

이제 href, title, target을 한꺼번에 써 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>링크 연습</title>
</head>
<body>
  <h1>내 링크 놀이터</h1>

  <p>
    <a href="about.html" title="자기소개 페이지로 이동합니다">
      소개 페이지 보기
    </a>
  </p>

  <p>
    <a href="https://developer.mozilla.org"
       target="_blank"
       rel="noopener nofollow ugc"
       title="새 탭에서 열립니다">
      MDN 문서 보기 (새 탭)
    </a>
  </p>

  <p>
    <a href="#contact" title="페이지 아래쪽 연락처 구역으로 이동합니다">
      연락처로 바로 가기
    </a>
  </p>

  <h2 id="contact">연락처</h2>
  <p>
    <a href="mailto:[email protected]" title="메일 앱이 열릴 수 있습니다">
      이메일 보내기
    </a>
  </p>
</body>
</html>

이 예제 안에는 세 가지 세계가 같이 들어 있습니다. 첫 번째 링크는 같은 사이트 안의 페이지로 이동하고, 두 번째 링크는 외부 사이트를 새 탭에서 열며, 세 번째 링크는 같은 페이지 안에서 점프합니다. 이 정도만 익혀도 웹페이지가 갑자기 훨씬 살아 움직이는 느낌이 들 것입니다.

초보자가 자주 하는 실수

링크는 쉬워 보여도 은근히 헷갈리는 부분이 있습니다. 특히 아래 실수는 자주 나옵니다.

• href를 빼먹고 <a>만 쓰는 경우

• 모든 링크에 무조건 target="_blank"를 붙이는 경우

• 여기 클릭, 바로가기처럼 목적지가 드러나지 않는 링크 글자를 쓰는 경우

• 페이지 이동이 아닌 동작을 링크로 억지로 처리하는 경우

마지막 항목은 특히 기억해 두면 좋습니다. 링크는 어딘가로 이동할 때 쓰는 것이 자연스럽습니다. 메뉴를 열거나, 팝업을 띄우거나, 계산을 실행하는 것처럼 동작 자체가 목적이라면 보통 링크보다 버튼이 더 알맞습니다.¹

링크를 읽는 눈을 가져 보자

이제부터 웹페이지를 볼 때 그냥 클릭만 하지 말고, 이렇게 한 번씩 해석해 보세요.

"이 링크는 외부로 나가는구나." "아, 이건 같은 페이지 안에서 이동하는구나." "이건 새 탭에서 열리도록 했네." "여기 ../가 있는 걸 보니 상위 폴더로 가는구나."

이 감각이 생기면 HTML은 갑자기 암기 과목이 아니라 읽히는 언어가 됩니다.

핵심 정리

이번 장에서 꼭 기억할 것은 다음입니다.

• 링크는 <a> 태그로 만들고, 목적지는 href에 적는다.¹

• title은 추가 힌트를 주는 속성이지만, 링크 텍스트 자체를 명확하게 쓰는 것이 더 중요하다.³

• target="_self"는 현재 탭, target="_blank"는 새 탭을 뜻한다.¹²

• 외부 링크를 새 탭으로 열 때는 rel="noopener"도 함께 쓰는 습관이 도움이 된다.¹

• href="#아이디값"으로 같은 페이지 안의 특정 위치로 이동할 수 있다.¹⁴

• 내부 페이지 연결에는 상대 경로를 많이 사용하고, 외부 사이트는 절대 URL을 많이 사용한다.⁵⁶

• 링크 글자는 "어디로 가는지"가 드러나게 쓰는 것이 좋다.¹

이제 우리는 더 이상 한 페이지 안에만 머물지 않습니다. 링크를 배웠다는 것은 문서 하나를 만드는 단계를 넘어, 문서들을 연결해 웹을 만들 수 있게 되었다는 뜻입니다.

다음 장에서는 이 연결된 페이지에 눈으로 보이는 재미를 더해 줄 차례입니다. 이제 링크만 있는 길 위에 이미지를 올려 보겠습니다.

참고

¹MDN: <a> 요소

²W3Schools: HTML Links

³W3Schools: HTML Link Titles

⁴HTML 앵커 태그와 내부 링크 예시

⁵W3Schools: HTML File Paths

⁶Codecademy: HTML File Paths