<img>

속성 src

• src 속성에 경로를 설정하여 이미지 파일을 불러온다.
• 파일의 확장자는 대소문자 구분 안 함

---

경로 찾기

1. 절대 경로

<img src="C:\Users\sylee\OneDrive\바탕 화면\d_FrontEnd\LearnHTML5\resources\image\flower1.PNG" alt="">

---

2. 상대 경로

현재 경로

• ./

---

상위 경로

• ../

---

<img src="C:\Users\sylee\OneDrive\바탕 화면\d_FrontEnd\LearnHTML5\resources\image\flower1.PNG" alt="">

-> 이동!

---

속성 alt

• 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없을 경우 대체 텍스트의 용도로 사용

---

속성 width 과 height

• width 속성과 height 속성을 사용해서 이미지의 높이와 너비를 지정할 수 있다.
• 고정 크기 단위(px 등)와 가변 크기 단위(%)로 크기를 지정할 수 있다.

1. 고정 크기 단위

<img src="../resources/image/flower1.PNG" width="200" height="150">
<img src="../resources/image/flower2.PNG" width="200px" height="150px">
<img src="../resources/image/flower3.PNG" width="200px" height="150">
<img src="../resources/image/flower4.PNG" width="200" height="150px">

---

2. 가변 크기 단위(%)

• 화면 크기(body)의 ??%
• ✨✨화면 크기(body)에 따라 이미지 크기가 달라짐

	<img src="../resources/image/flower1.PNG" width="15%">

---

<map>

• 이미지 구역을 2개로 나누어 각각 링크 설정

작성법

<map name="이름">
	<area shape="모양" coords="위치" href="나오게할링크?" target="_blank/_self" alt="">
</map>

---

사용법

<img src="소스" ... usemap="#이름">

---

속성 target

target="_self"

• 현재 페이지에서 이동
• 기본값

---

target="_blank"

• 새 페이지를 열어서 이동

---

예)

	<img src="../resources/image/river1.PNG" width="600px" height="400px" usemap="#map">

	<!-- 좌측상단(0,0)과 우측하단(600,400) -->
	<map name="map">
		<!-- 세로로 반으로 나눔 -->
		<area shape="rect" coords="0, 0, 300, 400" href="https://www.naver.com" target="_self">
		<area shape="rect" coords="300, 0, 600, 400" href="https://www.google.com" target="_blank">

		<!-- 가운데에 원 -->
		<area shape="circle" coords="300, 200, 100" href="http://www.daum.net" target="_blank">
	</map>