<a>

HTML <a> 요소(앵커 요소)는 href 특성을 통해 다른 페이지, 같은 페이지의 특정 위치, 파일, 이메일 주소 등 다양한 URL로 연결하는 하이퍼링크를 만듭니다. <a> 안의 콘텐츠는 링크가 가리키는 목적지를 명확히 설명해야 합니다.

<p>You can reach Michael at:</p>

<ul>
  <li><a href="https://example.com">Website</a></li>
  <li><a href="mailto:[email protected]">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}

특성

이 요소는 전역 특성을 포함합니다.

• download

  • : 링크를 따라가는 대신 해당 URL을 파일로 저장할지 묻습니다. 값을 생략하거나 직접 지정할 수 있습니다.

    • 값 없음: 브라우저가 HTTP 헤더, URL 경로, 미디어 유형 등을 참고해 파일 이름을 자동으로 제안합니다.
    • 값 지정: 지정한 값을 저장 파일 이름으로 제안합니다. /와 \는 _로 변환됩니다.

    • download는 동일 출처 URL과 blob:, data: 스킴에서만 동작합니다.

    • Content-Disposition 헤더의 filename이 download 특성과 다를 경우 헤더가 우선합니다.

• href

  • : 링크가 가리키는 URL입니다. HTTP URL 외에도 브라우저가 지원하는 다양한 스킴을 사용할 수 있습니다.
    • #섹션ID — 같은 페이지의 특정 구획으로 이동
    • mailto: — 이메일 클라이언트 열기
    • tel: — 전화 걸기
    • blob:, data: — 파일 다운로드 등에 활용

• hreflang

  • : 링크 URL의 언어를 나타내는 힌트입니다. 가능한 값은 전역 lang 특성과 동일합니다. 브라우저 동작에 직접적인 영향을 주지는 않습니다.

• ping

  • : 공백으로 구분한 URL 목록입니다. 링크를 클릭하면 브라우저가 각 URL에 POST 요청을 전송합니다. 주로 클릭 추적 용도로 사용합니다.

• referrerpolicy

  • : URL을 요청할 때 함께 전송할 리퍼러 정보를 지정합니다. 자세한 값과 효과는 Referrer-Policy 문서를 참고하세요.

• rel

  • : 공백으로 구분한 링크 유형 목록으로, 현재 문서와 연결된 URL의 관계를 나타냅니다.

• target

  • : 링크 URL을 표시할 위치(브라우징 컨텍스트)를 지정합니다. 탭·창·<iframe>의 이름이나 아래 키워드를 사용할 수 있습니다.

    값	설명
    _self	현재 탭/창에 표시 (기본값)
    _blank	새 탭/창에 표시
    _parent	부모 브라우징 컨텍스트에 표시. 없으면 _self와 동일
    _top	최상위 브라우징 컨텍스트에 표시. 없으면 _self와 동일

    target="_blank" 사용 시 rel="noreferrer noopener"를 함께 추가해 window.opener API 악용을 방지하세요. Firefox 79+, Chrome 88+ 이상의 최신 브라우저는 target="_blank" 지정 시 자동으로 noopener를 적용합니다.

• type

  • : 링크 URL의 MIME 타입 힌트입니다. 브라우저 동작에 직접적인 영향을 주지는 않습니다.

요소 정보

절대 URL로 연결

<a href="https://www.mozilla.com">Mozilla</a>

상대 URL로 연결

<a href="//example.com">Scheme-relative URL</a>
<a href="https://developer.mozilla.org/ko/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}

같은 페이지의 요소로 연결

<!-- 아래 제목으로 바로 이동하는 링크 -->
<p><a href="#Section_further_down">아래 제목으로 건너뛰기</a></p>

<!-- 링크가 향할 제목 -->
<h2 id="Section_further_down">아래의 제목</h2>

href="#top"이나 빈 프래그먼트(href="#")를 사용하면 페이지 최상단으로 이동하는 링크를 만들 수 있습니다.

이메일 주소로 연결

mailto: 스킴을 사용하면 사용자의 이메일 클라이언트를 열어 새 메일 작성 화면으로 이동합니다.

<a href="mailto:[email protected]">Send email to nowhere</a>

전화번호로 연결

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

tel: 링크의 동작은 기기에 따라 달라집니다.

• 휴대폰: 번호를 자동 입력해 전화 앱을 엽니다.
• 데스크톱: Skype, FaceTime 등 연결된 통화 앱을 엽니다.
• 그 외에 연락처 저장, 다른 기기로 전송 등의 동작도 가능합니다.

download 특성으로 <canvas>를 PNG로 저장하기

download 특성과 data: URL을 함께 사용하면 <canvas> 요소의 내용을 이미지 파일로 저장할 수 있습니다.

HTML

<p>
  마우스 드래그로 그림을 그려보세요.
  <a href="" download="my_painting.png">다운로드</a>
</p>

<canvas width="300" height="300"></canvas>

CSS

html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}

JavaScript

var canvas = document.querySelector("canvas"),
  c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );

보안과 개인정보

<a> 요소는 사용자의 보안과 개인정보에 영향을 줄 수 있습니다. 자세한 내용은 Referer 헤더: 개인정보와 보안 고려사항 문서를 참고하세요.

target="_blank"를 rel="noreferrer noopener" 없이 사용하면 Window.opener API를 이용한 공격에 취약해질 수 있습니다. 최신 브라우저(Firefox 79+, Chrome 88+)는 자동으로 보호를 적용하지만, 구형 브라우저 지원이 필요하다면 명시적으로 추가하세요.

명확한 링크 텍스트 사용하기

링크 텍스트는 맥락 없이 단독으로 읽어도 목적지를 알 수 있어야 합니다.

<!-- 나쁜 예: "여기"만으로는 링크 목적을 알 수 없음 -->
<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>

<!-- 좋은 예: 링크 텍스트만으로 목적지가 명확함 -->
<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>

스크린 리더는 페이지 내 모든 링크를 목록으로 탐색하는 기능을 제공합니다. 명확한 링크 텍스트는 보조 기술 사용자뿐 아니라 페이지를 빠르게 훑어보는 모든 사용자에게 도움이 됩니다.

onclick 이벤트 남용 주의

href="#" 또는 href="javascript:void(0)"을 사용해 <a>를 버튼처럼 쓰는 패턴은 피하세요. 이 방식은 링크 복사, 새 탭에서 열기, 즐겨찾기 추가, JavaScript 비활성화 환경 등에서 예측 불가한 동작을 유발하고, 스크린 리더에 잘못된 의미를 전달합니다.

버튼 동작이 필요하다면 <button> 요소를 사용하세요. <a>는 진짜 URL로의 이동에만 사용해야 합니다.

새 탭/창 열기 및 비 HTML 리소스 링크

target="_blank"로 새 탭을 여는 링크나 파일을 다운로드하는 링크는, 클릭 시 어떤 일이 일어나는지 사용자에게 미리 알려줘야 합니다.

<!-- 새 탭에서 열리는 링크 -->
<a target="_blank" href="https://ko.wikipedia.org">
  위키백과 (새 탭에서 열림)
</a>

<!-- 파일 다운로드 링크 -->
<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>

아이콘을 사용할 경우 반드시 대체 텍스트를 지정하세요.

<a target="_blank" href="https://ko.wikipedia.org">
  위키백과
  <img alt="(새 탭에서 열림)" src="newtab.svg" />
</a>

관련 참고 자료:

• WebAIM: Links and Hypertext
• G200: Opening new windows only when necessary
• G201: Giving users advanced warning when opening a new window

건너뛰기 링크 (Skip Link)

건너뛰기 링크는 <body> 상단에 배치해 주요 콘텐츠 시작 지점으로 바로 이동할 수 있는 링크입니다. 보통 포커스를 받기 전까지는 화면에서 숨겨집니다.

<body>
  <a class="skip-link" href="#content">내용으로 건너뛰기</a>

  <header>…</header>

  <main id="content"><!-- 여기로 건너뜀 --></main>
</body>

.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}

헤더 내비게이션처럼 반복되는 콘텐츠를 키보드나 보조 기술로 매번 탐색해야 하는 사용자에게 큰 도움이 됩니다.

• WebAIM: "Skip Navigation" Links
• Understanding Success Criterion 2.4.1

크기와 간격

대화형 요소는 충분한 활성화 영역을 가져야 합니다. WCAG는 최소 44×44 CSS 픽셀을 권고합니다. 이는 운동 장애가 있거나 터치스크린을 사용하는 사람 모두에게 중요합니다.

여러 링크를 가까이 배치할 때는 margin 등으로 충분한 간격을 확보해, 의도하지 않은 클릭을 방지하세요.

• Understanding Success Criterion 2.5.5: Target Size
• Hand tremors and the giant-button-problem

같이 보기

• <link> — <a>와 유사하지만 사용자에게 노출되지 않는 메타데이터 하이퍼링크용 요소
• :link — 유효한 href를 가진 <a> 요소를 선택하는 CSS 의사 클래스