TIL01 img태그와 background-imges속성 차이와 쓰임

🔰 차이점

1. 이미지 태그에 src 이외 Attribute가 존재
   1.< img src=“/art/images”>
2.background-image: url(~~~~);
2. 도움이 되는 콘텐츠 이미지면 img 태그를 외적으로 꾸며주는 역할이 크다면 background 이미지.

쓰임🙌

img태그

• 콘텐츠에서 해당 이미지의 의미를 부여하고 있는 경우.
• 웹페이지에서 프린트할 때 이미지 출력이 필요한 경우.
• 정확한 정보 전달.
• SEO(검색엔진)에서 웹페이지 와 그 alt 값이 연관성을 가지고 싶을 경우.

background-imges 속성

• 페이지 전체 출력 시 이미지를 제거해야 하는 경우.
  • ex: 이미지가 출력되면 곤란한 경우 혹은 겹치는 경우.
• 이미지 위에 텍스트가 들어가는 경우.
• 일정 부분만 선택해 보여줄 경우.
  • ex: 버튼색깔을 다르게 표현 하고자 할 때.
• 이미지에 확대 및 축소가 필요한 경우.
  • ex: background-size 등의 속성을 사용할 때.
• 반복적인 이미지일 경우.
• CSS sprites를 사용해 이미지 속도를 향상 시키려고 할 경우.