map태그 사용법과 주의사항을 알아보자 :: 마이구미

이번 글은 map 태그에 대해 알아볼 것이다.

요즘 지식인활동을 가끔하고 있어서 지식인을 통해 글을 쓸 주제거리가 생겨난다.

아는대로 최선을 다해 하나하나 알려주는 착한 지식인이다.

1:1 질문해주면 아는 한 알려주도록 노력하겠다.

지식인 질문에 올라온 내용은 이렇다.

a태그를 사용하여 특정 위치로 이동하게 한다. 

PC에서는 잘 되는데, 모바일에서는 a태그를 활용한 이동이 안된다는 질문이었다.

a태그는 모두가 잘 알고 있을 것이고, 많이 사용하는 태그이다.

새로운 페이지를 열거나 이동하고 싶을 때 또는 내부에서 특정 위치로 이동하고 싶거나 할 때 사용한다.

굳이 예를 들자면,

<a href='#here'>누르면 저기로 이동하자</a>

<div id='here'>여기로 이동</div>

a태그를 누르면 '여기로 이동' 텍스트가 있는 div영역으로 이동한다.

자, 이제 map 태그에 대해 알아보자.

이미지맵이라고도 불리는 녀석이고, area태그와 같이 쓰는 녀석이다.

거의 브라우저에서 지원하고 있으니 크로스 브라우저 측면에서는 신경쓸 일이 없을 것이다.

map 태그는 이미지의 특정부분에 링크를 걸어 사용할 수 있게 된다.

예제를 통해 알아보자.

직접 보자. 테스트 샘플 페이지

아래는 샘플 페이지 소스이자 지식인 질문의 소스이다.

<center>
    <a name="top"></a>
    <table border="0" cellpadding="0" cellspacing="0" align="center">
        <tbody><tr>
            <td><img src="/img/list.jpg" border="0" usemap="#Map"></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/1.jpg" name="t_01"></a></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/2.jpg" name="t_02"></a></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/3.jpg" name="t_03"></a></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/4.jpg" name="t_04"></a></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/5.jpg" name="t_05"></a></td>
        </tr>
        <tr>
            <td><a href="#top"><img src="/img/6.jpg" name="t_06"></a></td>
        </tr>
        </tbody></table>
</center>
<map name="Map" id="Map">
    <area shape="rect" coords="5,1145,429,1702" href="#t_05">
    <area shape="rect" coords="439,1149,863,1706" href="#t_06">
    <area shape="rect" coords="3,580,427,1137" href="#t_03">
    <area shape="rect" coords="438,583,862,1140" href="#t_04">
    <area shape="rect" coords="438,14,862,571" href="#t_02">
    <area shape="rect" coords="3,12,427,569" href="#t_01">
</map>

페이지를 직접 보면 map 태그에 대해 확실히 알 것이다.

간단하니 조금만 분석하면 충분하다. 더이상 설명은 생략하겠다.

이해했다고 가정하겠다.

샘플 페이지에서는 각 옵션에 있는 이미지를 클릭 시 밑에 있는 자세한 설명 부분으로 이동해야한다.

하지만 클릭을 해도 반응이 없는 사람도 있을 것이다.

위에 소스는 익스플로러에서 돌아갈 것이다.

그외 크롬이나 파이어폭스 등은 클릭을 해도 이동이 안될 것이다.

질문자는 브라우저 단위로 안되고 있는 걸 알지 못했다.

그저 그냥 PC와 모바일을 기준으로 안된다고 판단하고 있었다.

PC에서는 익스플로러로 접근했을 것이고, 모바일에서는 다른 브라우저를 통해 접근했을 것이다.

아무튼 왜 크롬에서는 안될까?

누군가는 눈치챘을 것이다.

중요한 부분을 캐치하지 못했다.

HTML a태그에 대한 문서를 보면 알 수 있다.

a태그의 name 속성은 HTML5부터 지원하지 않는다.

그것이 문제였다.

위의 소스에는 a태그에 name 속성을 이용했다.

name="t_01" .......  이 녀석들을 id="t_01"로 바꾸어 사용하면 문제는 해결된다.

HTML map 태그

http://www.w3schools.com/tags/tag_map.asp

HTML a 태그

http://www.w3schools.com/tags/tag_a.asp

샘플 페이지

http://hotehrud.cafe24.com/study/map.html