css - img

<img> 태그로 이미지 넣기

 

 

<img alt="HTML"  src="http://www/w3schools.com/whatis/img_

 

alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 or 이미지 url 주소

 

img {

width: 150px;

}

 

이렇게 입력하면

150px 비율에 맞춰서 세로도 알맞게 줄어들었습니다.

 

background-image로 이미지 넣기

 

background-image: url(이미지경로);

 

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

 

background-color 는 배경색을 추가하는 것이고

background-image 는 배경 이미지를 추가하는 것입니다.