HTML 강좌 / 링크(link)

HTML 강좌

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

a와 href로 기본 링크 만들기

a 요소로 링크가 될 문구를 감싸고 href에 목적지 주소를 넣습니다. 다음 링크를 누르면 Coding Factory의 HTML 강좌 목록 글로 이동합니다.

<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에 붙여 다운로드를 강제할 수는 없습니다. 같은 출처의 파일이라도 실제 처리 방식은 브라우저 설정과 서버 응답에 따라 달라질 수 있습니다.