[TIL] HTML & CSS img 와 background-image 사용

< img> 사용

• HTML 태그 사용
• 이미지 나타낼때 많이 사용하는 태그
• src="" : 이미지 경로 (local/url)
• alt="" : 이미지가 여러 사정에 의해서 뜨지 않았을때 나타나는 설명(정보)

< img src="img_girl.jpg" alt="Girl in a jacket">

background-image 사용

• css에서 설정해서 이미지 보여줌
• 검색시 나타나지 않음
• url("경로")
• < div> 라는 태그안에 넣어서 사용 가능

.background-img{
background-image: url("../../media/examples/lizard.png";
}

< img>의 경우 이미지가 생성에 실패해도 설명과 기본적으로 나타나는 이미지(broken image)가 있는 반면 background-image의 경우는 아예 나타나지 않는다

📌 이미지가 검색시 나와야 하고 정보 담기 -> < img>사용
단순 이미지 보여주기, 꾸미기 -> background-img 사용