HTML에서 <map> 태그는 이미지 맵(image map)을 만드는 데 사용됩니다. 이미지 맵은 이미지 내부의 여러 영역을 클릭 가능한 링크로 만드는 데 사용됩니다. 이를 통해 웹 페이지에서 복잡한 이미지나 그림의 일부분을 클릭하면 특정한 링크로 이동할 수 있습니다.
다음은 <map> 태그를 사용한 이미지 맵의 예제입니다. 아래 예제는 간단한 지도 이미지에 대해 이미지 맵을 생성합니다. 이미지 내의 두 개의 지역을 클릭하면 두 개의 다른 웹 페이지로 이동합니다.
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h2>Image Map Example</h2>
<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="https://www.w3schools.com">
<area shape="rect" coords="290,172,333,250" href="https://www.google.com">
</map>
</body>
</html>위 예제에서, <img> 태그는 이미지를 표시합니다. <map> 태그는 이미지 맵을 정의하고, name 속성을 통해 맵의 이름을 지정합니다. <area> 태그는 이미지 내의 영역을 정의하고, shape 속성을 통해 영역의 모양을 지정하고, coords 속성을 통해 영역의 좌표를 지정하고, href 속성을 통해 영역을 클릭했을 때 이동할 링크를 지정합니다.
위 예제를 실행하면, 지도 이미지를 보여주고, 이미지 내의 첫 번째 영역을 클릭하면 https://www.w3schools.com 로 이동하고, 두 번째 영역을 클릭하면 https://www.google.com 로 이동합니다.
반응형
'IT' 카테고리의 다른 글
| Synology GIT 사용법 (0) | 2023.06.08 |
|---|---|
| html에서 화면 스크롤 하는 예제 (0) | 2023.03.06 |
| 리눅스 find 명령어 사용법 (0) | 2023.03.06 |
| VI 에디터 명령어 (0) | 2023.03.06 |
| 웹페이지내 특정 Element를 이미지로 저장하기 (0) | 2023.02.13 |