Front/HTML
HTML - 이미지 태그
by Hyeon_
2021. 12. 5.
이미지 태그
- <img> 태그
- 인라인 태그로 이미지 바로 옆에 다른 요소가 나란히 배치
- 여러 개의 <img> 태그를 사용하면 계속해서 오른쪽에 표시
- <img> 태그 속성
이미지 파일 경로
- HTML 파일과 같은 폴더에 있는 경우 이미지 파일명만 적으면 됨
- 하위 폴더에 있는 경우
<img src ="image/사진.jpg">
- HTML 폴더와 동격의 다른 폴더에 있는 경우
<img src="../images/사진.jpg">
이미지 + 테이블 연습문제
tableEx.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>모나리자</title>
<style>
td{ width:100px;}
</style>
</head>
<body>
<table border="1">
<caption></caption>
<thead align = "center">
<tr><td rowspan = "8"><img src = "image/모나리자.jpg">
<td><b>작품명</b></td><td colspan = "2">모나리자</td></tr>
<tr><td><b>화가</b></td><td colspan = "2">레오나르도 다 빈치</td></tr>
<tr><td><b>시대</b></td><td colspan = "2">15세기 경</td></tr>
<tr><td><b>기법</b></td><td colspan = "2">패널에 유채</td></tr>
<tr><td><b>크기</b></td><td colspan = "2">77 x 53</td></tr>
<tr><td rowspan = "2"><b>가<br>격</b></td><td><b>정가</b></td><td>700 억원</td></tr>
<tr><td><b>판매가</b></td><td>500 억원</td></tr>
<tr><td><b>소장기관</b></td><td colspan = "2">루브르박물관</td></tr>
</thead>
</table>
</body>
</html>
이미지 맵
- 하나의 이미지에 여러 개의 링크를 만들고 각 영역마다 다른 링크 연결
- <img> 태그의 usemap 속성
- 이미지 맵 지정
- 사용 방법
- <map> 태그를 이용해 맵을 만들고
- <img> 태그의 usemap 속성으로 이미지 맵 지정
imageMap.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 맵</title>
</head>
<body>
<div id="wrap">
<img src="image/메인.png" border="1" usemap="#cityMap">
<map name="cityMap">
<area shape="rect" coords = "60, 90, 250, 150" href="뉴욕.html">
<area shape="rect" coords = "310, 90, 500, 150" href="파리.html">
<area shape="rect" coords = "560, 90, 750, 150" href="로마.html">
<area shape="rect" coords = "810, 90, 1000, 150" href="베이징.html">
</map>
</div>
</body>
</html>
