TIL
img태그와 background img태그의 차이
성장을꿈꾸는블루
2022. 11. 22. 23:51
이 둘의 차이는 단순히 사용 방법만이 아니라 생각보다 여러 차이가 있다.
img 태그
이미지 태그는 html의 요소로 다음과 같이 사용할 수 있다.
<img src="이미지url" alt='대체 메시지'/>※특징
- 이미지 로딩이 실패할 때 default이미지와 대체 메시지로 대체가 가능하다.
- HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 좋다.
- 검색 엔진에서 색인을 생성하여 검색시에 노출이 된다.
(img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시킨다.)
background-img 태그
백그라운드 이미지 태그는 css에서 속성을 활용해 다음과 같이 넣을 수 있다.
{background-image: url("이미지url")}※특징
- 순수하게 디자인에 사용
- 대체 메시지, default이미지 불가능
- CSS속성이므로 성능면에서 img 태그보다 떨어진다.
- 스타일 속성이기때문에 자동으로 색인화하지 않아서 검색 시 노출되지 않는다.