[HTML] img vs [CSS]background-image

-·2022년 10월 11일
0

CSS

목록 보기
4/9

이미지를 넣는 2가지 방법

1.HTML 에서 img 태그를 사용한다.

<img src="..." alt="...">

2.CSS 에서 background-image 속성을 사용한다.

.img {
    background-image: url("경로");

[HTML] img 태그를 사용하는 경우

  • 프린트가 필요한 경우 : 백그라운드 이미지는 출력시 포함되지 않는다.
  • 이미지에 문구가 사용되어 의미를 가지는 경우 : 이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있다.
    - 방문자 중 일부는 시각 장애인, 색맹, 시력이 낮은 사람들은 이미지를 볼 수 없다.
    alt 속성은 이러한 사람들이 이미지를 볼 수 없어도 컨텐츠를 이해하는데 큰 도움이 된다.
  • 이미지가 콘텐츠의 중심으로 가장 중요한 경우 - 그냥 디자인 요소는 안된다.

  • 검색 엔진에서 이미지를 색인 해야하는 경우 (중요)

[CSS] background-image 속성을 사용하는 경우

  • 일정부분만 선택하여 보여줄 경우;
    간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경할 수 있다.

  • 이미지 위에 텍스트가 들어가는 경우 ;
    텍스트 태그 안에 백그라운드를 넣는 방법으로 사용할 수 있다.

  • 페이지 전체 출력시 이미지를 제거해야 되는 경우;
    이미지가 출력되면 곤란한 경우거나 겹치는 경우에 해당된다.

  • CSS sprites를 사용해 이미지 속도를 향상시킬 경우
    ; 다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상할 수 있습니다.

  • 배경 전체에 확대해 보여줄 필요가 있는 경우
    ; background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능하다.

  • 순순히 디자인을 위해서만 사용되어져 왔을 경우

  • 이미지 반복해야하는 경우; 블로그 작성자 아이콘에서 날짜 아이콘이 각 기사 등에 반복된다.


결론적으로!

⭐️img 태그를 사용하여 HTML을 짜는 것이 결국 우리가 semantic tag를 잘 사용하였다는 말이고,이는 즉 웹 표준을 잘 지켰다고도 볼 수 있다.⭐️

img 태그 사용을 권고하는 이유는
에러 발생 시 이미지가 깨져도 어떤 이미지인지 정보가 표시되어야하고, 검색엔진에 의해 노출이 잘 되어야하며, 적용된 이미지가 컨텐츠를 이해하는데 도움이 된다.

단순히 웹 디자인과 같은 미적 요소로 이미지를 보여주며 실패할 경우 아무 내용도 표시되지 않는 것이
페이지를 표현함에 있어 더 자연스러울 경우 background-image를 사용해도 무방하다.


출처: https://chlolisher.tistory.com/77 [클로리셔 작은 공간:티스토리]
출처: https://webisfree.com/2015-01-15/img-%ED%83%9C%EA%B7%B8-vs-%EB%B0%B1%EA%B7%B8%EB%9D%BC%EC%9A%B4%EB%93%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94%EA%B0%80
출처: https://velog.io/@vkdtksdl789/Semanticimg-vs-background-img

0개의 댓글