TIL 01 | [HTML] img Tag vs background-image

• img Tag 와 backgroung-image 중 무엇을 써야할지 고민이 될때가 있다. 이러한 상황에서 무엇을 선택할지 알아보자.

img Tag

이미지를 웹 사이트에 추가하는 방법이 몇 개있는데 가장 많이 쓰이는 방법은 img태그를 사용하는 것이다.

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

• alt는 이미지가 뜨지 않았을 때 (서버에서 이미지가 삭제됐거나 잘못된 이미지 대신 보여줄 텍스트이다.

• src는 이미지 파일 경로 or 이미지 url 주소

• img 태그의 속성에는 width, height가 있어서 html에서 직접 수정이 가능하다.

background-image

background-image는 css를 통해서 이미지를 생성하는 것 이다. 사이트에 이미지가 있을 때 어떤것은 img 태그로 만들고, 어떤것은 css의 background-image 속성으로 이미지를 추가했는지 사용자는 알기 어렵다. 개발자 도구를 열어서 직접 확인해야만 알 수 있다.

<div class="bg-img">배경이미지</div>

.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  width: 300px;
  height: 300px;
}

• background-color는 배경색을 추가하는 것이다.
• background-img는 이미지를 추가하는 것이다.
• div에 width와 height를 적용하면 img 적용이 된다.

그렇다면 둘 중 어떤 것을 사용해야 될까 ?

img에 에러가 나면 무엇인가 보여줄지 안 보여줄지를 생각하면된다. 만약 alt 값으로 무엇인가 보여주고 싶으면 img태그를 사용하면 되고 보여주고 싶지 않으면 background-image를 사용하면된다.

TIP

이미지가 사용자에게 컨텐츠 이해를 도움을 더 준다고 생각하면 img태그 사용, 그렇지 않으면 background -image를 써라.