html에서 이미지를 삽입할 수 있는 방법은 두가지가 있다.
- img태그를 사용하여 이미지를 넣기
- css파일에서 background-image 속성을 추가하여 넣기
첫번째 img 태그를 사용하면 말 그대로 이미지를 삽입할 수 있는 것이며
두번재 background-image는 말 그대로 특성 컨텐츠 뒤 배경에다가 이미지를
삽입할 수 있는 것이다.
만약에 사진을 삽입할 때에 에러가 난다면
img태그의 경우 일단 에러가 나 있는 사진이 표시가 되며
background-image의 경우는 에러가 날 경우 사진의 영역이 표시가 되지 않는다.
또한 alt의 옵션도 background-image에 넣지를 못한다.
(alt의 경우 이미지가 어떤 의미인지 담는 설명..이니 뭐)
만약 내가 그 해당 이미지의 영역이 무조건 적으로 표시가 되길 원한다면
img태그를 쓰게 될 것이고 그게 아니라면 background-image 를 쓰기 원할 것이다.
그럼 어느 부분에서 이 경우를 나뉠 수 있을까 ?
만약에 이미지의 영역 자체가 사용자에게 보이는 화면에 표시된 컨텐츠를
이해하는것에 도움이 되고 필요하다면 img태그를 사용 할 것이고,
그렇지 않으면 background-image를 사용 할 것이다.
Frontend Developer