[HTML] Image(이미지)

이미지 관련 태그

<img src = ""  alt="">

• src = 삽입할 이미지 경로 또는 주소(상대경로 또는 절대경로를 통일해야 함)
• alt = src 출력이 실패할 때 표시할 텍스트

절대 크기

• 화면 크기와 상관없이 적용된 크기 그대로 출력
• 일정한 이미지 크기

<div>
<!
-- 쉬프트+옵션+↓ 라인복사 --> 
<!
-- 옵션+커맨드+위아래방향키 여러줄동시입력 -->
     <img src="http://how-mrk.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>

상대 크기

• 화면 크기에 따라 이미지가 변경됩니다.
  
  
• 너비를 %로 지정

<div>
<!
-- 부모요소의 너비를 100% 기준으로 처리, 줄바꿈 크기변경함 -->
	<img src="http://how-mrk.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>

이미지에 링크 삽입

• 이미지를 삽입하여 사용 이미지에 대한 링크를 삽입하려면
• 사진을 클릭하시면 링크로 이동합니다!
  

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

<!
-- 
    > 하나의 이미지를 나눠서 2개의 링크삽입 <
    shape(지정한이미지의 모양) : rect - 사각형
    coords - 꼭지점 2개 왼쪽/ 오른쪽아래
    href - 이동할 주소
    title - 지정한곳에 마우스커서에 나오는 타이틀
    target - _blank 이동말고 새창띄우기
    usemap - img 와 map태그를 연결해주는 역활 꼭 #붙힐것 
-->
<img src="http://how-mrk.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>