[HTML/CSS] 01. 사이트에 이미지 넣는법

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

1. <img> 태그의 사용
2. <div> 태그에 background-image 속성을 추가하는 것

2가지 방법의 차이점

• 1. <img> 태그의 경우 이미지 로딩이 실패한 경우 대체텍스트(alt)가 출력되지만,
     background-image 로 사용한 이미지의 경우 대체 결과물이 출력 되지 않는다.

• 2. <img> 태그의 경우 검색시 검색엔진의 색인으로 인해 노출이 되지만,
     background-image 로 사용한 이미지는 검색으로 노출이 되지 않는다.

상황에 맞게 선택하여 사용 할 수 있다.

• 검색시 노출되기 원한다.
• 에러시 손쉽게 대체 결과물(텍스트)을 출력하기 원한다.
• 로고와 같이 이미지가 콘텐츠의 일부분이면서 중요한 경우.
  ===> ✅ <img> 태그 사용

---

• 디자인적인 요소로만 이미지를 활용하고 싶을 때
• 시멘틱한 사용으로 'background'의 이미지로 사용될 때 (이미지가 콘텐츠의 일부분이 아닌경우)
• 배경 전체에 확대해서 보여주기 원하는 경우
  ===> ✅ background-image 속성 사용

>> 상황에 따라 적절하게 사용하자