[HTML] Image(이미지)

image 관련 태그

<img src = ""  alt="">

• src = 넣고자하는 이미지 경로나 주소(상대경로 or 절대경로 하나로 통일해야함)
• alt = src의 출력이 실패하면 나오는 문구

---

절대크기

• 화면사이즈가 어떻든 적용한 크기 그대로 출력
• 변함없는 이미지사이즈

<div>
<!-- 쉬프트+옵션+↓ 라인복사 --> 
<!-- 옵션+커맨드+위아래방향키 여러줄동시입력 -->
     <img src="../sample/image/flower1.PNG" alt="꽃이미지1" width="200px">
     <img src="../sample/image/flower2.PNG" alt="꽃이미지2" width="200px">
     <img src="../sample/image/flower3.PNG" alt="꽃이미지3" width="200px">
     <img src="../sample/image/flower4.PNG" alt="꽃이미지4" width="200px">
     <img src="../sample/image/flower5.PNG" alt="꽃이미지5" width="200px">
</div>

---

상대크기

• 화면의 크기에 따라 사진이 변화함
• %로 width지정

<div>
<!-- 부모요소의 너비를 100% 기준으로 처리, 줄바꿈 크기변경함 -->
	<img src="../sample/image/flower1.PNG" alt="꽃이미지1" width="15%">
   	<img src="../sample/image/flower2.PNG" alt="꽃이미지2" width="15%">
   	<img src="../sample/image/flower3.PNG" alt="꽃이미지3" width="15%">
   	<img src="../sample/image/flower4.PNG" alt="꽃이미지4" width="15%">
   	<img src="../sample/image/flower5.PNG" alt="꽃이미지5" width="15%">
</div>

---

이미지에 링크 삽입

• 이미지를 삽입하고 <a> 를 이용해 이미지에 링크를 삽입
• 이미지를 클릭!하면 링크로 이동

<!-- 이미지에 링크삽입 -->
<h2>image link</h2>
<a href="http://w3schools.com">
	<img src="../sample/image/img1.jpg" alt="" width="300px">
</a>

---

하나의 이미지에 2개의 링크 삽입

• shape이 rect(사각형)일때 네부분의 꼭지점으로 좌표설정
• 적용할 이미지의 너비 높이로 적용해야함

<!-- 
    > 하나의 이미지를 나눠서 2개의 링크삽입 <
    shape(지정한이미지의 모양) : rect - 사각형
    coords - 꼭지점 2개 왼쪽/ 오른쪽아래
    href - 이동할 주소
    title - 지정한곳에 마우스커서에 나오는 타이틀
    target - _blank 이동말고 새창띄우기
    usemap - img 와 map태그를 연결해주는 역활 꼭 #붙힐것 
-->
<img src="../sample/image/river1.PNG" alt="두물머리 이미지" width="500px" usemap="#potal-map">
<map name="potal-map">
	<area shape="rect" coords="0,0,250,333" href="http://naver.com" alt="네이버로이동" title="네이버로이동" target="_blank">
	<area shape="rect" coords="250,0,500,333" href="http://google.com" alt="구글로이동" title="구글로이동">
</map>