[css] <img> vs background-image

이미지를 넣는 방법은 두 가지가 있다. <img>태그를 사용하는 것과, background-image를 사용하는 것.

그렇다면 무엇을 써야할까? 이 두 가지는 차이점이 존재한다. 이것을 알기 위해서는 먼저 시맨틱 웹에 대해 알아야한다.

 

 

시맨틱 태그

• 한 눈에 봤을 때, 의미를 알 수 있는 html태그(ex h1(제목), p(문단), header(헤더)...)
• 구조를 쉽게 알아볼 수 있도록 도움을 준다.

 

시맨틱 웹

• 시맨틱 태그를 포함하는 검색엔진최적화(SEO)에 효과적인, 의미있는 웹을 의미한다.
• SEO에 효과적이기 위해서는 웹표준을 따라야한다.

https://www.koreahtml5.kr/main.do

 

 

시맨틱 웹에 효율적이기 위해서는 <img>태그를 사용하면된다!

 

<img>

<img src="이미지 주소" alt="이미지가 잘 나오지 않을 경우 뜰 문장">

• 이미지가 사용자의 컨텐츠 이해에 더 많은 도움을 준다.
• SEO, 성능에 효율적이다.
• alt태그를 사용하고 싶을 경우 사용한다.

 

background-image

<div style="background-image: url(이미지 주소);">

• 순수하게 디자인에 사용한다.
• 이미지의 일부분을 사용하는 경우, 이미지 위에 텍스트가 들어가는 경우 사용한다.
• SEO에 비효율적이며, 성능이 좋지않다(늦게 로딩된다).