설명
The HTML Area element (<area>) defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.
<area>는 이미지의 특정한 영역을 정의한 다음, 그 영역에 하이퍼 링크를 연결시킨다. <area>는 <map>안에서만 사용한다.
Under the HTML 3.2, 4.0, and 5 specifications, the closing tag </area> is forbidden.
HTML 3.2, 4.0, 5 스펙에 따르면, <area>로 시작한 태그를 </area>로 닫으면 안된다. <area>만 써야 한다.
The XHTML 1.0 specification requires a trailing slash: <area />.
XHTML 1.0 스펙에서는 <area ... />와 같이 맨 뒤에 /를 써야만 한다.
The id, class, and style attributes have the same meaning as the core attributes defined in the HTML 4 specification, but only Netscape and Microsoft define them.
id, class, style 속성은 HTML 4 스펙에서 정의된 것과 같지만, 넷스케이프와 마이크로소프트에서만 그것들을 정의하고 있다. ※ 넷스케이프와 마이크로소프트의 스펙에서만 이 속성들을 정의하고 있어서, 이들 회사에서 개발한 브라우저(Mozilla, Internet Explorer)에서만 지원하고 다른 브라우저들은 지원하지 않는다는 것인지? 제 생각엔 2개 회사에서 정의만 하고 있고, 지원은 모든 브라우저에서 하는 것 같습니다.
Netscape 1–level browsers do not understand the target attribute as it relates to frames.
넷스케이프 1-레벨 브라우저들에서는, 하이퍼 링크로 연결될 대상을 지정할 수 있는 target 속성이 동작하지 않는다. ※ "넷스케이프 1-레벨 브라우저"가 어떤 의미인지 정확하게 알 수 없네요. "DOM Level 1.0을 지원하는 브라우저"들을 뜻하는 것일까요?
HTML 3.2 defines only alt, coords, href, nohref, and shape.
HTML 3.2 에서는 alt, coords, href, nohref, shape 속성만 정의하고 있다.
Usage Context
| Permitted content | Empty; this is a void element. |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parent elements |
any element that accepts Phrasing content. The <area> element must have an ancestor <map>, but it need not be a direct parent. |
| Normative document | HTML 5, section 4.8.13, HTML 4.01, section 13.6.1 |
속성
Like all other HTML elements, this element supports the global attributes. ※ global attributes의 링크가 잘못되었습니다. 클릭하니, 공동 번역 Home으로 가네요.
다른 HTML 엘리먼트들처럼 <area>도 전역 속성들을 지원한다.
accesskey - HTML4 only, Obsolete in HTML5
accesskey - HTML4에서만 사용 가능, HTML5에서는 더이상 사용하지 않음
Specifies a keyboard navigation accelerator for the element. Pressing ALT or a similar key in association with the specified character selects the form control correlated with that key sequence. Page designers are forewarned to avoid key sequences already bound to browsers. This attribute is global since HTML5.
이 요소로 포커스를 이동시키기 위한 키보드 단축키. ALT 키 또는 ALT 키와 동등한 키와 이 속성에 지정한 문자를 같이 누르면, 이 엘리먼트로 "선택"된다. (역주: 여기서 "선택"된다는 의미는, Tab 키로 엘리먼트들을 이동하는 경우, 이 엘리먼트로 이동한다는 뜻이다. <area>의 경우 <area>에서는 ALT 키와 accesskey 값을 클릭하면 href 속성에서 지정한 하이퍼 링크가 실행된다. 만약, href 에 하이퍼 링크가 없으면, 이 영역이 선택만 된다.) 페이지 디자이너는, 각 브라우저에서 미리 단축 키로 등록된 문자를 이 값에 배정하지 않도록 주의해야 한다. 그럴 경우, 이 속성은 동작하지 않는다. HTML5 버전부터, 이 속성은 전역속성이 되었다.
alt
A text string alternative to display on browsers that do not display images. The text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. In HTML4, this attribute is required, but may be the empty string (""). In HTML5, this attribute is required only if the href attribute is used.
이미지들을 표시할 수 없는 브라우저에서 이미지 대신 화면에 표시할 문자열. 이 문자열은, 누구나 원래 표시하고자 했던 이미지를 떠올릴 수 있는 내용으로 작성되어야 한다. HTML4에서 이 속성은 꼭 필요하지만, 특별히 어떤 값을 주기 어려우면 빈 문자열("")로 지정해도 된다. HTML5에서 이 속성은 href 속성이 있을 때에만 꼭 필요하다.
coords
A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the shape attribute. For a rect or rectangle shape, the coords value is two x,y pairs: left, top, right, and bottom. For a circle shape, the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius. For a poly or polygon< shape, the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on. In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.
하이퍼 링크를 연결할 특정 영역의 좌표를 나타내는 값들. 숫자들의 의미는 shape 속성에 지정한 모양에 따라 다르다.
- rect (rectangle) : 직사각형의 왼쪽 위 (x0, y0) 좌표와 오른쪽 아래의 (x1, y1) 좌표 [예] coords="10,10,30,30"
- circle (circ) : 원의 중심 (x, y) 좌표와 반지름 r [예] coords="100,100,50"
- poly (polygon) : 각 지점의 좌표 (x1, y1), (x2, y2), (x3, y3), ... [예] coords="10,50,50,20,90,60,60,100,30,70"
HTML4에서는 각 값의 단위는 따로 표시하지 않으면 픽셀이고, %를 붙이면 퍼센트이다. HTML5에서는 CSS 픽셀 수이다. ※ 여기서 "CSS 픽셀 수"란 의미가 "CSS에서 지정한 픽셀 수"인지 정확히는 잘 모르겠네요.
href
The hyperlink target for the area. Its value is a valid URL. In HTML4, either this attribute or the nohref attribute must be present in the element. In HTML5, this attribute may be omitted; if so, the area element does not represent a hyperlink.
지정한 영역의 클릭했을 때 이동할 URL이다. HTML4에서는, 이 속성이나 nohref 속성 중 하나는 반드시 있어야 한다. HTML5에서는, 이 속성을 쓰지 않으면 지정한 영역에 하이퍼 링크가 없는 것으로 간주한다.
hreflang - HTML5
Indicates the language of the linked resource. Allowed values are determined by BCP47. Use this attribute only if the href attribute is present.
href 속성으로 링크된 자원의 언어를 나타낸다. BCP47 에 의해 정의된 값들만 사용할 수 있다. (역주: BCP47 이 이해하기 어렵다면, w3schools.com 에 쉽게 나와 있다 예를 들어, 영문 자원은 "en", 한국어 자원은 "ko"이다.) href 속성이 있을 때에만 사용하라.
name - HTML4 only, Obsolete in HTML5
name - HTML4에서만 사용 가능, HTML5에서는 더이상 사용하지 않음
Define a names for the clickable area so that it can be scripted by older browsers.
클릭할 수 있는 영역의 이름을 정의하여, 오래된 브라우저들에서 스크립팅을 할 수 있게 한다. ※ "스크립팅"이 "Javascript나 VBScript와 같은 스크립트 언어에서 area 객체를 접근할 수 있도록 한다"는 의미인지, "<area>를 지원하지 않는 브라우저들에서 name 속성을 화면에 표기할 수 있게 한다"는 의미인지 불분명합니다.
media - HTML5
A hint of the media for which the linked resource was designed, for example print and screen. If omitted, it defaults to all. Use this attribute only if the href attribute is present.
링크된 자원이 어떤 형식의 미디어로 되어 있는지 알려주는 힌트, 예를 들면, "컴퓨터 화면에 종이로 출력 전 미리보기"라면 "print and screen"라고 표시한다. (역주: media 속성에 들어갈 수 있는 값과 의미는 w3schools.com 에 쉽게 나와 있다.) 만약 생략되면, 기본값인 all로 인식된다. 이 속성은 href 속성이 있을 때만 사용하라.
nohref - HTML4 only, Obsolete in HTML5
nohref - HTML4에서만 사용 가능, HTML5에서는 더이상 사용하지 않음
Indicates that no hyperlink exists for the associated area. Either this attribute or the href attribute must be present in the element.
지정된 영역에 연결된 하이퍼 링크가 없음을 나타낸다. 이 속성이나 href 속성 중 하나는 반드시 있어야 한다.
참고 : This attribute is obsolete in HTML5, instead omitting the href attribute is sufficient.
참고 : 이 속성은 HTML에서는 더이상 사용하지 않는다. 대신, href 속성을 생략하면 된다.
rel - HTML5
For anchors containing the href attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of relationship values. 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 href attribute is present.
href 속성을 포함하는 <a>, <area> 엘리먼트에서, 이 속성은 이 엘리먼트와 링크된 엘리먼트와의 관계를 표시한다. ※ target object, link object에서 object를 page가 아닌 element로 번역하는 게 맞을까요? 이 값은, 관계를 표시하는 값들을 콤마로 분리해 나열한다. 관계값들과 각 의미는, 문서 작성자에게 의미가 있는 어떤 기관에 의해 등록될 것이다. ※ 이 문장 정확히 어떤 뜻인지 모르겠네요. 만약 아무 값도 주어지지 않는다면, 기본 관계는 void 다. href 속성이 있을 때에만 이 속성을 사용하라.
shape
The shape of the associated hot spot. The specifications for HTML 5 and HTML 4 define the values rect, which defines a rectangular region; circle, which defines a circular region; poly, which defines a polygon; and default, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape; these values are Non-standard .
하이퍼 링크로 연결한 특정 영역의 모양. HTML 5, HTML 4 스펙에서는 이 속성의 값을 4가지로 정하고 있다.
- rect : 사각형
- circle : 원형
- poly : 다각형
- default : 이미지 전체 영역
많은 브라우저들, 특히 인터넷 익스플로러 4와 그 이상 버전에서 rectangle, circ, polygon을 위 값들과 동등한 값으로 지원하고 있다. 이 값들은 표준은 아니다.
tabindex - HTML4 only, Obsolete in HTML5
tabindex - HTML4에서만 사용 가능, HTML5에서는 더이상 사용하지 않음
A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.
브라우저에서는 Tab를 눌러 페이지 내의 각 엘리멘트들로 차례로 이동할 수 있는데, 몇 번째로 이 영역으로 이동할 지를 정해주는 숫자값. 이 속성은 HTML5에서는 전역 속성이다.
target
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
- _self: Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
- _blank: Load the response into a new unnamed HTML4 window or HTML5 browsing context.
- _parent: Load the response into the HMTL4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
- _top: In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
Use this attribute only if the href attribute is present.
이 속성은 하이퍼 링크로 연결된 자원이 어디에 표시될 지를 지정한다. HTML4에서는, 프레임의 이름이나 키워드다. HTML5에서는 브라우징 객체들(예를 들면, 브라우저의 탭, 윈도우, 문서 내의 iframe)의 이름이나 키워드다. "키워드"는 다음 4개를 사용할 수 있다.
- _self : 현재와 동일한 HTML4 프레임(또는 HTML5 브라우징 객체)에 하이퍼 링크 페이지를 표시한다. target 속성을 쓰지 않으면, 이 값으로 간주한다.
- _blank : 새 HTML4 윈도우나 HTML5 브라우징 객체에 하이퍼 링크 페이지를 표시한다.
- _parent : 현재 프레임의 HTML4 상위 프레임이나 HTML5 상위 브라우징 객체에 하이퍼 링크 페이지를 표시한다. 만약 상위 객체가 없으면, _self 처럼 동작한다.
- _top : HTML4 에서는, 페이지 내부의 모든 프레임들을 없애고 전체 페이지에 하이퍼 링크 페이지를 표시한다. HTML5 에서는 최상위의 브라우징 객체(현재의 브라우징 객체의 상위 브라우징 객체들 중에서 상위 객체가 없는 브라우징 객체)에 하이퍼 링크 페이지를 표시한다. 만약 상위 객체가 없으면, _self 처럼 동작한다.
이 속성은 href 속성이 있을 때에만 사용하라. ※ "Browsing Context"를 "브라우징 객체"라고 표현하는 게 적합할까요?
type
This attribute specifies the media type in the form of a MIME type for the link target. Generally, this is provided strictly as advisory information; however, in the future a browser might add a small icon for multimedia types. For example, a browser might add a small speaker icon when type is set to audio/wav. For a complete list of recognized MIME types, see http://www.w3.org/TR/html4/references.html#ref-MIMETYPES. Use this attribute only if the href attribute is present.
이 속성은 링크된 자원이 어떤 미디어 형식인지를 MIME 타입으로 표시한다. 가능하다면 이 속성은 꼭 표시하기 바란다. 미래의 브라우저들은 이 값을 참고로 멀티미디어 타입에 맞는 작은 아이콘을 미리 표시해 줄 수도 있다. 예를 들면, 어떤 브라우저에서는 이 값이 audio/wav 이면, 작은 스피커 아이콘을 화면에 자동으로 추가해 줄 수 있는 것이다. 현재까지 인정된 모든 MIME 타입 목록을 보려면, http://www.w3.org/TR/html4/references.html#ref-MIMETYPES 을 참고하라. href 속성을 사용할 때에만 이 속성을 사용하라.
DOM Interface
This element implements the HTMLAreaElement interface.
<area>는 HTMLAreaElement 인터페이스를 구현한다.
예제
<map name="primary">
<area shape="circle" coords="200,250,25" href="another.htm" />
<area shape="default" nohref />
</map>
