설명
The HTML Image Element (<img>) represents an image to the document.
<img> 는 그림파일을 표현할때 사용된다.
참고 :
Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers (including those used by people with vision impairments), or if the user chooses not to display images, or if the browser is unable to display the image because it is invalid or an unsupported type. In these cases, the browser may replace the image with the text defined in this element's alt attribute.
브라우져가 이 요소에 의해서 지정된 이미지를 항상 표시 할 수 있는것은 아니다. 이것은 그래픽이 사용되지 않는 브라우져(시각적으로 불편한 사람들이 사용되는 브라우져를 포함), 또는 그림이 표현되지 않도록 사용자가 선택한 경우, 또는 사용된 주소가 잘못되었거나, 지원하지 않는 그림파일일 경우 이미지가 나타나지 않을 수 있다. 이런 경우 브라우져는 이 요소의 alt 속성에 표시되어있는 텍스트를 이미지 대신 표시해준다.
Usage Context
| Permitted content | None, this is a void element |
| Tag omission | Must have a start tag and must not have an end tag. |
| Permitted parent elements | Any element that accepts Phrasing content. |
| Normative document | HTML 5, section 4.8.1; HTML 4.01, section 13.2 |
속성
이 엘리먼트는 전역속성을 지원한다.
align - Deprecated in HTML 4, Obsolete in HTML5
HTML4부터 폐지예정, HTML5부터 폐지됨.
The alignment of the image with respect to its surrounding context.
이미지와 주변의 문단들의 정렬상태를 지정한다.
border - Deprecated in HTML 4, Obsolete in HTML5
The width of a border around the image.
border - HTML4부터 폐지예정, HTML5부터 폐지됨.
이미지의 테두리 지정
alt
This attribute defines the alternative text describing the image. Users will see this displayed if the image URL is wrong, the image is not in one of the supported formats, or until the image is downloaded.
이 속성은 이미지 대신 보여줄 글을 지정할때 사용된다. 사용자는 이미지의 주소가 틀리거나, 이미지가 지원하지 않는 포맷이거나, 해당 이미지를 다운로드 중 일때, 이 글을 보게된다.
참고 : Omitting this attribute indicates that the image is a key part of the content, but no textual equivalent is available. Setting this attribute to the empty string indicates that this image is not a key part of the content; non-visual browsers may omit it from the rendering.
참고 : 이 속성을 사용하지 않으면, 이미지가 글로 변환되지 않는다. 이 속성을 빈 문자열로 지정하게 되면 그 부분 이미지가 전체 내용에서 중요한 부분이 아님을 의미한다. 그래픽이 사용되지 않는 브라우져의 경우 이 속성을 지정하지 않는 경우, 해당 이미지 전체를 표시하지 않고 지나칠 수 있다.
height
The height of the image in HTML5 CSS pixels, or HTML 4 in pixels or as a percentage.
HTML5 경우 CSS에 픽셀로 이미지의 높이를 지정해준다. HTML4의 경우 픽셀 또는 퍼센트로 이미지의 높이를 지정해준다.
hspace
Deprecated in HTML 4, Obsolete in HTML5
The number of pixels of white space to insert to the left and right of the image.
HTML4부터 폐지예정, HTML5에서 폐지됨
이미지의 왼쪽과 오른쪽에 넣을 빈 공간의 픽셀 수를 지정한다.
ismap
This Boolean attribute indicates that the image is part of a server-side map. If so, the precise coordinates of a click are sent to the server.
이 불리언 속성은 서버에 이미지 맵이 있는지를 지정해준다. 이것을 지정해주면, 그림에서 사용자가 클릭한 좌표정보가 서버측으로 전송된다.
참고 : This attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute.
참고 : 이 속성은 <img>요소가 <a> 요소의 하위 요소이고, 제대로 된 href 속성을 가질때만 처리된다.
longdesc - HTML 4 only
HTML4에서만 사용
The URL of a description of the image to be displayed, which supplements the alt text. In HTML5, use a regular <a> element to link to the description.
이미지의 URL이 표시된다. 이것은 alt에 표시된 글을 보충해준다. HTML5에서는 설명부분에 링크를 걸 때에는 <a> 요소를 사용하자.
name - Deprecated in HTML 4, Obsolete in HTML5
HTML4부터 폐지예정, HTML5부터 폐지됨.
A name for the element. It is supported in HTML 4 only for backward compatibility. Use the id attribute instead.
요소의 이름을 지정한다. HTML4에서만 사용할 수 있다. HTML5부터는 name속성 대신 id속성을 사용한다.
src
Image URL, this attribute is obligatory for the <img> element.
이미지의 url을 지정해준다. 이것은 img 요소를 사용하려면 반드시 적어줘야하는 속성이다.
width
The width of the image in pixels or percent.
이미지의 넓이를 픽셀 또는 퍼센트로 지정한다.
usemap
The partial URL (starting with '#') of an image map associated with the element.
<img>안에 들어있는 이미지맵을 가리키는 부분 URL이며, #으로 시작한다.
참고 : You cannot use this attribute if the <img> element is a descendant of an <a> or <button> element.
참고 : <img>가 <a>나 <button> 요소의 하위 요소일 때에는 usemap 속성을 사용할 수 없다.
vspace - Deprecated in HTML 4, Obsolete in HTML5
HTML4부터 폐지예정, HTML5에서 폐지됨.
The number of pixels of white space to insert to above and below the image.
이미지의 위쪽과 아랫쪽에 특정픽셀만큼의 공백문자를 넣고 싶을 때 사용한다.
Supported Image Formats
지원하는 이미지 포맷
The HTML standard doesn't give a list of image format that must be supported, so each user agent supports a different set of formats. Gecko supports:
• JPEG
• GIF, including animated GIFs
• PNG
• APNG Requires Gecko 1.9.2
• SVG Requires Gecko 2.0
Support for the XBM format has been removed in Gecko 1.9.2.
HTML표준은 지원해야하는 이미지 포멧에 대해 명시하지 않고 있기 때문에, 각각 다른 포멧들을 지원하고 있다. Gecko의 경우 다음을 지원한다 :
- JPEG
- GIF, 에니메이션이 포함된 GIF
- PNG
- APNG, Gecko 1.9.2 필요
- SVG, Gecko 2.0 필요
XBM포멧은 Gecko 1.9.2 부터 지원하지 않는다.
예제
<img src="http://www.facebook.com/?ref=logo" alt="facebook logo" />
DOM Interface
This element implements the HTMLImageElement interface.
이 요소는 HTMLImageElement 인터페이스를 구현한다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 1.0 | 지원 | 지원 | 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 지원 | 지원 | 지원 | 지원 |
