반응형
<img> 태그
- 웹 페이지에 이미지를 삽입할 때 사용한다.
- <img> 태그는 닫는 태그가 없다.
- <img> 태그에는 두가지 필수 속성이 있다
1) src : 이미지 경로(url)를 지정
2) alt : 이미지의 대체 텍스트를 지정
예시 : <img src = "url" alt = "alternatetext">
Image Map - <map> 태그
- <map> 태그는 이미지 맵을 정의한다.
- 이미지 맵은 클릭 가능한 영역이 있는 이미지다.
- 영역은 하나 이상의 <area> 태그로 정의한다.
Image Map 실습 1) imageMap.html
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>컴퓨터 클릭, 폰클릭, 커피잔 클릭시 각각 새로운 페이지로 연결</p>
<!-- usemap 속성을 사용해야 map 을 사용 가능 -->
<img src="/image/workplace.jpg" usemap="#workmap">
<map name = "workmap">
<area shape ="rect" coords = "34,44,270,350" alt ="Computer" href = "computer.html">
<area shape ="rect" coords = "290,172,333,250" alt ="Phone" href = "phone.html">
<area shape ="circle" coords = "337,300,44" alt ="Cup of coffee" href = "coffee.html">
</map>
</body>
</html>Image Map 실습 2) computer.html
- 기존의 imageMap.html 파일에서 Computer로 정의된 area 부분을 클릭하면 이동되는 html 문서
<!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>
<p>컴퓨터</p>
</body>
</html>Image Map 실습 3) phone.html
- 기존의 imageMap.html 파일에서 Phone로 정의된 area 부분을 클릭하면 이동되는 html 문서
<!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>
<p>폰</p>
</body>
</html>Image Map 실습 4) coffee.html
- 기존의 imageMap.html 파일에서 coffee로 정의된 area 부분을 클릭하면 이동되는 html 문서
<!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>
<p>커피</p>
</body>
</html>반응형
'FrontEnd > HTML & CSS' 카테고리의 다른 글
| [HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습 (0) | 2024.01.04 |
|---|---|
| [HTML] Form 태그 (1) - 이론 및 간단한 예제 실습 (0) | 2024.01.04 |
| [HTML] Tables <table> 태그, Ifames 태그 이론 및 실습 (0) | 2024.01.04 |
| [HTML] Links <a> 링크 태그 이론 설명 및 실습 예제 (0) | 2024.01.04 |
| [HTML] HTML 시작 - 기본 이론 및 간단한 예제 실습 (0) | 2024.01.03 |