HTML 참조 가이드

HTML 태그 전체

HTML: <img> 태그

HTML <img> 태그는 HTML 문서에서 이미지를 정의합니다. 이 태그는 일반적으로 <img> 요소로도 알려져 있습니다.

온라인 예제

이미지 삽입 방법:

예제

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
</head>
<body>
<img src="pig.gif" alt="pig face" width="32" height="32">
</body>
</html>

테스트를 보려면 ‹/›

브라우저 상호兼容성

IEFirefoxOperaChromeSafari

모든 주요 브라우저는 <img> 태그를 지원합니다.

이미지 alt와 title 속성의 차이:

이미지의 alt 속성은 이미지가 정상적으로 표시되지 않을 때 표시되는 텍스트 튜토리얼입니다.
이미지의 title 속성은 마우스가 요소에 위치할 때 텍스트 튜토리얼을 표시합니다.

태그 정의 및 사용 설명

<img> 태그는 HTML 페이지에 이미지를 정의합니다.

<img> 태그는 두 가지 필수 속성을 가지고 있습니다: src와 alt.

<img> 태그는 다음 이미지 형식을 지원할 수 있습니다(브라우저에 따라 다름): jpeg, gif, png, apng, svg, bmp, bmp ico, png ico.

주석:기술적으로 이미지는 HTML 페이지에 삽입되지 않으며, HTML 페이지에 링크됩니다.<img> 태그의 역할은 참조된 이미지에占位符을 생성하는 것입니다.

추가적인 정보:<a> 태그 안에 <img> 태그를 넣어 다른 문서에 이미지 링크를 추가합니다.

HTML 4.01 와 HTML5간의 차이

HTML5 중에서는 다음 속성을 지원하지 않습니다: align, border, hspace, longdesc, vspace.

HTML에서는 4.01 중에서, 다음 속성: align, border, hspace, vspace는 폐지되었습니다.

HTML과 XHTML 간의 차이

HTML에서는 <img> 태그에는 종료 태그가 없습니다.
XHTML에서는 <img> 태그를 올바르게 닫아야 합니다.

속성

New　：HTML5 속성 중에 새로 추가된 속성.

속성	값	설명
align	top 　bottom 　middle 　left 　right	HTML5 지원하지 않습니다. HTML 4.01 사용되지 않습니다. 　　이미지를 주위의 텍스트에 어떻게 배치할지 지정합니다.
alt	text	이미지의 대체 텍스트를 지정합니다.
border	pixels	HTML5 지원하지 않습니다. HTML 4.01 사용되지 않습니다. 　　이미지 주위의 경계선을 지정합니다.
crossoriginHTML5	anonymous use-credentials	이미지의 크로스도메인 속성을 설정합니다.
height	pixels	이미지의 높이를 지정합니다.
hspace	pixels	HTML5 지원하지 않습니다. HTML 4.01 사용되지 않습니다. 　　이미지의 왼쪽과 오른쪽의 공백을 정의합니다.
ismap	ismap	이미지를 서버 측 이미지 맵으로 정의합니다.
longdesc	URL	HTML5 지원하지 않습니다. HTML 4.01 사용되지 않습니다. 　　긴 이미지 설명 문서를 포함한 URL을 지정합니다.
src	URL	이미지를 표시할 URL을 정의합니다.
usemap	#mapname	이미지를 클라이언트 측 이미지 맵으로 정의합니다.
vspace	pixels	HTML5 지원하지 않습니다. HTML 4.01 사용되지 않습니다. 　　이미지의 상단과 하단의 공백을 정의합니다.
width	pixels	이미지의 너비를 정의합니다.

전역 속성

<img> 태그가 지원 HTML의 전역 속성。

이벤트 속성

<img> 태그가 지원 HTML 이벤트 속성。

온라인 예제를 시도해 보세요

이미지 정렬
이 예제는 글자 사이에 이미지를 정렬하는 방법을 보여줍니다.

이미지 푸시
이 예제는 이미지를 문단의 왼쪽이나 오른쪽으로 푸시하는 방법을 보여줍니다.

이미지 링크 설정
이 예제는 이미지를 링크로 사용하는 방법을 보여줍니다.

이미지 맵 생성
이 예제는 클릭 가능한 영역을 가진 이미지 맵을 생성하는 방법을 보여줍니다. 각 영역은 슈퍼 링크입니다.