HTML <img> 태그

정의 및 특징

・<img> 태그는

　HTML 문서에서 이미지(image)를 정의할 때 사용한다

 

・<img> 요소로 정의된 이미지는

　HTML 문서에 직접 삽입되는 것이 아니라

　HTML 문서에 이미지가 링크되는 형태이다

　즉, <img> 요소는 이렇게 참조된

　이미지를 위한 일종의 수용 공간을 만들어 주는 것이다

 

・<img> 요소에는 src 속성과

　alt 속성을 반드시 명시해야만 한다

 

・HTML과 XHTML에서의 차이점

　HTML에서는 <img> 태그를 닫지 않지만

　XHTML에서는 다음과 같이 반드시 태그를 닫아야만 한다

<img src="/examples/images/img_test.png" alt="테스트 이미지" />

 

 

지원하는 브라우저

지원함	지원함	지원함	지원함	지원함	지원함

 

속성

속성명	속성값	설명
align	top bottom middle left right	주변 요소에 따른 이미지의 정렬 방법을 명시한다 HTML5에서는 더 이상 지원하지 않는다
alt	텍스트	이미지를 가져오는데 실패했을 경우 보여줄 대체 텍스트를 명시한다
border	픽셀	이미지의 테두리(border) 두께를 명시한다 HTML5에서는 더 이상 지원하지 않는다
crossorigin	anonymous use-credentials	<canvas> 요소에 사용될 이미지에 교차 출처 접근(cross-origin access)을 허용하는 제3의 사이트(third-party site)로부터의 이미지 허용 여부를 명시한다 HTML5에서 새롭게 추가된 속성
height	픽셀	이미지의 높이를 명시한다
hspace	픽셀	이미지의 왼쪽과 오른쪽 여백(whitespace)을 명시한다 HTML5에서는 더 이상 지원하지 않는다
ismap	ismap	해당 이미지가 서버 사이드 이미지맵(server-side image map)의 일부인지 여부를 명시한다
longdesc	URL	이미지에 대한 부가적인 설명을 제공하는 URL을 명시한다
sizes	텍스트	서로 다른 페이지 레이아웃에 대한 이미지 소스의 크기를 명시한다
src	URL	이미지 소스의 URL을 명시한다
srcset	텍스트	각각 다른 환경에서 사용될 이미지 소스를 명시한다
usemap	#맵이름	클라이언트 사이드 이미지 맵(client-side image-map)으로 이미지를 명시한다
vspace	픽셀	이미지의 위쪽과 아래쪽 여백(whitespace)을 명시한다 HTML5에서는 더 이상 지원하지 않는다
width	픽셀	이미지의 너비를 명시한다

 

예제

<img src="/examples/images/img_test.png" alt="테스트 이미지">

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기