WebProgramming/HTML

IMG tag

유기농코더 2011. 3. 15. 08:28

IMG TAG

  • 정의

    <img> 태그는 html 페이지안에 이미지를 삽입 할 수 있는 태그 입니다. 다른 부가적인 attributes 들이 있지만, src와 alt는 필이 입력해 주셔야 합니다.

       

  • HTML과 XHTML 에서의 IMG 태그의 차이점
    • HTML : end tag(</img>)를 붙이지 않아도 됩니다.
    • XHTML : end tag를 필요로 합니다.

         

  • Required Attributes

Attribute

Value

Description

alt

text

이미지를 표현 할 수 없을 때, 대체되는 텍스트

src

URL

이미지의 경로

   

  • Optional Attributes

Attribute

Value

Description

align

top

bottom

middle

left

right

style안에 포함

이미지를 정렬

border

pixels

style안에 포함

외곽선을 value 만큼 표시

height

pixels

%

이미지의 높이를 강제 수정

hspace

pixels

style안에 포함

ismap

ismap

이미지의 server-side이미지 맵을 구축

longdesc

URL

이미지의 긴 설명

usemap

#mapname

이미지의 client-side 이미지 맵을 구축

vspace

pixels

style안에 포함
이미지의 상단과 하단의 공백을 추가

width

pixels

%

이미지의 넓이를 강제 수정

   

  • alt와 title의 차이점

    alt는 이미지가 없을 때, 표시 되는 내용

    title은 마우스를 롤오버 했을 때 보이게 되는 말풍선

       

    예제 

    <html>
<head>
<title>Hello World!</title>
</head>
<body>
<img src="https://t1.daumcdn.net/cfile/tistory/163479504D47D24819" alt="이미지가 정상출력 되지 않음-양군" title="이미지 설명(title 기능)" width="400" height="400"/>
</body>
</html>

     

    이미지를 제대로 표시 하지 않으며, 마우스 롤오버시

       

    <html>
<head>
<title>Hello World!</title>
</head>
<body>
<img src="https://t1.daumcdn.net/cfile/tistory/163479504D47D24819" alt="이미지가 정상출력 되지 않음-양군" title="이미지 설명(title 기능)" width="400" height="400"/>
</body>
</html>


    이미지를 제대로 표시 하며, 마우스 롤오버시