[HTML & CSS] img태그

<img> 태그

 

<img>태그는 이미지를 넣을 때 사용하는 태그입니다.

 

→ 사용법

<img src="프로젝트파일에 있는 이미지디렉터리" alt="이미지의 묘사 내용"/>

<img>태그는 닫히는 태그가 따로 없기 때문에 끝에 끝났다는 표시로 "/" 이것을 넣어주어야 합니다.

 

alt 속성

alt 속성은 Alternate(대체하다)의 줄임 말로 이미지를 대안하다는 뜻입니다.

이미지의 주소가 맞지 않거나 파일이 깨졌을 경우 혹은 서버에 문제가 생겼을 때 이미지 대신 alt 속성에 설정된 값으로 대체되는 것입니다.

alt속성은 이미지를 묘사하는 내용들로 150자 이내로 입력이 가능합니다.

 

 

 

height=300px라는 속성을 걸어주면 이미지 비율에 맞춰 알맞는 크기가 나옵니다.

이처럼 width와 height를 이용해 사용자가 원하는 크기로 맞출 수 있습니다.

 

title 속성

<img src="이미지디렉터리 주소" alt="이미지의 묘사 내용" title="이미지 툴팁 내용"/>

 

title 속성을 사용하면 이미지에 마우스를 올려 놓았을 때 title 속성에 설정된 값이 툴팁 형태로 띄어지게 됩니다.