HTML 이미지

« Previous Next Chapter »

JPG Images

Mountain View

GIF Images

PNG Images

Graph

Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:304px;height:228px;">

</body>
</html>
Try it Yourself »

HTML 이미지 문법

HTML 에서 이미지는 <img> 태그로 정의됩니다.

<img> 태그는 빈 태그로, 속성 만을 가지며, 종료 태그가 없다.

src 속성의 값은 표시 할 이미지의 URL 을 정의 :
<img src="url" alt="some_text">

URL 은 이미지가 저장되어 있는 위치를 가리킵니다. "www.w3schools.com" 에 "images"라는 디렉토리에 있는 "boat.gif" 라는 이름의 이미지의 URL은 "http://www.w3schools.com/images/boat.gif" 로 주어진다,

브라우저는 문서의 <img> 태그가 있는 곳에 이미지를 표시합니다. 두 단락 사이에 이미지 태그를 넣을 경우, 브라우저는 첫 번째 단락, 다음 이미지, 다음 두 번째 단락을 보여줍니다.

alt 속성

이미지가 표시될 수 없는 경우에 대신 보여질 대체 텍스트를 지정하는데 alt 속성이 사용된다.

alt 속성의 값은 이미지를 설명하는 단어들 이어야 한다 :

<img src="html5.gif" alt="The official HTML5 Icon">
alt 속성은 요구되는(required) 속성으로,  없으면 해당 웹페이지는 유효성검사를 통과하지 못한다.
화면 판독기(screen reader)는 화면에 표시되는 내용을 읽을 수 있는 소프트웨어 프로그램으로, 맹인, 시각장애인 학습에 사용된다.
이러한 화면 판독기에서 이미지를 설명하는데 alt 속성을 사용한다.

이미지 크기 -  Width and Height

이미지의 높이와 너비를 지정하는 데 style 속성을 사용할 수 있다.

값은  픽셀 단위(값 다음에 px를 사용)로 지정됩니다:다:

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
다른 방법으로는, height 와 width 속 성을 사용할 수 있다:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Try it Yourself »

width 와 height, 그리고 style 속성 모두 HTML5 표준에서 유효합니다.
하지만, style 속성을 사용하는 것을 권장합니다. 이는  style sheet 에 의한 이미지의 기본적 크기를 변경하는 것을 방지할 수 있기 때문입니다.

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
Try it Yourself »
<img src="smiley.gif" alt="Smiley face" width="42" height="42">

Tip: 이미지의 height 와 width 속성을 모두 지정하는 것이 좋습니다. 이러한 속성이 설정되어 있는 경우 페이지가 로드될 때, 이미지에 필요한 공간이 예약된다. 그러나, 이러한 속성 없이는 브라우져가 이미지의 크기를 알지 못하며, 그 결과 페이지가 로드되는 과정(이미지가 로드되는 동안)에서 레이아웃이 변화하게된다.

이미지 위치 - 다른 폴더 / 다른 서버

명시되어 있지 않으면, 브라우저는 웹페이지가 있는 동일한 폴더에서 이미지를 찾으려 한다.
그러나, 웹에서는 서브 폴더에 이미지를 저장하고, 그 이미지 이름에 폴더를 함께 참조하는 것이 일반적이다.:

Example

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »

일부 웹 사이트에서는 이미지 서버에 자신의 이미지를 저장합니다.

실제로, 당신은 세계의 모든 웹 주소에서 있는 이미지에 액세스 할 수 있습니다 :

Example

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Try it Yourself »

파일 경로에 대한 자세한 내용은 다음과 같습니다.

PathDescription
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder

링크로 이미지 사용

이미지를 링크로 흔히 사용한다.:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »

이미지 플로팅(floating)

단락(paragraph)오른 쪽이나 외쪽으로 이미지를 플로팅(floating) 시킬 수 있다..:

Example

<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>
Try it Yourself »

Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »

HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map


« Previous Next Chapter »