• 회원가입
  • 로그인
  • 구글아이디로 로그인

[image] HTML - <area> 태그 - 이미지맵에서 특정 링크 영역 (= area태그 = 에어리어태그) (HTML5수정)

목차
  1. <area> 예제 - 이미지맵에서 특정 링크 영역
  2. <area> 정의
  3. <area> 구문
  4. <area> 속성

 

<area> 예제 - 이미지맵에서 특정 링크 영역

 
<img src="https://i.imgur.com/NUjTqSd.gif" width="389" height="26" border="0" usemap="#Search_Engine">
<map name="Search_Engine">
    <area shape="rect" coords="4,3,68,21" href="http://naver.com" target="_blank" onfocus="blur()">
    <area shape="rect" coords="78,4,119,20" href="http://daum.net" target="_blank" onfocus="blur()">
    <area shape="rect" coords="128,5,193,19" href="http://www.paran.com" target="_blank" onfocus="blur()">
    <area shape="rect" coords="204,3,259,20" href="http://nate.com" target="_blank" onfocus="blur()">
    <area shape="rect" coords="269,2,323,20" href="http://www.google.co.kr/" target="_blank" onfocus="blur()">
    <area shape="rect" coords="331,4,385,18" href="http://kr.yahoo.com/" target="_blank" onFocus="blur()">
 

<area> 정의

 
<map>태그로 정의되는 이미지맵에서 개별 링크 영역을 지정. 
※ 이미지맵 : 링크 영역 가진 이미지

 


 
1. 
  • <area> 태그는 반드시 이미지맵을 정의하는 <map> 태그 안에서 사용해야 함.  (단독 사용 불가)
  • <img> 태그 안의 usemap 속성은 <map> 태그 안의 name 속성과 연계해, 이미지와 맵간의 관계를 형성. (예 참고)
  • (HTML4.01 / HTML5)에서는 종료태그 없이 사용하나, XHTML에서는 반드시 /로 닫아줘야 함 
  • XHTML DTD 선언시, <map> 태그에서 id 속성 대신 name 속성 이용시 유효성 오류 생길 수 있으니 주의.
  • HTML5에서 몇몇 속성이 추가/제거 됨.
 
2.
 
3. 이미지맵 링크 영역 설정기
 
 

<area> 구문

 
<area shape="클릭 영역 모양" coords="클릭 영역 위치" href="링크 주소" target="띄울 창" onFocus="blur()">

Cf.
XHTML 경우
<area shape="클릭 영역 모양" coords="클릭 영역 위치" href="링크 주소" target="띄울 창" onFocus="blur()" />
 
※ onFocus="blur()"  : 링크를 클릭 후, 클릭한 흔적 잔상이 안 남게 하는 속성.
 

<area> 속성

속성
속성값
 쓰임새  비고
 shape
 
 default(전체 영역)
 rect(직사각형 모양 영역)
 circle(원 모양 영역)
 poly(다각형 모양 영역)
 
 링크 걸 영역의 모양  
 coords
 x1,y1,x2,y2 (사각형)
 
 x,y,radius (원)
 
 x1,y1,x2,y2,..,xn,yn (다각형)
 
 링크 영역의 위치를 지정하는 좌표값
 
 x1,y1,x2,y2 : 
 왼쪽 상단, 오른쪽 하단 코너 좌표값 (사각형 모양)
 
 x,y,radius :
 원의 중심 좌표값과 반지름 (원 모양)
 
 x1,y1,x2,y2,..,xn,yn :
 각 다각형의 코너 좌표값 (다각형 모양)
 만약, 처음과 마지막 좌표값 짝이 동일하지 않을 시,
 브라우저가 자동으로 마지막 좌표값을 추가함. (다각형)
 
 
 
 href
 
 URL 주소
 
 링크 주소  
 target
 
 _blank (새창/새탭)
 _parent(부모창)
 _self(현재창)
 _top (가장 상단 프레임 창)
 framename(특정 프레임창)
 
 링크를 어떤 창에 띄울지 결정
 
 
 alt  글자
 
 각 링크 영역에 대한 대체 글자임
 href 태그 존재 시 필수
 
 
 download
 파일 이름
 
유저가  링크를 클릭했을 때
다운될 파일명을 입력. 
 
 HTML5 추가
 hreflang  언어 코드
 
 링크된 페이지가 어떤 언어로 된
 페이지인지 정의
 
 HTML5 추가
 media  미디어 쿼리 (media query)
 
 링크된 페이지가 어떤 매체나 장치에
 최적화된 페이지인지 정의
 
 HTML5 추가
 nohref  입력값
 
 링크된 URL이 존재하지 않을 때 사용
 
 HTML5 제외
 rel
 
 alternate
 author
 bookmark
 help
 license
 next
 nofollow
 noreferrer
 prefetch
 prev
 search
 tag
 
 
 링크된 페이지가 현재 웹문서와
 어떤 관계인지를 표시하는 속성
 
 alternate (대체 문서로 링크)
 author (작성자로 링크)
 bookmark (북마크로 사용될 링크)
 help (도움되는 문서로 링크)
 license (문서 저작권 페이지로 링크)
 next (다음 문서로 링크)
 nofollow (가서는 안되는 페이지 링크)
 noreferrer (HTTP referer header 정보 안 남기며 링크)
 prefetch (타켓 페이지가 캐쉬로 저장될 것을 표시)
 prev (이 문서의 이전 문서로 링크)
 search (문서 검색 페이지로 링크)
 tag (현 문서의 태그나 키워드 페이지로 링크)
 
 HTML5 추가
 type  MIME type
 
 링크 페이지의 MIME type를 지정
 
 ※ MIME type : 메세지의 종류.
                         쉽게 말해, 확장자 의미
 
 HTML5 추가
 
<area>태그는 전역속성・이벤트속성 지원. 

 


분류 제목
form HTML - <form> 태그 ★★★ - 입력폼양식 (= form태그 = 폼태그/폼요소) ※ 폼데이터 입력/…
form HTML - <input> 태그 ★★★ - 입력창 + 입력버튼 (= input태그 = 인풋태그) ※ 자동포커…
form HTML - <textarea> 태그 ★ - 여러줄 입력창 (= 텍스트입력영역 = 텍스트영역 = textar…
form HTML - <button> 태그 ★ - 클릭버튼 (= button태그 = 버튼태그) (HTML5수정)
form HTML - <select> 태그 ★ - 선택메뉴 (= select태그 = 실렉트태그 = 셀렉트태그) (H…
form HTML - <option> 태그 ★ - 선택사항 (= 옵션사항 = option태그 = 옵션태그)
form HTML - <optgroup> 태그 - 선택사항묶음 (= optgroup태그 = 옵트그룹태그, 옵션그룹태그…
form HTML - <label> 태그 ★ - input태그꼬리표 (= 인풋꼬리표 = 인풋명찰=인풋이름표 = lab…
frame HTML - <frame> 태그 - 프레임셋안 개별프레임창 (HTML5제외)
frame HTML - <frameset> 태그 - 프레임그룹 (= 프레임 레이아웃 = frameset태그 = fram…
frame HTML - <noframes> 태그 - frame대체내용 (= noframes태그 = 노프레임즈태그) (H…
frame HTML - <iframe> 태그 ★ - 타웹페이지삽입 (= iframe태그 = 아이프레임태그) ※ ifra… 1
image HTML - <img> 태그 ★ - 이미지태그 (= img태그) ※ 이미지 일부 자르기, ※ 링크 허버 시,…
image HTML - <map> 태그 - 이미지 특정 부분에 링크 (= map태그 = 이미지맵태그) ※ 이미지에 여러…
image HTML - <area> 태그 - 이미지맵에서 특정 링크 영역 (= area태그 = 에어리어태그) (HTML…
link HTML - <a> 태그 ★ - 링크걸기 (= 주소이동 = a태그 = a요소 = 에이태그 = 앵커태그 = 하…
link HTML - <link> 태그 ★ - 외부소스연결 (= link태그 = 링크태그) (HTML5수정) ※ 파비…
list HTML - <ul> 태그 ★ - 객체 ★ - 순서없는리스트 (= 순서없는목록태그 = ul태그 = 유엘태그/…
list HTML - <ol> 태그 ★ - 순서있는리스트 (= 목록태그 = ol태그 = 오엘태그 = 올태그) - (H…
list HTML - <li> 태그 ★ - 리스트목록 (= 리스트아이템 = li태그 = 리태그/리스트태그/엘아이태그…
3/18
목록
찾아주셔서 감사합니다. Since 2012