HTML 태그는 이미지 지역을 정의하는 데 사용됩니다.

HTML 태그 2012. 9. 17. 23:25

share this post

HTML <area> 태그 : 이미지맵 정의 태그(Image Map Area)

<area> HTML 태그는 이미지맵 지역을 정의하는 데 사용되며 <map> 태그 내에서 사용합니다.
이미지맵은 보통 다른 페이지로 클릭 가능한 영역이있는 이미지입니다

<area> 태그 예제

					
					
<html>
 <head>
    <title>html area 태그 예제샘플</title>
 </head>
 <body>
   <h1>area 태그의 예제샘플입니다</h1>
   <p>
    <MAP name="sample">
      <AREA shape=rect coords="51,73,110,120" href="/help/sample1.asp">
      <AREA shape=rect coords="13,91,50,120" href="/help/sample2.asp">
      <AREA shape=rect coords="150,70,180,90" href="/help/sample3.asp">
    </MAP> 
</body>
</html>

[예제 결과보기및 소스코드 수정하기]

<area> 관련 태그

map , area , img

<area> 태그 속성

accesskey : 요소를 활성화하고 포커스/바로가기키를 지정합니다.

alt : <img> 태그에서 사용되며 이미지 설명을합니다.이미지가 깨지거나 없을 경우 이미지 대신 표시 할 수 있습니다.

class : 문서의 요소를 식별합니다.

coords : 클라이언트 측 이미지 맵에 대한 길이의 쉼표로 구분 된 목록을 지정하는 것입니다.

coords 속성 값 :

rect : left, top, right, bottom을 사용합니다.

circle : center-x, center-y, radius

poly : x1,y1,x2,y2,..,xn,yn을 사용합니다. dir : HTML의 일세 속성은 HTML 문서의 요소 안에있는 텍스트의 방향을 설정합니다.

href : 링크 나 이미지 맵의 모든 종류의 URL을 지정하는 것입니다.

hreflang : href 속성으로 연결된 자원의 언어를 지정하는 것입니다.

hreflang 속성 값 :

alternate : 현재 문서의 다른 표현입니다.

author : 문서의 작성자입니다.

bookmark : bookmark입니다.

help : 도움말에 대한 링크입니다.

license : 저작권 라이센스 포함되어 있습니다 설명서를 참조합니다.

next : next입니다.

nofollow : 참조 문서 보증 원본 저자 또는 발행인은하지 않습니다.

noreferrer : 사용자 에이전트가 Refferer 헤더를 전송하지 않을 것을 요구합니다.

prefetch : 문서가 미리 캐쉬되어야 함을 나타냅니다.

prev : 현재 문서 일련의 일부는 검색 태그입니다.

search : 현재 문서와, 연관된 페이지를 검색하는데 사용할 수 있는 자원으로의 링크를 제공합니다.

tag : 현재 문서에 적용되는 태그를 제공합니다. id : 문서의 요소를 식별합니다.

lang : 요소의 내용의 언어를 지정합니다.

name : 요소에 대한 이름을 지정하는 것입니다.

nohref : 하이퍼 링크가없는 지역을 (이미지 맵의) 정의하는 것입니다.

rel : 관련된 요소의 href 속성의 값에 의해 지정된 다른 문서와의 관계를 정의하는 것입니다.

shape : 지역 요소 나 클라이언트 측 이미지 맵의 모양을 정의하는 것입니다.

shape 속성 값 :

rect : 직사각형 영역을 정의합니다.

circle : 원형 지역을 정의합니다.

poly : 형 영역을 정의합니다.

default : 전체 지역을 지정합니다.

: style : 요소에 대한 인라인 스타일을 지정합니다.

tabindex : Tab 키를 사용하여 사용자가 수행하는 순서를 정의합니다.

target : 창을 지정하는 것입니다.

target 속성 값 :

_blank : 새 창이나 탭에서 링크 된 문서를 엽니다.

_parent : 부모 프레임에 문서를 엽니다.

_self : (기본값)현재 문서에서 문서를 엽니다.

_top : 창의 전체 본문에 링크 된 문서를 엽니다. title : 문서에 대한 제안 제목은 열 수 있습니다.

type : type

<area> 태그 이벤트

onclick : 마우스 클릭에서 스크립트가 실행됩니다.

ondblclick : 마우스를 두번 클릭에서 스크립트가 실행됩니다.

onmousedown : 스 버튼을 누를 때 스크립트가 실행됩니다.

onmouseup : 마우스 버튼이 버튼이 누른후 스크립트가 실행됩니다.

onmouseover : 마우스 포인터가 요소 위에 이동할 때 스크립트가 실행됩니다.

onmousemove : 마우스 포인터가 이동할때 스크립트가 실행됩니다.

onmouseout : 마우스 포인터가 요소에서 이동할 때 스크립트가 실행됩니다.

onkeypress : 키를 누르면 스크립트가 실행됩니다.

onkeydown : 키를 눌렀을 때 스크립트가 실행됩니다.

onkeyup : 키가 누른후에 스크립트가 실행됩니다.

onfocus : 요소가 포커스를 얻을 때 스크립트가 실행됩니다.

onblur : 요소가 포커스를 잃을 때 스크립트가 실행됩니다.

'HTML 태그' 카테고리의 다른 글

HTML <aside> 태그 사이드바 태그(Article) - <aside> HTML 태그는 기사 또는 웹 페이지 내에서 주변 콘텐츠와 관련된 콘텐츠가 표현하는 데 사용됩니다. (0)	2012.09.17
HTML <article> 태그 구조태그(Article) - <article> HTML 구조태그로 독립적인 내용을 지정합니다. (0)	2012.09.17
HTML <applet> 태그 자바 애플릿(Java Applet) - 웹페이지에 자바 애플릿을 삽입 할 수 있습니다. (0)	2012.09.17
HTML <address> 태그 저자,역락처정보 태그(Address) - <address> HTML 태그는 저자에 관한 주소,연락처 정보를 나타내는 데 사용됩니다. (0)	2012.09.17
HTML <acronym> 태그 약어태그(acronym) - HTML <acronym>태그는 약어를 나타내는 태그입니다. (0)	2012.09.17