<map>
<map> 태그는 이미지 맵을 정의합니다.
<map>
<map> 태그는 이미지 맵을 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | 블록 요소(Block Element) |
| 닫는 태그 | 닫는 태그 사용(<map> ~ </map>) |
| 버전 | HTML4 |
| 시각적 표현 | 클릭 영역이 설정됩니다. |
| 사용성 |
정의(Definition)
- <map> 태그는 이미지 요소에 클릭할 수 있는 영역을 설정합니다.
- <map> 태그는 <area>와 <img> 태그를 같이 사용합니다.
- <map> 태그의 name 속성과 이미지의 usemap 속성이 일치해야 적용됩니다.
- 이미지 위에 영역을 설정하고 링크를 설정하는 방법은 많이 사용하지 않습니다. 직접 링크를 걸고 사용하는 것을 추천합니다.
- 이미지 맵은 위치가 고정적이기 때문에 반응형 사이트에서 적용 할 수 없습니다.
속성(Property)
| 속성 | 값(예) | 설명 | 버전 |
|---|---|---|---|
| name | name = "이름" | 이미지 맵의 이름을 설정하는 필수 조항입니다. | - |
예제1(Sample)
이미지 위에 영역을 설정합니다.
롯데타워를 클릭하면 롯데타워 홈페이지로 이동합니다.
HTML
CSS
SCRIPT
<map name="imagesMap" >
<area shape="rect" coords="140,60,210,130" href="https://www.lwt.co.kr/" target="_blank" alt="롯데 타워 홈페이지로 이동" >
</map>
<img usemap="#imagesMap" src="https://tistory1.daumcdn.net/tistory/2933724/skin/images/hover08.jpg" alt="롯데 타워 배경 이미지" >
.sampleView {
text-align: center;
}
.sampleView img {
width: 300px;
}
//Javascript none
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <area> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| name | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
