💡 퀵 접속: htm.kr/area
<area> 태그는 이미지 맵 내에서 클릭 가능한 영역을 정의하는 HTML 요소입니다.
<map> 태그 내에서 사용되며, 이미지의 특정 부분을 클릭 가능한 링크로 만듭니다.
<img src="world-map.jpg" alt="세계 지도" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="korea.html" alt="한국">
<area shape="circle" coords="200,200,50" href="japan.html" alt="일본">
<area shape="poly" coords="300,300,350,350,400,300" href="china.html" alt="중국">
</map>| 속성 | 설명 | 예시 |
|---|---|---|
| shape | 영역의 모양 (rect, circle, poly, default) | shape="rect" |
| coords | 영역의 좌표 | coords="0,0,100,100" |
| href | 링크 URL | href="page.html" |
| alt | 대체 텍스트 | alt="한국" |
| target | 링크 열기 방식 | target="_blank" |
<img src="menu.jpg" alt="메뉴 맵" usemap="#menumap">
<map name="menumap">
<area shape="rect" coords="0,0,100,50" href="home.html" alt="홈">
<area shape="rect" coords="110,0,210,50" href="about.html" alt="소개">
<area shape="rect" coords="220,0,320,50" href="contact.html" alt="연락처">
</map><img src="solar-system.jpg" alt="태양계" usemap="#solarsystem">
<map name="solarsystem">
<area shape="circle" coords="100,100,30" href="sun.html" alt="태양">
<area shape="circle" coords="200,100,20" href="mercury.html" alt="수성">
<area shape="circle" coords="300,100,25" href="venus.html" alt="금성">
</map><img src="floor-plan.jpg" alt="건물 평면도" usemap="#floorplan">
<map name="floorplan">
<area shape="poly" coords="0,0,100,0,100,100,0,100" href="room1.html" alt="1호실">
<area shape="poly" coords="110,0,210,0,210,100,110,100" href="room2.html" alt="2호실">
<area shape="poly" coords="220,0,320,0,320,100,220,100" href="room3.html" alt="3호실">
</map>/* 이미지 맵 컨테이너 */
.image-map-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
/* 이미지 스타일링 */
.image-map-container img {
width: 100%;
height: auto;
border: 1px solid #ddd;
border-radius: 4px;
}
/* 호버 효과 */
.image-map-container area:hover {
cursor: pointer;
}
/* 영역 하이라이트 */
.image-map-container area:focus {
outline: 2px solid #007bff;
}