---
title: <area>
slug: Web/HTML/Element/area
tags:
  - Element
  - HTML
  - HTML embedded content
  - Reference
  - Web
translation_of: Web/HTML/Element/area
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;area&gt;</code> 요소</strong>는 이미지의 핫스팟 영역을 정의하고 {{glossary("hyperlink", "하이퍼링크")}}를 추가할 수 있습니다. {{htmlelement("map")}} 요소 안에서만 사용할 수 있습니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>

<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#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>없음. {{glossary("empty element", "빈 요소")}}입니다.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>여는 태그는 존재해야 하며 닫는 태그는 존재해선 안됩니다.</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소. 단, 조상 중 {{htmlelement("map")}} 요소가 존재해야 합니다.</td>
  </tr>
  <tr>
   <th scope="row">암시적 ARIA 역할</th>
   <td>{{htmlattrxref("href", "area")}} 특성이 존재하면 {{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>없음</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{domxref("HTMLAreaElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("alt")}}</dt>
 <dd>이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. {{htmlattrxref("href", "area")}} 특성이 존재할 경우 필수 사항입니다.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("coords")}}</dt>
 <dd>핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 <code>shape</code> 특성의 값에 따라 달라집니다.</dd>
 <dd>
 <ul>
  <li><code>rect</code>: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다.</li>
  <li><code>circle</code>: <code>x,y,r</code>로서 <code>x,y</code>는 원의 중심 좌표이며 <code>r</code>은 반지름입니다.</li>
  <li><code>poly</code>: 다각형의 꼭지점을 나타내는 다수의 x, y 쌍(<code>x1,y1,x2,y2,x3,y3,...</code>)입니다.</li>
 </ul>
 값의 단위는 CSS 픽셀입니다.</dd>
 <dt>{{htmlattrdef("download")}}</dt>
 <dd>특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. {{htmlelement("a")}}의 {{htmlattrxref("download", "a")}} 특성 설명에서 전체 설명을 볼 수 있습니다.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("href")}}</dt>
 <dd><code>&lt;area&gt;</code> 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 <code>&lt;area&gt;</code> 요소는 하이퍼링크를 나타내지 않습니다.</dd>
 <dt>{{htmlattrdef("hreflang")}}</dt>
 <dd>연결한 리소스의 언어를 나타냅니다. 가능한 값은 <a class="external external-icon" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a>에 따릅니다. {{htmlattrxref("href", "area")}} 특성이 존재할 때만 사용하세요.</dd>
 <dt>{{htmlattrdef("ping")}}</dt>
 <dd>하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 {{HTTPMethod("POST")}} 요청을 본문 <code>PING</code>으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
 <dd>A string indicating which referrer to use when fetching the resource:
 <ul>
  <li><code>"no-referrer"</code> meaning that the <code>Referer:</code> header will not be sent.</li>
  <li>"<code>no-referrer-when-downgrade</code>" meaning that no <code>Referer:</code> header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent’s default behavior, if no policy is otherwise specified.</li>
  <li><code>"origin"</code> meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.</li>
  <li>"origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.</li>
  <li><code>"unsafe-url"</code> meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("rel")}}</dt>
 <dd>For anchors containing the <strong>href</strong> attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types">link types values</a>. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the <strong>href</strong> attribute is present.</dd>
 <dt>{{htmlattrdef("shape")}}</dt>
 <dd>관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values <code>rect</code>, which defines a rectangular region; <code>circle</code>, which defines a circular region; <code>poly</code>, which defines a polygon; and <code>default</code>, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support <code>circ</code>, <code>polygon</code>, and <code>rectangle</code> as valid values for <strong>shape</strong>; these values are {{Non-standard_inline}}.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다.
 <ul>
  <li><code>_self</code>: 결과를 현재 HTML4 프레임 또는 HTML5 브라우징 컨텍스트에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.</li>
  <li><code>_blank</code>: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.</li>
  <li><code>_parent</code>: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 _self와 동일하게 여겨집니다.</li>
  <li><code>_top</code>: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 _self와 같이 행동합니다.</li>
 </ul>
 이 속성은 <strong>href</strong> 속성이 존재할떄만 사용합니다.</dd>
</dl>

<div class="hidden">
<h3 id="Deprecated_attributes">Deprecated attributes</h3>

<dl>
 <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt>
 <dd>Define a names for the clickable area so that it can be scripted by older browsers.</dd>
 <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt>
 <dd>Indicates that no hyperlink exists for the associated area.
 <div class="note">
 <p><strong>Note: </strong>Since HTML5, omitting the <code>href</code> attribute is sufficient.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt>
 <dd>A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.</dd>
 <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt>
 <dd>No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but <a href="https://html.spec.whatwg.org/multipage/#the-area-element">the canonical HTML specification</a> doesn’t, and it has no effect in any user agents.)</dd>
</dl>
</div>

<h2 id="예제">예제</h2>

<pre class="brush: html notranslate">&lt;map name="primary"&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
  &lt;area shape="default" nohref /&gt;
&lt;/map&gt;
&lt;img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic"&gt;
</pre>

<h3 id="결과">결과</h3>

<p>{{EmbedLiveSample('예제', 360, 160)}}</p>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td>
   <td>{{Spec2('Referrer Policy')}}</td>
   <td>Added the <code>referrerpolicy</code> attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;area&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.area")}}</p>