<img>
HTML <img> 태그
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42"> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
모든 주요 브라우저는 <img> 태그를 지원합니다.
태그 정의 및 사용 지침
<img> 태그는 HTML 페이지의 이미지를 정의합니다.
<img> 태그에는 src와 alt라는 두 가지 필수 속성이 있습니다.
참고: 기술적으로 이미지는 HTML 페이지에 삽입되지 않지만 링크됩니다. <img> 태그는 참조된 이미지에 대한 자리 표시자를 만듭니다.
팁: <img> 태그를 <a> 태그 안에 중첩하여 다른 문서에 대한 링크를 추가하세요.
HTML 4.01과 HTML5의 차이점
HTML5에서는 align, border, hspace, longdesc, vspace 속성이 지원되지 않습니다.
HTML 4.01에서는 align, border, hspace, vspace 속성이 더 이상 사용되지 않습니다.
HTML과 XHTML의 차이점
HTML에서 <img> 태그에는 닫는 태그가 없습니다.
XHTML에서는 <img> 태그를 올바르게 닫아야 합니다.
Attributes
New: HTML5의 새로운 속성.
| Property | Value | Description |
|---|---|---|
| align | top 하단 중간 왼쪽 그렇죠 | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 주변 텍스트를 기준으로 이미지가 정렬되는 방식을 지정합니다. |
| alt | text | 이미지의 대체 텍스트를 지정합니다. |
| border | pixels | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 이미지 주위의 테두리를 지정합니다. |
| crossoriginNew | 익명 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 이벤트 속성을 지원합니다.
사용해 보기 - 예
다른 위치의 사진 삽입
이 예는 다른 폴더나 서버의 사진을 웹 페이지에 표시하는 방법을 보여줍니다.
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>插入来自一个文件夹的图片:</p> <img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39"> <p>插入来自一个网站的图片::</p> <img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15"> </body> </html>
예제 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
이미지 링크 만들기
이 예에서는 이미지를 링크로 사용하는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 一个图片链接: <a href="http://www.w3cschool.cc"> <img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0"> </a> </p> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
이미지 맵 만들기
이 예에서는 클릭 가능한 영역이 있는 이미지 맵을 만드는 방법을 보여줍니다. 이러한 각 필드는 하이퍼링크입니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击太阳或其他行星，注意变化：</p> <img src="/upload/course/000/000/010/580979883b949162.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
관련 기사
HTML 튜토리얼: HTML 이미지
HTML DOM 참조 매뉴얼: 이미지 개체
