[CSS] img와 background image 태그 중에 뭘 쓰는게 좋을까?

image와 background image의 차이점?

나 혼자 실습을 진행했을 때 image 파일로 사진을 넣었었는데 강사님은 background image 사용을 권장했다.

실습 내용은 숙박 시설 이용 고객이 리뷰를 남길 수 있는 페이지를 만드는 것이었는 데 문제는 고객이 올리는 이미지의 사이즈가 어떨지 모른다는 것

그래서 img 태그 사용했을 때 CSS로 세로가 긴 이미지일 경우, 가로가 긴 이미지일 경우를 나눠서 설정해줬는 데 이미지의 비율에 따라 제각기 다른 클래스가 자동으로 들어가야 하는 문제 발생해서 매우 비효율적

이때 CSS로 background-image를 사용하면 한 방에 해결된다고 한다!!

+ 추가로 img와 background-image의 차이점을 검색해보았는 데 대부분 background-image보다 img 사용을 권장하는 분위기 였다.

"이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 써라."

둘의 차이점을 찾다가 이러한 글을 발견했는 데 이미지 오류가 나도 background-image는 아무것도 표시되지 않는 반면 img 태그의 경우 broken image를 보여주기 때문이라고 한다

sr-only: screen reader only

시각장애인 분들에게 정확한 정보를 전달하기 위해 넣는 것

★sr-only 안보이게 처리하는 방법

display: none; 을 해버리면 스크린 리더기에도 읽히지 않는 문제 발생

.sr-only{
position: absolute;
z-index: 100;
width: 1px;
height:1px;
ovrerflow: hidden;
opacity: 0;
}

my study life