HTML 강좌 / 링크(link)

HTML 링크는 a 요소의 href 속성에 이동할 주소를 지정해 만듭니다. 주소에는 다른 웹페이지, 같은 사이트의 파일, 현재 문서의 특정 위치 또는 이메일 주소를 넣을 수 있습니다. 링크 문구는 이동할 내용을 미리 알 수 있게 작성하는 것이 좋습니다.

a와 href로 기본 링크 만들기

a 요소로 링크가 될 문구를 감싸고 href에 목적지 주소를 넣습니다. 다음 링크를 누르면 Coding Factory의 HTML 강좌 목록 글로 이동합니다. 이 링크가 가리키는 목록의 종류와 중첩 규칙은 목록 - ol, ul, dl, 중첩 목록에서 설명합니다.

<a href="https://www.codingfactory.net/10225">HTML 목록 작성 방법</a>

화면에 보이는 ‘HTML 목록 작성 방법’은 링크 문구이고, href의 URL은 이동할 주소입니다. href가 없는 a는 일반적인 이동 링크가 아니며, 목적지 없이 href="#"만 넣으면 현재 페이지 맨 위로 이동하는 등 예상하지 못한 동작을 만들 수 있습니다.

절대경로와 상대경로 구분하기

https://로 시작하는 주소는 목적지의 도메인까지 적은 절대 URL입니다. 같은 사이트의 파일을 연결할 때는 현재 문서나 사이트의 루트를 기준으로 한 상대 URL도 쓸 수 있습니다. 공통 메뉴를 세 문서에서 유지하는 종합 연습은 여러 페이지로 된 작은 사이트 만들기에서 진행합니다.

다음의 about.html과 ../contact.html은 현재 Coding Factory에 있는 페이지가 아니라, 아래처럼 파일을 배치했다고 가정한 연습용 경로입니다. lessons/index.html에서 링크를 작성합니다.

site/
  contact.html
  lessons/
    index.html
    about.html

<a href="https://www.codingfactory.net/10225">전체 주소로 이동</a>

<a href="about.html">현재 파일과 같은 폴더의 소개 페이지</a>

<a href="../contact.html">한 단계 위 폴더의 연락처 페이지</a>

<a href="/10225">사이트 루트의 HTML 목록 글</a>

about.html은 현재 문서의 위치를 기준으로 해석하지만, /10225처럼 슬래시로 시작하는 경로는 사이트의 루트를 기준으로 해석합니다. 로컬 file:// 파일에서 시작하는 슬래시와 서버에서 시작하는 슬래시는 기준이 다를 수 있으므로, 실제 배포 경로에서 링크를 다시 확인하세요.

문서의 특정 위치로 이동하기

같은 문서 안에서 이동하려면 목적지 요소에 고유한 id를 지정하고, 링크의 href에 #과 그 값을 적습니다.

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



<h2 id="contact">연락처</h2>

<p>문의 방법을 안내합니다.</p>

다른 문서 안의 위치로 이동한다면 문서 URL 뒤에 #contact를 붙입니다. 예를 들어 about.html#contact는 about.html 안의 id="contact" 요소를 가리킵니다. 같은 페이지에서 id를 중복해서 쓰지 않습니다.

이메일 링크와 새 탭 링크 만들기

mailto:로 시작하는 주소는 사용자의 메일 앱에서 새 메시지를 작성하도록 요청합니다. 메일 앱이 설정되지 않았다면 원하는 결과가 나오지 않을 수 있습니다.

<a href="mailto:hello@example.com">이메일 보내기</a>

외부 사이트를 새 탭에서 열려면 target="_blank"를 사용하고, 사이트의 링크 정책에 맞게 rel="noopener noreferrer"도 지정합니다.

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a"

   target="_blank" rel="noopener noreferrer">MDN의 a 요소 설명</a>

새 탭이 꼭 필요한지는 독자의 작업 흐름에 따라 판단합니다. 새 탭에서 열리는 링크라면 문구나 주변 설명으로 그 동작을 알리는 것도 도움이 됩니다.

파일 다운로드 링크의 범위

download 속성은 링크한 파일을 내려받도록 브라우저에 요청합니다. 예를 들어 같은 사이트에 올린 다음 이미지 파일에 사용할 수 있습니다.

<a href="/wp-content/uploads/html-image-sample-lake-tree-1600-v1.webp" download>예제 이미지 내려받기</a>

download는 같은 출처의 URL 또는 blob:, data: URL에 사용할 수 있습니다. 다른 사이트의 일반적인 URL에 붙여 다운로드를 강제할 수는 없습니다. 같은 출처의 파일이라도 실제 처리 방식은 브라우저 설정과 서버 응답에 따라 달라질 수 있습니다.

MDN a 요소와 download 조건

상대경로를 세 파일로 직접 시험하기

앞의 site/ 폴더 구조에 맞춰 다음 세 문서를 저장하세요. 이 연습에서는 실제 연락 기능 대신 페이지 사이의 이동만 확인합니다.

site/lessons/index.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>경로 연습 홈</title>
</head>
<body>
  <h1>경로 연습 홈</h1>
  <nav aria-label="연습 메뉴">
    <a href="about.html">소개</a>
    <a href="../contact.html">연락처</a>
  </nav>
</body>
</html>

site/lessons/about.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>소개</title>
</head>
<body>
  <h1>소개</h1>
  <nav aria-label="연습 메뉴">
    <a href="index.html">연습 홈</a>
    <a href="../contact.html">연락처</a>
  </nav>
</body>
</html>

site/contact.html

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>연락처</title>
</head>
<body>
  <h1>연락처</h1>
  <nav aria-label="연습 메뉴">
    <a href="lessons/index.html">연습 홈</a>
    <a href="lessons/about.html">소개</a>
  </nav>
</body>
</html>

각 문서를 열어 링크를 누르고 브라우저 주소의 폴더를 비교하세요. ../는 한 단계 위 폴더를 뜻합니다. 하나가 열리지 않으면 파일명을 추측해 바꾸기보다 출발 파일의 위치에서 경로를 다시 계산합니다. 실습 후 잘못 바꾼 링크는 위 표의 값으로 되돌릴 수 있습니다.

링크를 확인할 때 살펴볼 점

• ‘여기’보다 ‘HTML 목록 작성 방법’처럼 목적지를 설명하는 문구를 사용합니다.
• 상대경로는 현재 문서의 위치와 배포 후 사이트 경로를 기준으로 확인합니다.
• #id 링크는 목적지의 id가 정확히 일치하는지 확인합니다.
• 이메일 링크와 다운로드 링크는 브라우저·사용자 환경에 따라 동작이 달라질 수 있음을 고려합니다.

URL 형식과 a 요소의 속성은 MDN의 HTML 링크 요소 문서에서 확인할 수 있습니다.