Images can improve the design and the appearance of a web page.
이미지는 웹 페이지의 디자인과 모양을 향상시킬 수 있습니다.
HTML Images Syntax
HTML 이미지 구문
In HTML, images are defined with the <img> tag.
HTML에서는 이미지가 <img>태그 로 정의됩니다 .
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
<img>태그는 단지 속성을 포함, 비어있는, 그리고 닫는 태그가 없습니다.
The src attribute specifies the URL (web address) of the image:
src속성은 이미지의 URL (웹 주소)를 지정합니다 :
1 | <img src="url"> | cs |
The alt Attribute
alt 속성
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
alt어떤 이유로 사용자가 볼 수없는 경우 속성은, 이미지에 대한 대체 텍스트를 제공한다
(때문에 느린 연결로, src 속성의 오류, 또는 사용자가 화면 판독기를 사용하는 경우).
The value of the alt attribute should describe the image:
alt속성 의 값은 이미지를 설명해야합니다.
If a browser cannot find an image, it will display the value of the alt attribute:
브라우저가 이미지를 찾을 수 없으면 alt 속성 의 값을 표시 합니다.
Note: The alt attribute is required. A web page will not validate correctly without it.
참고 : 이 alt속성은 필수 항목입니다. 웹 페이지가 없으면 웹 페이지가 올바르게 검증되지 않습니다.
Image Size - Width and Height
이미지 크기 - 너비와 높이
You can use the style attribute to specify the width and height of an image.
이 style속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다 .
Alternatively, you can use the width and height attributes:
다른 방법으로는 사용할 수 있습니다 width및 height속성 :
The width and height attributes always defines the width and height of the image in pixels.
width및 height속성은 항상 픽셀 이미지의 폭과 높이를 정의합니다.
Note: Always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
참고 : 항상 이미지의 너비와 높이를 지정하십시오. 너비와 높이를 지정하지 않으면 이미지가로드되는 동안 페이지가 깜박일 수 있습니다.
Width and Height, or Style?
너비와 높이, 또는 스타일?
The width, height, and style attributes are valid in HTML5.
width, height및 style속성은 HTML5에서 유효합니다.
However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:
그러나이 style속성을 사용하는 것이 좋습니다 . 스타일 시트가 이미지 크기를 변경하지 못하게합니다.
Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html> | cs |
Images in Another Folder
다른 폴더의 이미지
If not specified, the browser expects to find the image in the same folder as the web page.
지정하지 않으면 브라우저는 웹 페이지와 동일한 폴더에서 이미지를 찾으려고합니다.
However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:
그러나 이미지를 하위 폴더에 저장하는 것이 일반적입니다. 그런 다음 src속성에 폴더 이름을 포함시켜야 합니다.
Images on Another Server
다른 서버의 이미지
Some web sites store their images on image servers.
일부 웹 사이트는 이미지를 이미지 서버에 저장합니다.
Actually, you can access images from any web address in the world:
사실, 세계의 모든 웹 주소에서 이미지에 액세스 할 수 있습니다.
You can read more about file paths in the chapter HTML File Paths.
HTML 파일 경로 장에서 파일 경로에 대한 자세한 내용을 볼 수 있습니다 .
Animated Images
애니메이션 이미지
HTML allows animated GIFs:
HTML은 애니메이션 GIF를 허용합니다.
Image as a Link
이미지를 링크로 사용
To use an image as a link, put the <img> tag inside the <a> tag:
이미지를 링크로 사용하려면 <img>태그를 태그 안에 넣으십시오 <a> .
Example
1 2 3 | <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a> | cs |
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
참고 : border:0; IE9 및 이전 버전에서 이미지 주위에 테두리가 표시되지 않도록 추가되었습니다 (이미지가 링크 인 경우).
Image Floating
이미지 플로팅
Use the CSS float property to let the image float to the right or to the left of a text:
CSS float속성을 사용하여 이미지가 텍스트의 오른쪽이나 왼쪽으로 떠있게됩니다.
Example
1 2 3 4 5 | <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p> | cs |
Tip: To learn more about CSS Float, read our CSS Float Tutorial.
팁 : CSS 플로트에 대한 자세한 내용은 CSS 플로트 튜토리얼을 참조하십시오 .
Image Maps
이미지지도
The <map> tag defines an image-map. An image-map is an image with clickable areas.
<map>태그는 이미지 맵을 정의합니다. 이미지 맵은 클릭 가능한 영역이있는 이미지입니다.
In the image below, click on the computer, the phone, or the cup of coffee:
아래 이미지에서 컴퓨터, 전화 또는 커피 잔을 클릭하십시오.
Example
1 2 3 4 5 6 7 | <img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <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="Coffee" href="coffee.htm"> </map> | cs |
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
태그 의 name속성은 usemap 속성과 연관되어 있으며 이미지와 맵 사이의 관계를 만듭니다.<map><img>
The <map> element contains a number of <area> tags, that define the clickable areas in the image-map.
<map>요소의 수를 포함 <area>이미지 맵의 클릭 가능한 영역을 정의 태그를.
Background Image
배경 이미지
To add a background image on an HTML element, use the CSS property background-image:
HTML 요소에 배경 이미지를 추가하려면 CSS 속성을 사용하십시오 background-image.
Example
To add a background image on a web page, specify the background-image property on the BODY element:
웹 페이지에 배경 이미지를 추가하려면 BODY 요소에 background-image 속성을 지정하십시오.
1 2 3 4 5 | <body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> </body> | cs |
Example
To add a background image on a paragraph, specify the background-image property on the P element:
단락에 배경 이미지를 추가하려면 P 요소에 background-image 속성을 지정합니다.
1 2 3 4 5 6 7 | <body> <p style="background-image:url('clouds.jpg')"> ... </p> </body> | cs |
To learn more about background images, study our CSS Background Tutorial.
배경 이미지에 대한 자세한 내용은 CSS 배경 자습서를 참조하십시오 .
The <picture> Element
<그림> 요소
HTML5 introduced the <picture> element to add more flexibility when specifying image resources.
HTML5는 <picture>이미지 리소스를 지정할 때 더 많은 유연성을 추가 하는 요소를 도입했습니다 .
The <picture> element contains a number of <source> elements, each referring to different image sources. This way the browser can choose the image that best fit the current view and/or device.
이 <picture>엘리먼트는 서로 다른 이미지 소스를 참조하는 <source> 요소를 포함한다. 이렇게하면 브라우저가 현재보기 및 / 또는 장치에 가장 잘 맞는 이미지를 선택할 수 있습니다.
Each <source> element have attributes describing when their image is the most suitable.
각 <source>요소에는 이미지가 가장 적합한시기를 설명하는 속성이 있습니다.
The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.
브라우저는 <source>일치하는 속성 값과 함께 첫 번째 요소를 사용하고 다음 <source>요소를 무시합니다 .
Example
Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if not, but larger than 465 pixels.
브라우저 창 (뷰포트)이 650 픽셀 이상인 경우 하나의 그림을 표시하고 그렇지 않은 경우 465 픽셀보다 큰 이미지를 표시합니다.
1 2 3 4 5 | <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> | cs |
Note : Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags matched.
주 : 항상 <img>요소를 요소의 마지막 하위 요소로 지정 하십시오 <picture>. 이 <img>요소는 요소를 지원하지 않는 브라우저 <picture>나 <source>일치 하는 태그 가없는 브라우저에서 사용됩니다 .
HTML Screen Readers
HTML 스크린 리더
A screen reader is a software program that reads the HTML code, converts the text, and allows the user to "listen" to the content. Screen readers are useful for people who are blind, visually impaired, or learning disabled.
화면 판독기는 HTML 코드를 읽고 텍스트를 변환하며 사용자가 내용을 "들을"수있는 소프트웨어 프로그램입니다. 스크린 리더는 시각 장애인, 시각 장애인 또는 학습 장애인에게 유용합니다.
Chapter Summary
Use the HTML <img> element to define an image
HTML <img>요소를 사용하여 이미지 정의
Use the HTML src attribute to define the URL of the image
HTML src속성을 사용하여 이미지의 URL을 정의하십시오.
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
HTML alt속성을 사용하여 이미지의 대체 텍스트를 정의 할 수 있습니다 (이미지를 표시 할 수없는 경우).
Use the HTML width and height attributes to define the size of the image
HTML width및 height속성을 사용하여 이미지의 크기를 정의하십시오.
Use the CSS width and height properties to define the size of the image (alternatively)
CSS width및 height속성을 사용하여 이미지 크기를 정의하십시오 (또는).
Use the CSS float property to let the image float
CSS float속성을 사용하여 이미지가 뜨도록하십시오.
Use the HTML <map> element to define an image-map
HTML <map>요소를 사용하여 이미지 맵 정의
Use the HTML <area> element to define the clickable areas in the image-map
HTML <area>요소를 사용하여 이미지 맵에서 클릭 가능한 영역을 정의합니다.
Use the HTML <img>'s element usemap attribute to point to an image-map
HTML <img>의 요소 usemap속성을 사용하여 이미지 맵을 가리 킵니다.
Use the HTML <picture> element to show different images for different devices
HTML <picture>요소를 사용하여 여러 장치에 서로 다른 이미지 표시
Note : Loading images takes time. Large images can slow down your page. Use images carefully.
참고 : 이미지로드에는 시간이 걸립니다. 큰 이미지는 페이지 속도를 늦출 수 있습니다. 이미지를 신중하게 사용하십시오.
Test Yourself with Exercises!
HTML Image Tags
Tag |
Description |
<img> |
Defines an image 이미지를 정의합니다. |
<map> |
Defines an image-map 이미지 맵을 정의합니다. |
<area> |
Defines a clickable area inside an image-map 이미지 맵 내에서 클릭 가능한 영역을 정의합니다. |
<picture> |
Defines a container for multiple image resources 여러 이미지 자원을위한 컨테이너를 정의합니다. |
출처 : W3School.com
'HTML' 카테고리의 다른 글
| HTML 목록(HTML Lists) (0) | 2018.06.16 |
|---|---|
| HTML 표(HTML Tables) (0) | 2018.06.15 |
| HTML 링크(HTML Links) (0) | 2018.06.13 |
| HTML 스타일 - CSS(HTML Styles - CSS) (0) | 2018.06.12 |
| HTML 색상(HTML Colors) (0) | 2018.06.11 |
