Friday, June 09, 2006

HTML-CSS : 그림/사진 태그인 img 태그의 속성

img 태그는 웹페이지에 그림 즉 이미지를 표현하는데 사용됩니다. 웹페이지에 그림이 없으면 무슨 맛이겠습니까. 따라서 img 태그는 가장 중요한 태그 중의 하나입니다.

img 태그의 가장 일반적인 사용법:

img 태그(Tag)에 사용되는 속성들

src : 웹 서버에 올린 그림 파일의 주소 즉 URL 입니다. 이미지 태그에서 가장 중요한 속성입니다.

alt : 어떤 이유로 해서 그림이 나오지 못할 때, 대신 나올 설명문입니다. IE(인터넷 익스플로러)에서는 alt 도 title처럼 말풍선을 출력하는데 이것은 표준이 아닌 것으로 알고 있습니다. 그림에 대한 말풍선이 필요하면 title를 추가해야 합니다.

title : 그림으로 마우스를 가져가면 나오는 툴팁(말풍선)에 들어갈 문자열입니다.

border : 그림의 테두리입니다. 그런데 그림에는 테두리가 없는 것이 보통이기에 일반적으로 border="0" 을 지정합니다.

width 와 height : 그림의 가로 세로 크기를 픽셀 단위로 지정하는 것입니다. 만약 그림이 나오지 않을 경우, 브라우저는 여기서 지정한 만큼의 빈 공간을 만들어 줍니다. 비교적 큰 그림의 경우, 이 속성을 지정하지 않으면 그림이 이상하게 나오는 경우가 있습니다.

또한 이 속성을, 그림의 실제 크기와 다르게 지정하면 그림의 크기를 조절할 수도 있습니다. 즉 확대/축소할 수 있지만 이러면 그림이 거칠게 나오는 단점이 있습니다.