area element - by. UXKM

area element 설명

<area> 요소는 단일요소입니다.
<area> 요소는 이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의할 때 사용합니다.

CSS 기본값 :

6.4.1. area 속성

[shape] <area shape="rect | circle | poly">

영역의 모양을 명시합니다.

  1. rect 값 - 사각형 영역을 정의
  2. circle 값 - 원형 영역을 정의
  3. poly 값 - 다각형을 정의

[coords] <area coords="좌표">

좌표값을 지정합니다. 이미지의 왼쪽 모서리를 기준으로 하이퍼링크 영역의 시작과 끝 부분을 지정합니다.
이 coords속성값을 지정하기가 까다롭습니다. 그래서 이 부분은 텍스트 에디터에서 직접 코딩하지 않고 이미지맵을 생성하는 유틸리티를 사용하는 것이 좋습니다.
이미지 맵은 링크에만 국한되지 않습니다. 이미지 맵 버튼을 클릭하면 프로그램이나 스크립트가 실행될 수도 있습니다.
이미지 맵을 생성하는데 도움이되는 여러 도구가 있습니다.
온라인 이미지맵 생성기를 사용하는 방법도 있습니다. 온라인 이미지맵 생성기

  1. shape 속성이 rect 속성 값을 가지는 경우

    rect 이미지 예제
    coords="x1,y1, x2,y2" - coords=" 0, 0, 50, 50"
    rect 이미지 예제
    coords="x2,y1, x3,y2" - coords="50, 0, 100, 50"

  2. shape 속성이 circle 속성 값을 가질때 시작은 왼쪽 상단에서 시작할 필요는 없습니다. 영역 태그의 순서는 중요하지 않습니다.

    circle 이미지 예제

    <area shape="circle" coords="x,y,radius" alt="..">

    <area shape="circle" coords="25,25,25" alt="Yes">

    <area shape="circle" coords="75,25,25" alt="No">

  3. shape 속성이 poly 속성 값을 가지는 경우
    형상, X값의 집합이고, 다각형Y의 각 포인트에 대한 쌍 : x1, y1, x2, y2, x3, y3, 등. HTML4에서 백분율 기호 (%)가 추가 된 경우 값은 픽셀 수 또는 백분율입니다.
    HTML5에서 값은 CSS 픽셀 수입니다.

    poly 이미지 예제

    <area shape="poly" coords="x1,y1,x2,y2,..,xn,yn" title="..">

    <area shape="poly" coords="2,5,32,1,33,22,51,36,33,57" title="The Americas">

    <area shape="poly" coords="57,14,70,2,111,3,114,23,97,34" title="Eurasia">

    <area shape="poly" coords="57,14,86,29,73,52,66,49,50,28" title="Africa">

    <area shape="poly" coords="105,40,108,49,122,52,127,41,117,34" title="Australia">

[href] <area href="URL">

해당 영역(area)에 연결된 하이퍼링크의 대상 URL(target URL)을 명시합니다.

[alt] <area alt="대체 텍스트">

영역(area)에 대한 대체 텍스트(alternate text)를 명시합니다.
반드시 필수로 들어가야 하며, href 속성이 설정되어 있어야만 사용할 수 있습니다.

[target] <area target="_blank | _parent | _self | _top | 프레임 이름">

영역을 클릭했을 때 대상 URL의 문서가 열릴 위치를 명시합니다.

  1. _blank 속성 값 : URL을 새로운 브라우징 문맥에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
  2. _self 속성 값 : URL을 현재 브라우징 문맥에 표시합니다. 기본값으로 생략이 가능합니다.
  3. _parent 속성 값 : URL을 현재 브라우징 문맥의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
  4. _top 속성 값 : URL을 최상단 브라우징 문맥(현재 문맥의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 문맥)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

[download] <area download="파일이름">

사용자가 하이퍼링크를 클릭할 때 해당 대상(target)으로 연결되지 않고 대신 해당 콘텐츠의 다운로드를 명시합니다.

[media] <area media="미디어 쿼리">

대상 URL이 최적화되는 미디어나 매체를 명시합니다.

[rel] <area rel="alternate | author | bookmark | help | license | next | nofollow | noreferrer | prefetch | prev | search | tag">

현재 문서와 대상 URL 사이의 연관 관계를 명시합니다.
href 속성을 포함하는 앵커의 경우이 속성은 대상 객체와 링크 객체의 관계를 지정합니다. 링크 유형 값(참조)
값과 의미는 문서 작성자에게 의미가 있는 일부 권한에 의해 등록됩니다.
다른 관계가 없으면 기본 관계는 무효가 됩니다.
href 속성이 있는 경우에만 이 속성을 사용할 수 있습니다.

area element 예제