반응형
⚫map 태그 : 하나의 이미지에서 영역을 구분해 하이퍼링크 기능을 제공하기 위한 태그
=> 하위태그 : area 태그
🔘area 태그 : 이미지맵에서 링크가 연결될 영역을 정의할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>map 태그</h1>
<hr>
<!-- usemap 속성 : map 태그의 이름을 속성값으로 설정 -->
<!-- => 이미지와 이미지맵 간의 관계를 만드는데 사용 -->
<img alt="이미지 링크" src="/web/html/images/map.png" usemap="#favorites">
<!-- name 속성 : 태그를 구분하기 위한 이름을 속성값으로 설정 -->
<map name="favorites">
<!-- shape 속성 : 영역을 구분하기 위한 도형을 속성값으로 설정 - 속성값 : rect(기본), circle, poly 등 -->
<!-- coords 속성 : 영역을 구분하기 위한 도형의 좌표값을 속성값으로 설정 -->
<area alt="트위터" shape="rect" coords="0,0,129,117" href="https://twitter.com" target="_blank">
<area alt="페이스북" shape="rect" coords="129,0,249,117" href="https://facebook.com" target="_blank">
</map>
</body>
</html>
실행결과⬇️
위의 이미지는 하나의 이미지지만, map 태그를 통해 각기 다른 링크로 연결되게끔 설정함.
트위터 부분을 클릭하면 https://twitter.com/?lang=ko 이 링크로,
페이스북 부분을 클릭하면 https://www.facebook.com/?locale=ko_KR 이 링크로 이동.
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML]11&12_audio/video 태그 (1) | 2023.12.26 |
|---|---|
| [HTML]10_iframe 태그 (0) | 2023.12.25 |
| [HTML]08_anchor 태그 (0) | 2023.12.25 |
| [HTML]07_a 태그 (0) | 2023.12.25 |
| [HTML]06_tbody 태그 & style 태그 & caption 태그 (0) | 2023.12.25 |
