코딩의 시작, TCP School

HTML <img> 태그

정의 및 특징

<img> 태그는 HTML 문서에서 이미지(image)를 정의할 때 사용합니다.

<img> 요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크되는 형태입니다.

즉, <img> 요소는 이렇게 참조된 이미지를 위한 일종의 수용 공간을 만들어 주는 것입니다.

<img> 요소에는 src 속성과 alt 속성을 반드시 명시해야만 합니다.

예제


<img src="/examples/images/img_monalisa.png" alt="모나리자">

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<img>	지원함	지원함	지원함	지원함	지원함	지원함

HTML5에서 변경된 사항

HTML5에서는 <img> 태그의 align, border, hspace, vspace 속성을 더 이상 지원하지 않습니다.

HTML과 XHTML에서의 차이점

HTML에서는 <img> 태그를 닫지 않지만, XHTML에서는 다음과 같이 반드시 태그를 닫아야만 합니다.

<img src="/examples/images/img_monalisa.png" alt="모나리자" />

사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된 속성

속성명	속성값	설명
align	top bottom middle left right	주변 요소에 따른 이미지의 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음.
alt	텍스트	이미지를 가져오는데 실패했을 경우 보여줄 대체 텍스트를 명시함.
border	픽셀	이미지의 테두리(border) 두께를 명시함. HTML5에서는 더 이상 지원하지 않음.
crossorigin	anonymous use-credentials	<canvas> 요소에 사용될 이미지에 교차 출처 접근(cross-origin access)을 허용하는 제3의 사이트(third-party site)로부터의 이미지 허용 여부를 명시함.
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	픽셀	이미지의 너비를 명시함.

CSS 기본값

img {

display: inline-block;

}

DOM 인터페이스

[NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]

interface HTMLImageElement : HTMLElement {

attribute DOMString alt;

attribute DOMString src;

attribute DOMString srcset;

attribute DOMString sizes;

attribute DOMString? crossOrigin;

attribute DOMString useMap;

attribute DOMString longDesc;

attribute boolean isMap;

attribute unsigned long width;

attribute unsigned long height;

readonly attribute unsigned long naturalWidth;

readonly attribute unsigned long naturalHeight;

readonly attribute boolean complete;

readonly attribute DOMString currentSrc;

attribute DOMString referrerPolicy;

};

연관 페이지

HTML 이미지 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<img>