diff options
Diffstat (limited to 'files/ko/web/html/element/a')
| -rw-r--r-- | files/ko/web/html/element/a/index.html | 489 |
1 files changed, 489 insertions, 0 deletions
diff --git a/files/ko/web/html/element/a/index.html b/files/ko/web/html/element/a/index.html new file mode 100644 index 0000000000..680f85b9b6 --- /dev/null +++ b/files/ko/web/html/element/a/index.html @@ -0,0 +1,489 @@ +--- +title: <a> +slug: Web/HTML/Element/a +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML <code><a></code> 요소</strong>(앵커 요소)는 {{htmlattrxref("href", "a")}} 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다.</span> <code><a></code> 안의 콘텐츠는 링크 목적지의 설명을 <strong>나타내야 합니다</strong>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + + + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("download")}}</dt> + <dd>링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다. + <ul> + <li>값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다. + <ul> + <li>{{HTTPHeader("Content-Disposition")}} HTTP 헤더</li> + <li><a href="/ko/docs/Web/API/URL/pathname">URL 경로</a>의 마지막 조각</li> + <li>{{glossary("MIME type", "미디어 유형")}} ({{HTTPHeader("Content-Type")}} 헤더, <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a>의 시작 부분, <a href="/ko/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a>의 {{domxref("Blob.type")}}에서 알아냄)</li> + </ul> + </li> + <li>값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. <code>/</code>와 <code>\</code> 문자는<code>_</code>로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.</li> + </ul> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code>download</code>는 <a href="/ko/docs/Web/Security/Same-origin_policy">동일 출처 URL</a>과 <code>blob:</code>, <code>data:</code> 스킴에서만 작동합니다.</li> + <li><code>Content-Disposition</code>의 <code>filename</code>이 <code>download</code>와 다를 땐 헤더가 우선권을 가집니다. (<code>Content-Disposition: inline</code>일 때, Firefox는 헤더를 우선하고 Chrome은 <code>download</code>를 우선합니다.)</li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.</p> + + <ul> + <li>페이지 구획을 가리키는 프래그먼트 URL</li> + <li>미디어 파일 일부를 가리키는 미디어 프래그먼트</li> + <li><code>tel:</code> URL을 사용하는 전화번호</li> + <li><code>mailto:</code> URL을 사용하는 이메일 주소</li> + <li>웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 통해 지원할 수 있습니다.</li> + </ul> + </dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 <a href="/ko/docs/Web/HTML/Global_attributes/lang">전역 <code>lang</code> 특성</a>과 동일합니다.</dd> + <dt>{{HTMLAttrDef("ping")}}</dt> + <dd>하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 {{HTTPMethod("POST")}} 요청을 전송합니다. 대개 추적 용도로 사용합니다.</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>URL을 가져올 때 사용할 리퍼러. {{httpheader("Referrer-Policy")}} 문서에서 가능한 값과 효과를 확인하세요.</dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 <a href="/ko/docs/Web/HTML/Link_types">링크 유형</a> 목록.</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, <code><iframe></code>의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다. + <ul> + <li><code>_self</code>: URL을 현재 브라우징 맥락에 표시합니다. 기본값.</li> + <li><code>_blank</code>: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.</li> + <li><code>_parent</code>: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + <li><code>_top</code>: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 <code>_self</code>와 동일하게 행동합니다.</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> <code>target</code>을 사용할 때, <code>rel="noreferrer"</code>를 추가해 <code>window.opener</code> API의 악의적인 사용을 방지하는걸 고려하세요.</p> + </div> + + <div class="blockIndicator note"> + <p><strong>참고:</strong> 최근의 브라우저(Firefox 79+ 등)에서는 target="_blank"를 지정하면 <code>rel="noopener"</code>를 적용한 것과 같은 동작을 합니다.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>링크 URL의 {{Glossary("MIME type")}}에 대한 힌트. 특별한 내장 기능은 없습니다.</dd> +</dl> + +<div class="hidden"> +<h3 id="Obsolete_attributes">Obsolete attributes</h3> + +<dl> + <dt id="charset">{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Hinted at the <a href="/en-US/docs/Glossary/character_encoding">character encoding</a> of the linked URL. + <div class="note"> + <p><strong>Note:</strong> This attribute is obsolete and <strong>should not be used by authors</strong>. Use the HTTP <a href="/en-US/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type:</code></a> header on the linked URL.</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Used with <a href="#shape">the <code>shape</code> attribute</a>. A comma-separated list of coordinates.</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Was required to define a possible target location in a page. In HTML 4.01, <code>id</code> and <code>name</code> could both be used on <code><a></code>, as long as they had identical values. + <div class="note"> + <p><strong>Note:</strong> Use the global attribute {{HTMLAttrxRef("id")}} instead.</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>Specified a reverse link; the opposite of <a href="#rel">the <code>rel</code> attribute</a>. Deprecated for being very confusing.</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>The shape of the hyperlink’s region in an image map. + <div class="note"><strong>Note:</strong> Use the {{HTMLElement("area")}} element for image maps instead.</div> + </dd> +</dl> +</div> + +<h2 id="속성">속성</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠" title="HTML/Content categories#Flow content">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content categories#Phrasing content">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 컨텐츠</a>, 뚜렷한 콘텐츠.</td> + </tr> + <tr> + <th scope="row">가능한 콘텐츠</th> + <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#투명_콘텐츠_모델">투명함</a>. <a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>(대화형 콘텐츠 제외) 또는 <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th scope="row">태그 생략</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">가능한 부모 요소</th> + <td> + <p><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠" title="HTML/Content_categories#Phrasing_content">구문 콘텐츠</a>를 허용하는 모든 요소, 또는 플로우 콘텐츠를 허용하는 모든 요소. 단, 다른 <code><a></code> 요소는 불가능.</p> + </td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><code>href</code> 특성이 존재하면 {{ariarole("link")}}, 그 외의 경우 <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td> + <p><code>href</code> 특성이 존재할 경우,</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p><code>href</code> 특성이 존재하지 않을 경우,</p> + + <ul> + <li>모두</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM 인터페이스</th> + <td>{{domxref("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h3 id="절대_URL로_연결">절대 URL로 연결</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('절대_URL로_연결')}}</p> + +<h3 id="상대_URL로_연결">상대 URL로 연결</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><a href="//example.com">Scheme-relative URL</a> +<a href="/en-US/docs/Web/HTML">Origin-relative URL</a> +<a href="./p">Directory-relative URL</a> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('상대_URL로_연결')}}</p> + +<h3 id="같은_페이지의_요소로_연결">같은 페이지의 요소로 연결</h3> + +<pre class="brush: html notranslate"><!-- <a> 요소로 아래의 구획에 연결 --> +<p><a href="#Section_further_down"> + 아래 제목으로 건너뛰기 +</a></p> + +<!-- 링크가 향할 제목 --> +<h2 id="Section_further_down">아래의 제목</h2> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> <code>href="#top"</code>이나 빈 프래그먼트(<code>href="#"</code>)를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 명세</a>를 확인하세요.</p> +</div> + +<h3 id="이메일_주소로_연결">이메일 주소로 연결</h3> + +<p>사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 <code>mailto:</code> 스킴을 사용하세요.</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Send email to nowhere</a></pre> + +<p>제목과 본문 포함 등, <code>mailto:</code> URL에 관한 자세한 내용은 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#이메일_링크">이메일 링크</a>와 {{RFC(6068)}}을 참고하세요.</p> + +<h3 id="전화번호로_연결">전화번호로 연결</h3> + +<ul> +</ul> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> 링크는 장치의 능력에 따라 행동이 바뀝니다.</p> + +<ul> + <li>휴대전화에서는 번호를 자동으로 입력합니다.</li> + <li>대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.</li> + <li>웹사이트는 {{domxref("Navigator.registerProtocolHandler()")}}를 사용해 전화를 걸 수 있습니다. <code>web.skype.com</code>을 참고하세요.</li> + <li>다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.</li> +</ul> + +<p><code>tel:</code> URL의 구문, 추가 기능, 그 외 더 자세한 정보는 {{RFC(3966)}}을 참고하세요.</p> + +<h3 id="download_특성으로_<canvas>를_PNG로_저장하기"><code>download</code> 특성으로 <code><canvas></code>를 PNG로 저장하기</h3> + +<p>{{htmlattrxref("download", "a")}} 특성과 <code>data:</code> URL을 사용해 {{HTMLElement("canvas")}} 요소의 콘텐츠를 이미지로 저장할 수 있습니다.</p> + +<h4 id="저장_링크를_가진_그림판_예제">저장 링크를 가진 그림판 예제</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>마우스 드래그로 그림을 그려보세요. + <a href="" download="my_painting.png">다운로드</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">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() +); +</pre> + +<h5 id="결과_3">결과</h5> + +<p>{{EmbedLiveSample('저장_링크를_가진_그림판_예제', '100%', '400')}}</p> + +<h2 id="Specifications" name="Specifications">보안과 개인정보</h2> + +<p><code><a></code> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. <a href="/ko/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> 헤더: 개인정보와 보안 고려사항</a> 문서에서 자세한 내용을 알아보세요.</p> + +<p><code>target="_blank"</code>를 <code>rel="noreferrer"</code>와 <code>rel="noopener"</code> 없이 사용하면 웹사이트가 {{domxref("Window.opener", "window.opener")}} API 악용 공격에 취약해집니다. (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">취약점 설명</a>) 다만, 최근 브라우저(Firefox 79+ 등)는 <code>target="_blank"</code>를 지정하면 임의로 <code>rel="noopener"</code> 설정과 동일한 보호 수준을 적용합니다.</p> + +<h2 id="Specifications" name="Specifications">접근성</h2> + +<h3 id="강한_링크_텍스트">강한 링크 텍스트</h3> + +<p>링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.</p> + +<h4 id="접근성_떨어지는_약한_링크_텍스트">접근성 떨어지는 약한 링크 텍스트</h4> + +<p>심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.</p> + +<pre class="brush: html example-bad notranslate"><p> + 저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요. +</p> +</pre> + +<h4 id="강한_링크_텍스트_2">강한 링크 텍스트</h4> + +<p>다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!</p> + +<pre class="brush: html example-good notranslate"><p> + 저희의 <a href="/products">제품을 더 알아보세요</a>. +</p></pre> + +<p>접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.</p> + +<h3 id="onclick_이벤트"><code>onclick</code> 이벤트</h3> + +<p>앵커 요소의 <code>href</code>를 <code>#</code>이나 <code>javascript:void(0)</code>으로 지정해 페이지 새로고침을 막고, <code>click</code> 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.</p> + +<p>이런 가짜 <code>href</code> 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.</p> + +<p>대신 {{HTMLElement("button")}}을 사용하세요. <strong>하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다</strong>.</p> + +<h3 id="외부_링크와_비_HTML_리소스_링크">외부 링크와 비 HTML 리소스 링크</h3> + +<p><code>target="_blank"</code>로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.</p> + +<p>시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.</p> + +<h4 id="새로운_탭창을_여는_링크">새로운 탭/창을 여는 링크</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://ko.wikipedia.org"> + 위키백과 (새 탭에서 열림) +</a> +</pre> + +<h4 id="비_HTML_리소스_링크">비 HTML 리소스 링크</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 연간 보고서 (PowerPoint) +</a> +</pre> + +<p>아이콘을 사용해 링크의 행동을 강조할 땐 {{HTMLAttrxRef("alt", "img", "대체 텍스트", 1)}}를 꼭 지정하세요.</p> + +<pre class="brush: html notranslate"><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></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / Understanding WCAG, Guideline 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="건너뛰기_링크">건너뛰기 링크</h3> + +<p><strong>건너뛰기 링크</strong>(skip link)는 {{HTMLElement("body")}} 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.</p> + +<pre class="brush: html notranslate"><body> + <a href="#content">내용으로 건너뛰기</a> + + <header> + … + </header> + + <main id="content"> <!-- 여기로 건너뜀 --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.</p> + +<p>건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / Understanding WCAG, Guideline 2.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="크기와_간격">크기와 간격</h3> + +<h4 id="크기">크기</h4> + +<p>링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS 픽셀</a> 크기를 권고합니다.</p> + +<p>산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="간격">간격</h4> + +<p>링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.</p> + +<p>간격은 {{CSSxRef("margin")}}과 같은 CSS 속성으로 설정할 수 있습니다.</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td>Added the <code>referrer</code>attribute.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "text-level-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{HTMLElement("link")}}는 <code><a></code>와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.</li> + <li>{{CSSxRef(":link")}}는 유효한 <code>href</code> 특성을 가진 <code><a></code> 요소를 선택하는 CSS 의사 클래스입니다.</li> +</ul> |