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

[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>태그는 전역속성・이벤트속성 지원. 

 


분류 제목
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
frame HTML - <frame> 태그 - 프레임셋안 개별프레임창 (HTML5제외)
media HTML - <source> 태그 - 미디어소스 불러오기 (= source태그 = 소스태그)
table HTML - <tfoot> 태그 - 테이블꼬릿말그룹 (= 테이블풋 = tfoot 태그 = 티풋태그) (HTM…
responsive HTML - Responsive Web Design (반응형 웹디자인) 장단점 + 홈페이지 제작법
style HTML - <footer> 태그 ★ - 단락꼬릿말 (= footer태그 = footer요소 = 푸터태그 =…
formatting HTML - <blockquote> 태그 ★ - 긴 인용구 (= blockquote태그 = blockquot…
link HTML - <nav> 태그 ★ - 네비게이션링크모음 (= nav태그 = 네브태그)
table HTML - <tbody> 태그 - 테이블셀그룹 (= 테이블바디 = tbody태그 = 티바디태그) (HTML…
formatting HTML - <ins> 태그 - 텍스트삽입표시 (= ins태그 = 인스태그 = 삽입태그)
formatting HTML - <cite> 태그 - 인용구 제목 (= cite태그 = cite요소 = 저작물제목 = 인용태그 …
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
form HTML - <fieldset> 태그 ★ - 폼양식 관련요소묶음 (= fieldset태그 = 필드셋태그) (…
font HTML - <big> 태그 - 큰글씨 (= big태그 = big요소 = 큰글자 = 글자 크게 = 빅태그)…
formatting HTML - <var> 태그 - 변수정의 (= 변수태그 = var태그 = 바태그)
attribute HTML - Global Attribute - 전역속성 종류
form HTML - <output> 태그 - 계산 결과값 출력 (= output태그 = 아웃풋태그)
programming HTML - <object> 태그 - 미디어삽입 (= object태그 = 어브젝트태그)
api HTML5 - Server-Sent Event - 서버전송이벤트 (= 서버센트이벤트)
intro HTML - 태그 문법 ★
14/18
목록
찾아주셔서 감사합니다. Since 2012