map

Yoon·2023년 12월 20일

사진에 동그라미에 마우스를 올리면 상품 정보를 띄워주는 것 많이 봤을 것이다.
개발자도구에서 확인 해보면 div로 쪼개고 css로 위치를 지정해줘서 코드를 길게 빼서 만드는데,
html에는 간단하게 만드는 태그가 있다.
map이라는 태그다.

👉 입력

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <img src="./img/ikea.PNG" usemap="#image-map" />

    <map name="image-map">
      <area
        target="_blank"
        alt=""
        title=""
        href="https://www.ikea.com/kr/ko/p/hemnes-bookcase-white-stain-light-brown-80413501/"
        coords="416,313,25"
        shape="circle"
      />
      <area
        target="_blank"
        alt=""
        title=""
        href="https://www.ikea.com/kr/ko/p/listerby-coffee-table-oak-veneer-90515311/"
        coords="270,547,25"
        shape="circle"
      />
      <area
        target="_blank"
        alt=""
        title=""
        href="https://www.ikea.com/kr/ko/p/viskafors-3-seat-sofa-lejde-grey-green-brown-s79443368/"
        coords="218,392,25"
        shape="circle"
      />
      <area
        target="_blank"
        alt=""
        title=""
        href="https://www.ikea.com/kr/ko/p/stoense-rug-low-pile-off-white-00426809/"
        coords="113,564,25"
        shape="circle"
      />
    </map>
  </body>
</html>