HTML <img> 태그
예시
이미지를 삽입하는 방법:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
<img>태그는 HTML 페이지에 이미지를 포함하는 데 사용됩니다 .
이미지는 기술적으로 웹 페이지에 삽입되지 않습니다. 이미지는 웹 페이지에 링크됩니다. 태그 는 <img>참조된 이미지를 위한 보관 공간을 만듭니다.
<img>태그에는 두 가지 필수 속성이 있습니다 .
- src - 이미지의 경로를 지정합니다.
- alt - 어떤 이유로 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정합니다.
참고: 또한 항상 이미지의 너비와 높이를 지정하십시오. 너비와 높이를 지정하지 않으면 이미지가 로드되는 동안 페이지가 깜박일 수 있습니다.
팁: 이미지를 다른 문서에 링크하려면 <a><img> 태그 안에 태그 를 중첩하면 됩니다(아래 예 참조).
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <img> | Yes | Yes | Yes | Yes | Yes |
속성
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials |
Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy |
Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
전역 속성
<img>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<img>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
이미지 정렬(CSS 사용):
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
예시
이미지 테두리 추가(CSS 포함):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="border:5px solid black">
예시
이미지에 왼쪽 및 오른쪽 여백 추가(CSS 사용):
<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:middle;margin:0px 50px">
예시
이미지에 상단 및 하단 여백 추가(CSS 사용):
<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
예시
다른 폴더나 다른 웹 사이트에서 이미지를 삽입하는 방법:
<img src="/images/stickman.gif" alt="Stickman" width="24" height="39">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32"
height="32">
예시
이미지에 하이퍼링크를 추가하는 방법:
<a href="https://www.w3schools.com">
<img src="w3html.gif"
alt="W3Schools.com" width="100" height="132">
</a>
예시
클릭 가능한 영역이 있는 이미지 맵을 만드는 방법 각 영역은 하이퍼링크입니다.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect"
coords="34,44,270,350" alt="Computer" href="computer.htm">
<area
shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
관련 페이지
HTML 튜토리얼: HTML 이미지
HTML DOM 참조: 이미지 개체
CSS 튜토리얼: 이미지 스타일 지정
기본 CSS 설정
대부분의 브라우저는 <img>다음 기본값으로 요소를 표시합니다.
예시
img {
display: inline-block;
}