#09 HTML 이미지 요소

 

<img> 태그

• 문서에 이미지를 삽입하는 요소
• 종료 태그가 없는 빈 요소

 

- src 속성 : 이미지 소스를 지정하는 속성으로 소스파일의 위치를 URL형식으로 입력한다. (절대경로 or 상대경로)

- alt 속성 : 이미지의 대체 텍스트를 지정한다.
(사용자가 이미지를 볼 수 없는 경우 대체 텍스트로 표시되므로 입력 권장)

- width 속성 : 이미지의 가로 사이즈 지정

- height 속성 : 이미지의 세로 사이즈 지정

- usemap 속성 : <img> 요소와 연결할 이미지맵을 지정한다. (#맵이름)

<img src="image/google.png" alt="구글로고" width="100" height="30">

---

(좌) 이미지가 제대로 표시된 경우 / (우) 이미지를 불러올 수 없어 대체 텍스트로 표시된 경우

 

---

<map> 태그

• 이미지맵 요소로 이미지 위의 도면 역할을 한다.
• <img> 요소와 <area> 요소를 연결시키는 요소

 

- name 속성 : <map> 요소의 이름을 지정하는 속성으로 <img> 요소가 <map> 요소를 참조할 수 있도록 연결점 역할을 한다.

 

<area> 태그

• 이미지맵 내부에 클릭 영역을 지정하고 링크를 연결한다.
• <map> 요소 내에서만 사용 가능하다.

- shape 속성 : 링크영역의 형태를 지정하는 속성 (defalt : 전체영역)

• rect : 사각형
• circle : 원형
• poly : 다각형

- coords 속성 : 영역의 좌표를 지정하는 속성

• rect 사용 : 좌측상단 꼭지점과 우측하단 꼭지점의 좌표 "x,y,x1,y1"
• circle 사용 : 원의 중심 좌표와 반지름 값 "x,y,r"
• poly 사용 : 꼭지점의 좌표 "x,y,x1,y1,x2,y2…"

<img src="image/website.jpg" alt="웹사이트모음" usemap="#website" width="600" height="60">
<map name="website">
    <area shape="rect" coords="0,0,200,60" href="http://www.daum.net" alt="다음">
    <area shape="rect" coords="200,0,400,60" href="http://www.nate.com" alt="네이트">
    <area shape="rect" coords="400,0,600,60" href="http://www.naver.com" alt="네이버">
</map>

---

로고 버튼을 클릭하면 각 사이트로 이동한다 (버튼 사이즈 200px * 60px)