[CSS] img 태그와 Background-img 의 차이

in Dev. Log on Development, HTML, CSS
[CSS] img 태그와 Background-img 의 차이

웹페이지에서 이미지를 넣는 방법은 두가지가 있다.

  • HTML에서 img 태그를 사용해서 넣는 방법
    • <img src="">
  • CSS에서 background-image 속성을 이용해서 넣는 방법
    • background-image: url("");

두가지의 차이점과 어떨 때 사용하면 좋은지 간단히 알아보자
때에 따라 맞춰서 사용하면 될 것이다.

  1. HTML의 img 태그를 사용해야 하는 경우
  2. CSS의 Background-image 를 사용해야 하는 경우

HTML의 img 태그를 사용해야 하는 경우

  • 프린트할 경우에 이미지를 포함 시켜야 할 때
  • 이미지 자체에 의미를 부여할 경우 alt 태그를 사용하여 어떤 이미지인지 나타낼 수 있다.
    • img 태그는 semantic 태그 중에 하나로 시각 장애인에게 어떤 이미지인지 알려줄 수 있다.
  • 검색 시 이미지가 노출이 되고 싶을 때
  • 이미지가 컨텐츠와 관련이 있고 중요한 이미지 일 때

CSS의 Background-image 를 사용해야 하는 경우

  • 콘텐츠와 관련이 없이 디자인적인 배경요소로만 활용할 때
  • 이미지 위에 텍스트가 들어가야 하는 경우
  • 배경 전체를 확대하거나 일정 부분만 선택해서 보여줘야 하는 경우

© 2022.02 by sunnyfterrain