TIL # 2 (img vs. background-image)

[🚀 Check Point] 11-2. img vs. background-image

사이트에 이미지를 넣는 방법에는 2가지가 있다.

🚀 HTML에서 img src="..." alt="..."로 경로를 연결해서 사용하는 방법
src, alt를 통해 사진을 올릴 수 있음. 이미지 로드 실패시 broken image와 alt텍스트를 볼 수 있음. 기본적으로 노출 됨. 사용자의 컨텐츠 이해에 이미지가 도움을 더 준다고 생각하면 img태그를 쓰자. 프린트가 필요한 경우. SEO에서 효율적임.

🚀 CSS에서 background-image{ url(...)}로 경로 연결해서 불러오는 방법
에러가 났을 시 노출되지 않아 더 자연스러워 보일 수 있음. 일정 부분만 선택해서 보여줄 경우. 이미지 위에 텍스트가 들어가는 경우 간단하게 백그라운드를 넣을 수 있음. 페이지 전체 출력시 이미지를 제거해야 할 때. 로딩 속도 향상. 반복되는 이미지일 경우(ex 아이콘)

<div class="bg-img">배경이미지</div>

.bg-img {
  background-image: url("https://upload.wikimedia.org//.svg.png");
}