A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements/a below:

<a> - HTML: Hypertext Markup Language

<a>

Baseline Widely available *

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:m.bluth@example.com">Email</a></li>
  <li><a href="tel:+123456789">Phone</a></li>
</ul>

li {
  margin-bottom: 0.5rem;
}
특성

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

download

링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

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

  • Content-Disposition의 filename이 download와 다를 땐 헤더가 우선권을 가집니다. (Content-Disposition: inline일 때, Firefox는 헤더를 우선하고 Chrome은 download를 우선합니다.)
href

하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.

hreflang

링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 전역 lang 특성과 동일합니다.

ping

하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 POST 요청을 전송합니다. 대개 추적 용도로 사용합니다.

referrerpolicy Experimental

URL을 가져올 때 사용할 리퍼러. Referrer-Policy 문서에서 가능한 값과 효과를 확인하세요.

rel

하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 링크 유형 목록.

target

링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <iframe>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

참고: target을 사용할 때, rel="noreferrer"를 추가해 window.opener API의 악의적인 사용을 방지하는걸 고려하세요.

참고 : 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 rel="noopener"를 적용한 것과 같은 동작을 합니다.

type

링크 URL의 MIME type에 대한 힌트. 특별한 내장 기능은 없습니다.

속성 예제 절대 URL로 연결 HTML 
<a href="https://www.mozilla.com">Mozilla</a>
결과 상대 URL로 연결 HTML 
<a href="//example.com">Scheme-relative URL</a>
<a href="/ko/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

a {
  display: block;
  margin-bottom: 0.5em;
}
결과 같은 페이지의 요소로 연결 
<!-- <a> 요소로 아래의 구획에 연결 -->
<p><a href="#Section_further_down">아래 제목으로 건너뛰기</a></p>

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

참고: href="#top"이나 빈 프래그먼트(href="#")를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. HTML 명세를 확인하세요.

이메일 주소로 연결

사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 mailto: 스킴을 사용하세요.

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

제목과 본문 포함 등, mailto: URL에 관한 자세한 내용은 이메일 링크와 RFC 6068을 참고하세요.

전화번호로 연결 
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>

tel: 링크는 장치의 능력에 따라 행동이 바뀝니다.

tel: URL의 구문, 추가 기능, 그 외 더 자세한 정보는 RFC 3966을 참고하세요.

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"와 rel="noopener" 없이 사용하면 웹사이트가 window.opener API 악용 공격에 취약해집니다. (취약점 설명) 다만, 최근 브라우저(Firefox 79+ 등)는 target="_blank"를 지정하면 임의로 rel="noopener" 설정과 동일한 보호 수준을 적용합니다.

접근성 강한 링크 텍스트

링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.

접근성 떨어지는 약한 링크 텍스트

심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.

<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>
강한 링크 텍스트

다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!

<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>

접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.

onclick 이벤트

앵커 요소의 href를 #이나 javascript:void(0)으로 지정해 페이지 새로고침을 막고, click 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.

이런 가짜 href 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.

대신 <button>을 사용하세요. 하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다.

외부 링크와 비 HTML 리소스 링크

target="_blank"로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.

시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.

새로운 탭/창을 여는 링크 
<a target="_blank" href="https://ko.wikipedia.org">
  위키백과 (새 탭에서 열림)
</a>
비 HTML 리소스 링크 
<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>

아이콘을 사용해 링크의 행동을 강조할 땐 대체 텍스트를 꼭 지정하세요.

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

<a href="2017-annual-report.ppt">
  2017 연간 보고서
  <img alt="(PowerPoint 파일)" src="ppt-icon.svg" />
</a>
건너뛰기 링크

건너뛰기 링크(skip link)는 <body> 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.

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

  <header>…</header>

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

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

건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.

건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.

크기와 간격 크기

링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.

간격

링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.

간격은 margin과 같은 CSS 속성으로 설정할 수 있습니다.

명세 브라우저 호환성 같이 보기

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4