7.2 map, area 요소(Element)
map 요소는 이미지 맵을 정의할 때 사용하는 요소로 보통 area,
img 요소와 함께 사용하여 이미지에서 클릭 가눙한 영역을 만들 때 사용됩니다.
그리고 자체 속성으로 name 속성(Attribute)를
이용하여 img 요소의 usemap 속성과 연결되어 이미지와
맵(map) 사이의 관계를 설정하며 다음과 같은 형식으로 사용합니다.
<map name=”map의 이름” />
다음으로 area 요소는 하나의 이미지-맵 안에 클릭 가능한 하나의 영역을 정의하는데 사용하는 요소입니다. area 요소는 항상 map 요소 태그 안에 위치해야 하며 다음과 같은 속성들을 함께 사용할 수 있습니다.
|
속성 |
기능 |
|
alt |
브라우저에서 해당 영역을 표시하지 못할 때 대체할 텍스트로 사용할 수 있음 |
|
coords |
사각형(rect)는 rect=”left, top, right, bottom”의 형태로 좌표입력 |
|
shape |
클릭 가능한
영역의 형태, 즉 사각형(rect), circle(원), poly(다각형)을 설정하는데 |
|
href |
페이지 URL을 명시하거나 javacript 코드 설정 |
|
target |
href 속성에 명시한 URL을 새 창으로 띄울 것인지 아니면 기존의 창에 띄울 것인지에 대하여 설정 |
|
rel |
href 속성이 설정되어 있을 때 현재의 페이지와 목적지 페이지와의 관계를 설정 |
|
media |
href 속성이 설정되어 있을 때 스마트폰과 같은 장치에 최적화된 내용 설정 |
|
hreflang |
href 속성이 설정되어 있을 때 해당 URL의 언어(lang)을 설정 |
|
type |
href 속성이 설정되어 있을 때 MIME 타입 설정 |
위 속성 중 type 속성을 나타낼 때 MIME 타입을 설정한다고 했는데 MIME(Multipurpose Internet Mail Extension)이란 그대로 해석하면 “다목적 인터넷 메일 확장”인데 말하자면 인터넷 환경에서 메일을 주고
받는 과정에서 문서를 해석하지 못하는 문제 발생을 최소화하기 위해서 일종의 규약(protocol) 형태로
문서 타입을 정의해서 사용하는 것입니다.
현재 전세계 인터넷 IP 주소, 최상위 도메인
등을 관리하는 기관인 iana(Internet Assigned Numbers Authority)에 따르면 application, audio, example, image, message, model, multipart,
text, video 타입이 존재하는데 여기서는 이미지, 오디오, 비디오 관련 MIME 타입에 대해서만 정리를 해봅니다.
이미지(image) 관련 MIME 타입
이미지 관련 주요 파일 확장자와 MIME 타입 형태로
나타내면 다음과 같습니다.
|
파일 확장자 |
MIME 타입 |
|
gif |
image/gif |
|
jpg, jpeg |
image/jpeg |
|
png |
image/png |
|
bmp |
image/bmp |
|
ico |
image/x-icon |
|
svg |
image/svg+xml |
오디오(audio) 관련 MIME 타입
오디오 관련
주요 파일 확장자와 MIME 타입 형태로 나타내면 다음과 같습니다.
|
파일 확장자 |
MIME 타입 |
|
mid, rmi |
audio/mid |
|
mp3 |
audio/mpeg |
|
wav |
audio/wav, audio/x-wav |
|
ra, ram |
audio/x-pn-realaudio |
비디오(video) 관련 MIME 타입
비디오 관련 주요 파일 확장자와 MIME 타입 형태로
나타내면 다음과 같습니다.
|
파일 확장자 |
MIME 타입 |
|
ogg |
video/ogg |
|
mp4 |
video/mp4 |
|
mpg, mpeg, mp2 |
video/mpeg |
|
3gpp |
video/3gpp |
|
mov |
video/quicktime |
|
avi |
video/avi |
|
wmv |
video/x-ms-wmv |
|
flv |
video/x-flv |
이상으로 이미지, 오디오, 비디오 관련하여 파일 확장자별 MIME 타입에 대해서 알아보았습니다.
마지막으로 HTML 문서는 "text/html" XML 문서는 "application/xhtml+xml" 이나 "application/xml" 형태를 사용합니다.
MIME 타입에 보다 자세한 정보는 애플, 파이어폭스를 만드는
모질라 재단, 그리고 오페라(Opera) 브라우저를 만드는
오페라가 중심이 된 WHATWG(Web Hypertext Application Technology Working
Group)의 “http://wiki.whatwg.org/”이나 앞서 언급한 iana(Internet Assigned Numbers Authority) 사이트를 참고하시기 바라며 이상으로 MIME 타입에 대해서 알아보았습니다.
다시 area 요소로 돌아와서 area 요소는 다음과 같은 형식으로 사용하게 됩니다.
<area
shape=”영역형태” cords=”영역형태에 따른 좌표“
href=”이동할 URL”
target=”href에 설정된 URL 여는 방법 설정
/>
이제 예제를
하기에 앞서 먼저 사용할 이미지인 flower2.jpg 파일의 (x,
y) 좌표를 파악해볼까요?
예제에서 너비(width)는 300 pixel, 높이(height)는 200 pixel 크기로 flower2.jpg 이미지를 사용하며 이에 대한 기본적인 좌표를 나타내면 다음과 같이 나타낼 수 있습니다. c
이제 이를 바탕으로 HTML5의 기본적인 태그와 함께 body 태그 영역을 다음과 같이 작성합니다.
<body>
<img src ="flower2.jpg"
width="300"
height="200" alt="꽃밭" usemap
="#flowermap" />
<map name="flowermap">
<area shape ="rect"
coords ="50,150,100,50"
href ="javascript:alert('꽃이
많아요');" alt="꽃밭" />
<area shape ="circle"
coords ="150,100,10"
href
="http://en.wikipedia.org/wiki/Flower" target="_blank"
alt="위키피디아에서 본 꽃의 정의" />
</map>
</body>
위 코드에서 img 요소의 usemap 속성값과
map 요소의 name 속성값이 같아 이를 통해 이미지와 맵(map) 사이의 관계를 설정되게 됩니다.
그리고 map 요소 안에는 2개의 area 요소 태그가 존재하는데 첫 번째 area 요소는 형태(shape)가 사각형(rect)인 영역을 나타내며 이 영역을 클릭하면 href 속성에 설정된대로 메시지창을 띄우게 되며 다음과 같이 나타나게 됩니다.
마지막으로 두
번째 area 요소는 형태가 원(circle)로 원의 중심좌표가 (150, 100)이고 반경(radius)가 10인 원을 나타내며 이 영역을 마우스로 클릭하면 href 속성에
설정된 URL을 새 창(window)을 띄워서 위키피디아(Wikipedia)에 정의된 flower에 대해서 나타냅니다.
사용된 사진 첨부
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.4 PDF 파일을 embed 요소(Element)를 이용하여 임베딩 (0) | 2013.07.31 |
|---|---|
| 7.3 object, param 요소(Element) (3) | 2013.07.31 |
| 7. Embedded Content Elements (0) | 2013.07.31 |
| 6.2 del 요소(Element) (0) | 2013.07.31 |
| 6. Edit Elements (0) | 2013.07.31 |