IMG element

HTML 문서에 그림을 넣기 위한 element로 시작 태그만 있다.

<IMG src = "../image/aphro-small.gif" alt = "아프로디테 로고 작은 그림"> 
<BR>
<IMG src = "../image/aphro-small.gif" width = 150 height = 50> 
<BR>
<IMG src = "../image/aphro-small.gif" border = 5> 
<BR>
<IMG src = "../image/aphro-small.gif" hspace = 2 vspace = 5>그림과 오른쪽 문자열 사이의 
여백은 2픽셀이고, 아랫쪽 문자열 사이의 여백은 5픽셀이다.
<BR>
<A href = "../default.html"><IMG src = "../image/aphro-small.gif" border = 0"></A> 
이렇게 나와요

속성

src, alt, longdesc
ismap, usemap
align, width, height, border, hspace, vspace
id, class
title
style
onclick, ondlclick, onmouseup, onmousedown, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

src = "URL"

삽입할 그림 파일의 경로를 써 준다. 없어서는 안되는 속성이다.

alt = "문자열"

그림을 표시하지 못하는 브라우저를 위해 간단한 그림의 설명(alternate text)을 붙여 준다. 익스플로러나 넷스케이프같은 그래픽 브라우저에서도 사용자가 그림을 불어오지 않도록 설정하거나 멈춤 단추를 눌러서 그림이 들어오기 전에 전송을 중단하면, 그림이 있어야 할 자리에 그림 표시와 함께 alt 속성 값이 나타난다. 4.0 버젼의 브라우저에서는 alt 속성의 값을 툴팁으로 보여주기도 한다. title과 alt 속성을 동시에 썼을 때는 title 속성의 값이 툴팁으로 나온다.

longdesc = "URL"

alt보다 긴 설명(long description)을 붙일 때 설명이 들어있는 문서의 URL을 써 준다.

ismap

이미지맵이 서버 맵일 때 넣는 속성이다.

usemap = "#맵이름"

이미지맵이 클라이언트 사이드 맵일 때 사용할 맵 파일의 이름을 확장자없이 써 준다.

align = top | middle | bottom | left | right

이미지와 이미지를 둘러싼 문자열 사이의 정렬 방식을 정한다. top이면 이미지의 윗쪽과 문자열의 윗쪽이 맞춰진다. bottom이 기본값이다.

width = 숫자

이미지의 폭을 정한다. 단위는 픽셀이다.

height = 숫자

이미지의 높이를 정한다. 단위는 픽셀이다. height와 width 값을 실제 이미지 크기보다 작게 준다고 해서 그림 파일의 크기가 줄어드는 것은 아니다. 그림 파일의 크기를 줄이기 위해서는 그래픽 프로그램을 이용해 실제 크기를 줄이거나 색 수를 줄여야 한다.

width와 height 값을 실제 값으로 주게 되면, 브라우저는 아직 그림 파일을 다 불러오지 못했더라도 그 크기만큼 공간을 비워두고, 나머지 문자열을 먼저 배열하게 된다.

border = 숫자

이미지의 테두리 선 굵기를 정한다. 단위는 픽셀이다. 그림에 링크를 걸었을 때는 그림의 주위에 파란 색 테두리선이 나타나는데, 이 선을 없애려면 border 값을 0으로 주면 된다.

hspace = 숫자

이미지와 이미지의 좌우에 나타나는 문자열과의 사이에 있는 여백의 두께이다. 단위는 픽셀이다.

vspace = 숫자

이미지와 이미지의 상하에 나타나는 문자열과의 사이에 있는 여백의 두께이다. 단위는 픽셀이다.

◀ ■ ▶