[HTML] HTML의 이미지 태그와 맵 태그

<img> 태그와 <map> 태그 알아보기

• <img> 태그란?
• <map> 태그란?
• 예시

---

<img> 태그란?

이미지를 화면에 띄우고 싶은 경우 <img> 태그를 이용하여 이미지를 올릴 수 있습니다.

1. src속성

<img> 태그에는 다양한 속성이 있는데 src 속성을 통하여 이미지를 불러옵니다. <img src="url()"/> 예시는 이와 같습니다. src의 값으로 url주소를 주면 주소를 찾아 소괄호 안의 주소 값이 가지는 이미지를 불러와서 띄워줍니다. 

2. alt속성

alt속성은 이미지를 불러올 수 없을 때 대체 텍스트로 사용되며 화면 낭독 기를 사용하는 경우 이미지를 읽을 때 낭독해줄 내용이 됩니다.

3. usemap속성

usemap속성은 map태그에서 저장한 정보를 불러와 이미지에 적용해주기 위하여 사용합니다. map태그에는 어떠한 정보가 들어가는지는 다음 "<map> 태그란?"에서 설명하겠습니다.

---

<map> 태그란?

이미지에 기능을 넣고 싶을 때 사용하는 태그입니다. <map> 태그 안에 name이라는 속성으로 <map> 태그의 이름을 설정하고 <img> 태그에서 <img usemap="map태그의 이름"> 이와 같이 usemap속성을 이용하여 불러올 수 있습니다. 기능은 이미지의 구역별로 나누어서 설정을 하게 되는데 이러한 구역을 나누는 방법은 <area> 태그를 이용하여 나눌 수 있습니다.

<area> 태그란?

<map> 태그 안에서 사용되는 태그로 이미지의 영역을 나누기 위하여 사용되며 태그 안에 속성을 통하여 영역의 모양, 위치, 연결될 주소 등을 설정할 수 있습니다.

shape 속성을 통하여 영역의 모양을 정할 수 있으며 shape의 값으로는 default, rect, circle, poly가 올 수 있으며 default는 이미지 전체, rect는 사각형, circle은 원, poly는 다각형으로 설정합니다.

coords 속성은 shape의 크기를 정한다고 보시면 됩니다. coords의 값으로 시작 x좌표, 시작 y좌표, 끝 x좌표, 끝 y좌표를 주어 영역의 시작과 끝을 정하게 됩니다.

href 속성은 지정한 영역을 눌렀을 때 어디로 이동할 것인지 이동한 주소를 설정하는 속성입니다.

---

예시

(10,10)에서 (30,30)까지의 크기에 rect모양의 영역을 정하고 그 영역을 누르면 "연결할 주소 1"로 연결되고 (50,50)에서 (70,60)까지의 크기에 circle모양의 영역을 정하고 그 영역을 누르면 "연결할 주소 2"로 연결되도록 하였습니다.

<map name="practice">
  <area shape="rect" coords="10,10,30,30" href="연결할 주소1">
  <area shape="circle" coords="50,50,70,60" href="연결할 주소2">
</map>
<img src="url(이미지의 주소)" usemap="practice"/>