"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
Q. 이 두가지의 차이점이 무엇일까요?
두가지 방법 모두 이미지를 표현하는 방법이다.
먼저, 첫번째는 html에서 <img>태그를 활용하는 방법이고,
두번째는 css의 background-image를 사용하는 방법입니다.
Q.이 두가지를 각각 어떠한 경우에 사용하면 좋은지?
- img태그 사용
기본적으로 alt속성과 src의 노출이 발생,
그러나 이미지가 사용자에게 컨텐츠 이해에 도움을 준다면 사용 - 이미지가 로고나 다이어그램 또는 사람과 같이 콘텐츠의 일부인 경우
- background-image 대신 img을 사용하면 배경에서 애니메이션 성능을 크게 향상시킴
- SEO,성능 등 많은 면에서 효율적
- background-image 사용, css이용
- alt속성을 이용해 설명이 불가능
- 이미지 내용의 일부가 아닌 경우
- CSS 스프라이트와 같이 이미지의 일부만 보이게하려면 background-image를 사용
- broken image도 텍스트 노출을 하지 않아 에러가 날 경우 알 수 없음
Everyday STEP BY STEP