책에 포함된 노트비개발자를 위한 HTML: 가장 쉽게 시작하는 웹페이지 만들기

링크로 페이지와 세상 연결하기

2026-07-09Views 8약 6분생성형 AI 활용

Summary

링크는 웹페이지의 문입니다

지금까지 만든 HTML 문서는 한 장짜리 안내문에 가까웠습니다. 제목이 있고, 문단이 있고, 중요한 말도 표시할 수 있었습니다. 이제 여기에 링크를 넣으면 페이지가 다른 곳과 연결됩니다.

링크는 사용자가 누르면 다른 위치로 이동하는 길입니다. 가게 안내 페이지에서 지도 페이지로 보낼 수 있고, 행사 공지에서 신청서로 보낼 수 있습니다. 개인 소개 페이지라면 블로그, 인스타그램, 이메일 주소로 이어 줄 수도 있습니다.

HTML에서 링크는 a 태그로 만듭니다. a는 anchor의 줄임말입니다. 어렵게 기억할 필요는 없습니다. "어딘가로 연결하는 태그"라고 생각하면 충분합니다.

기본 모양은 이렇습니다.

<a href="이동할_주소">화면에 보이는 링크 문구</a>

여기서 href는 링크가 어디로 갈지 적는 속성입니다. a 태그만으로는 "링크를 만들겠다"는 뜻이고, href가 있어야 "어디로 갈지"가 정해집니다. href에는 웹사이트 주소, 같은 폴더 안의 HTML 파일, 이메일 주소, 페이지 안의 특정 위치 등을 넣을 수 있습니다.¹

링크로 페이지와 세상 연결하기 AI 생성 이미지

다른 웹사이트로 연결하기

가장 익숙한 링크는 다른 웹사이트로 이동하는 링크입니다. 예를 들어 행사 안내 페이지에서 외부 신청 폼으로 보내고 싶다면 이렇게 쓸 수 있습니다.

<p>
  참가를 원하시면
  <a rel="nofollow ugc noopener" href="https://example.com/apply">행사 신청서 보기</a>를 눌러 주세요.
</p>

브라우저에서 보면 "행사 신청서 보기"라는 글자가 링크처럼 표시됩니다. 사용자가 그 글자를 누르면 href에 적힌 주소로 이동합니다.

외부 웹사이트 주소를 쓸 때는 보통 https://부터 전체 주소를 적습니다.

<a rel="nofollow ugc noopener" href="https://www.naver.com">네이버로 이동하기</a>

이처럼 https://로 시작하는 전체 주소를 쓰면, 현재 내 HTML 파일이 어디에 있든 같은 곳으로 이동합니다. 주소를 복사해서 붙여 넣을 때는 앞뒤에 빈칸이 들어가지 않았는지 확인하면 좋습니다.

같은 사이트 안의 다른 파일로 연결하기

내가 만든 페이지끼리도 연결할 수 있습니다. 예를 들어 같은 폴더 안에 다음 두 파일이 있다고 해 보겠습니다.

html-practice
├─ index.html
└─ menu.html

index.html에서 menu.html로 이동하는 링크는 이렇게 씁니다.

<a href="menu.html">메뉴판 보기</a>

여기에는 https://가 없습니다. 같은 폴더 안에 있는 파일을 가리키기 때문입니다. 브라우저는 "지금 파일이 있는 폴더에서 menu.html을 찾아야겠구나"라고 이해합니다.

가게 안내 페이지라면 이런 식으로 쓸 수 있습니다.

<h2>가게 안내</h2>
<p>저희 카페의 음료와 디저트를 한눈에 확인해 보세요.</p>
<p><a href="menu.html">카페 메뉴판 보기</a></p>

파일 이름을 잘못 쓰면 링크가 열리지 않습니다. menu.html과 Menu.html은 환경에 따라 다르게 취급될 수 있으니, 초보 단계에서는 파일 이름을 모두 소문자로 맞추는 습관이 편합니다. 띄어쓰기 대신 event-info.html처럼 하이픈을 쓰는 것도 좋습니다.

하위 폴더 안의 파일로 연결할 수도 있습니다.

html-practice
├─ index.html
└─ pages
   └─ location.html

이때는 이렇게 씁니다.

<a href="pages/location.html">오시는 길 보기</a>

처음에는 복잡한 폴더 구조를 만들 필요가 없습니다. index.html, menu.html, contact.html처럼 같은 폴더에 두고 연습해도 충분합니다.

이메일 주소로 연결하기

링크를 눌렀을 때 이메일을 보내도록 만들 수도 있습니다. 이때는 href에 mailto:를 씁니다.

<a href="mailto:[email protected]">이메일로 문의하기</a>

이 링크를 누르면 사용자의 컴퓨터나 휴대폰에 설정된 이메일 앱이 열립니다. 받는 사람 주소에는 hello@example.com이 들어갑니다.

다만 이 링크가 이메일을 자동으로 보내는 것은 아닙니다. 사용자가 메일 앱에서 내용을 작성하고 직접 보내야 합니다. 그래서 안내 문구를 함께 적어 주면 친절합니다.

<p>
  대관 문의는
  <a href="mailto:[email protected]">[email protected]으로 이메일 보내기</a>를 이용해 주세요.
</p>

링크 문구를 이메일 주소 그대로 보여 줄 수도 있고, "이메일로 문의하기"처럼 행동을 설명할 수도 있습니다. 중요한 것은 사용자가 눌렀을 때 어떤 일이 일어나는지 예상할 수 있어야 한다는 점입니다.

새 탭으로 열고 싶을 때

외부 사이트를 열 때 현재 페이지를 그대로 남겨 두고 싶을 때가 있습니다. 예를 들어 행사 안내 페이지에서 외부 신청서를 열어도, 원래 안내 페이지는 닫히지 않게 하고 싶을 수 있습니다.

그럴 때는 target="_blank"를 사용합니다.

<a rel="nofollow ugc noopener" href="https://example.com/apply" target="_blank">
  행사 신청서 새 탭에서 열기
</a>

target="_blank"는 링크를 새 탭이나 새 창으로 열라는 뜻입니다. 사용자의 브라우저 설정에 따라 새 탭으로 열릴 수도 있고 새 창으로 열릴 수도 있습니다.

다만 모든 링크를 새 탭으로 열 필요는 없습니다. 같은 사이트 안에서 자연스럽게 이동하는 링크라면 보통 현재 탭에서 열어도 괜찮습니다. 새 탭은 특히 외부 사이트, 신청서, 지도, PDF처럼 사용자가 참고한 뒤 원래 페이지로 돌아올 가능성이 클 때 유용합니다.

새 탭으로 열 때는 다음처럼 rel="noopener"를 함께 쓰는 습관이 좋습니다.

<a href="https://example.com/apply" target="_blank" rel="noopener nofollow ugc">
  행사 신청서 새 탭에서 열기
</a>

rel="noopener"는 새로 열린 페이지가 원래 페이지를 함부로 건드리지 못하게 막는 안전장치입니다. 최신 브라우저에서는 target="_blank"에 대해 비슷한 보호를 기본으로 적용하기도 하지만, 초보 단계에서는 위 모양을 안전한 기본형으로 기억하면 좋습니다.²

또 하나 기억할 점이 있습니다. 새 탭으로 열리는 링크라면 링크 문구나 주변 문장에서 그 사실을 알려 주면 사용자가 덜 당황합니다.

<a href="https://example.com/map" target="_blank" rel="noopener nofollow ugc">
  지도에서 위치 보기(새 탭)
</a>

"여기 클릭"보다 좋은 링크 문구

링크를 만들 때 자주 쓰는 문구가 있습니다.

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

동작은 합니다. 하지만 좋은 링크 문구는 아닙니다. "여기"만 보면 어디로 가는지 알 수 없기 때문입니다.

다음처럼 바꾸면 훨씬 분명합니다.

<a href="apply.html">행사 신청서 보기</a>

또 다른 예를 보겠습니다.

<!-- 아쉬운 예 -->
<p>오시는 길은 <a href="location.html">여기</a>에서 확인하세요.</p>

<!-- 더 나은 예 -->
<p><a href="location.html">오시는 길 확인하기</a></p>

링크 문구는 그 자체만 읽어도 목적지가 떠올라야 합니다. 화면을 읽어 주는 보조 기술은 페이지 안의 링크만 따로 모아 읽을 수 있는데, 이때 "여기", "클릭", "자세히"만 반복되면 사용자가 의미를 알기 어렵습니다. 명확한 링크 문구는 보조 기술을 쓰는 사람뿐 아니라 빠르게 훑어보는 모든 사람에게 도움이 됩니다.¹

좋은 링크 문구를 만들 때는 다음 질문을 해 보면 됩니다.

이 링크를 누르면 무엇을 볼 수 있나?
이 링크를 누르면 어떤 행동을 하게 되나?
링크 문구만 따로 읽어도 의미가 통하나?

예를 들어 "자세히 보기"보다 "수업 일정 자세히 보기"가 낫습니다. "다운로드"보다 "카페 메뉴판 PDF 다운로드"가 낫습니다.

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

긴 안내 페이지에는 목차가 있으면 편합니다. 사용자가 "운영 시간", "오시는 길", "문의" 중 원하는 곳으로 바로 이동할 수 있기 때문입니다.

페이지 안에서 특정 위치로 이동하려면 두 가지가 필요합니다.

첫째, 이동할 위치에 id를 붙입니다.

<h2 id="hours">운영 시간</h2>

둘째, 링크의 href에 #아이디이름을 적습니다.

<a href="#hours">운영 시간으로 이동</a>

id는 페이지 안에서 그 위치를 구별하는 이름표입니다. href="#hours"는 "이 페이지 안에서 id가 hours인 곳으로 이동하라"는 뜻입니다.

작은 목차를 만들어 보겠습니다.

<h1>작은 책방 안내</h1>

<h2>목차</h2>
<ul>
  <li><a href="#hours">운영 시간</a></li>
  <li><a href="#location">오시는 길</a></li>
  <li><a href="#contact">문의하기</a></li>
</ul>

<h2 id="hours">운영 시간</h2>
<p>화요일부터 일요일까지 오전 11시부터 오후 8시까지 운영합니다.</p>

<h2 id="location">오시는 길</h2>
<p>시청역 3번 출구에서 걸어서 5분 거리에 있습니다.</p>

<h2 id="contact">문의하기</h2>
<p><a href="mailto:[email protected]">[email protected]으로 이메일 보내기</a></p>

여기서 ul과 li는 목록을 만드는 태그입니다. 아직 자세히 배우지 않았지만, 지금은 "목차 항목을 줄줄이 묶는 태그" 정도로만 이해해도 됩니다. 목록은 뒤 장에서 다시 다룹니다.

id 이름은 짧고 알아보기 쉽게 정하는 것이 좋습니다. 처음에는 영어 소문자, 숫자, 하이픈만 사용해 보세요.

<h2 id="event-time">행사 시간</h2>
<a href="#event-time">행사 시간으로 이동</a>

이동이 되지 않는다면 대부분 이름이 서로 다르기 때문입니다. id="event-time"인데 링크가 href="#eventtime"처럼 되어 있으면 브라우저는 목적지를 찾지 못합니다. # 뒤의 글자와 id 값이 정확히 같아야 합니다.

다른 HTML 파일의 특정 위치로도 이동할 수 있습니다.

<a href="notice.html#location">공지 페이지의 오시는 길 보기</a>

이 링크는 먼저 notice.html을 열고, 그 안에서 id="location"이 붙은 위치로 이동합니다.

함께 써 보는 작은 예제

아래 코드를 index.html에 붙여 넣고 브라우저에서 열어 보세요. 링크를 하나씩 눌러 보면서 어떤 링크가 어디로 이동하는지 확인하면 됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>동네 글쓰기 모임</title>
</head>
<body>
  <h1>동네 글쓰기 모임</h1>

  <h2>바로가기</h2>
  <ul>
    <li><a href="#apply">신청 방법</a></li>
    <li><a href="#place">모임 장소</a></li>
    <li><a href="#contact">문의하기</a></li>
  </ul>

  <p>
    처음 글을 쓰는 분도 편하게 참여할 수 있는 작은 모임입니다.
    자세한 일정은
    <a href="schedule.html">월별 일정표 보기</a>에서 확인할 수 있습니다.
  </p>

  <h2 id="apply">신청 방법</h2>
  <p>
    참가를 원하시면
    <a href="https://example.com/apply" target="_blank" rel="noopener nofollow ugc">
      글쓰기 모임 신청서 작성하기(새 탭)
    </a>를 눌러 주세요.
  </p>

  <h2 id="place">모임 장소</h2>
  <p>
    모임은 동네문화센터 2층에서 진행합니다.
    <a href="https://example.com/map" target="_blank" rel="noopener nofollow ugc">
      지도에서 모임 장소 보기(새 탭)
    </a>
  </p>

  <h2 id="contact">문의하기</h2>
  <p>
    궁금한 점은
    <a href="mailto:[email protected]">[email protected]으로 이메일 보내기</a>를 이용해 주세요.
  </p>
</body>
</html>

이 예제에는 네 종류의 링크가 들어 있습니다.

schedule.html: 같은 폴더 안의 다른 파일로 이동합니다.
https://example.com/apply: 외부 웹사이트로 이동합니다.
mailto:writing@example.com: 이메일 앱을 엽니다.
#apply, #place, #contact: 같은 페이지 안의 특정 위치로 이동합니다.

처음에는 링크 주소를 모두 이해하려고 애쓰기보다, href 안에 들어간 값이 목적지를 정한다는 점만 잡으면 됩니다.

링크를 만들 때 확인할 것

링크가 잘 작동하지 않을 때는 다음 순서로 확인해 보세요.

href가 빠지지 않았나요?
주소나 파일 이름에 오타가 없나요?
같은 폴더 안의 파일 이름과 링크에 쓴 이름이 정확히 같나요?
페이지 안 이동 링크라면 # 뒤의 이름과 id 값이 같나요?
새 탭 링크라면 target="_blank" rel="noopener"를 함께 썼나요?
링크 문구만 읽어도 목적지가 분명한가요?

HTML의 링크는 단순한 이동 버튼이 아닙니다. 흩어진 페이지를 하나의 흐름으로 묶어 주는 연결 장치입니다. 이제 여러분의 페이지는 혼자 서 있는 문서가 아니라, 다른 문서와 사람과 행동으로 이어지는 웹페이지가 됩니다.

참고

¹MDN HTML anchor element

²MDN rel="noopener" attribute

책 목록

비개발자를 위한 HTML: 가장 쉽게 시작하는 웹페이지 만들기

전체 목차 보기