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

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

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012