태그 - 이미지와 맵태그

 

사용자가 원하는 이미지를 HTML 문서에 삽입하고자 할 때는 <img>태그를 사용한다. 이미지 태그를 사용하면 문서내에서 해당 위치에 있는 이미지로 대체된다.

이 때 사용할 수 있는 이미지 파일은 .jpg 과 .gif 파일 형식이 사용될 수 있다. jpg파일은 압축률이 뛰어나며 다른 파일 형식이 비해 용량이 작으면서도 화질이 우수해서 이미지 크기가 큰 경우 유용하다. gif파일을 jpg보다 압축률이 뛰어나지만 화질이 다소 떨어져 일반적으로 아이콘 또는 단순한 이미지로 사용된다. 참고로 bmp파일은 파일 용량이 jpg나 gif보다는 큰 편이다.

 

<img src="url" alt="some text" />

 

 

<img>태그가 가질 수 있는 속성

• src: 이미지 파일이 있는 경로(절대경로, 상대경로 모두 가능)
• align: 이미지의 정렬 방법(left, right, center 등)
• width: 이미지의 폭
• height: 이미지의 높이
• hspace: 이미지의 좌우 여백
• vspace: 이미지의 위아래 여백
• border: 테두리 속성
• alt: 이미지 설명

 

 

이미지 태그의 Alt 속성

 

Alt 속성은 이미지가 표시되지 않을 때 이미지의 설명을 나타내는 텍스트 값을 지정할 때 사용한다.

 

 

 

이미지 태그와 함께 같이 사용하면 유용한 태그가 <map>태그이다. 맵 태그는 이미지에 영역을 지정하여 지정한 부분에 각각 링크를 걸 때 사용하는 태그이다.

 

<img src="test.jpg" usemap="#mapName" />

<map name="mapName">
<area shape="이미지의 영역 모양( ex) share, rect, circle, poly)" cords="링크 영역( ex)70,70,100,100)" herf="링크할 문서" />
</map>

 

사각형 좌표값을 입력할 때는 네 개의 좌표값을 입력하는 앞의 두자리는 좌측 최상점의 좌표값을 뒤의 두자리는 우측 최하점 좌표값을 의미한다. 이 네개의 값은 화면을 기준으로 하는 값이 아니라 이미지 안에서의 좌표값을 의미한다.