[HTML/CSS] img tag vs. background-img

양갱장군·2020년 9월 15일

TIL

목록 보기

4/39

HTML의 <img>태그와 CSS의 background-img 속성은 겉으로 봤을 때 같은 비주얼 결과를 가져다 준다. 그렇다면 두 방법을 구분하여 사용할 필요는 없는걸까?

없었으면 좋겠지만(ㅎㅎ) 당연히 <img>태그가 유용한 경우와 background-img 속성이 유용한 경우는 다르다.

✔ 이런 상황에서는 `<img>` 태그를

이미지가 핵심적인 semantic 의미를 가질 때(ex. 경고 아이콘 등)
<img>태그를 사용하면 모든 user agents와 의미를 공유할 수 있다.

💥 Semantic web/tag란?

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다. 아래 두 코드는 브라우저에서 동일한 외형을 갖는다.
```
  <div>
    <p>hi jjburi</p>
  </div>
```
```
  <header>
    <p>hi jjburi</p>
  </header>
```
그러나, 첫번째 코드의 <div> 요소는 포함된 content에 대하여 어떤 의미도 말해줄 수 없다. 다시 말해, 개발자가 의도한 존재 의미(?)를 명확하게 나타낼 수 없는 것이다.

이와 반대로, 두번째 코드의 <header> 요소는 페이지의 서두라는 의미를 내포하고 있기에 개발자가 의도한 바를 파악할 수 있다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

사람뿐 아니라 검색엔진도 semantic 요소를 통해 보다 빠른 크롤링과 인덱싱을 할 수 있다. 그리고 이러한 semantic 태그를 활용할 수 있는 공간이 semantic 웹이다.

다시 말해, 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
삽입하려는 이미지가 단순 디자인적 요소라기 보다는 컨텐츠의 일부 일때 (ex. 로고 등)
사람들이 해당 페이지를 프린트할 때, 이미지가 디폴트 값으로 포함되길 원할 경우
검색엔진으로 부터 indexing 되길 원할 경우. <img>태그를 alt 값과 title attribute과 함께 사용하면 screen readers의 식별이 가능하다.
애니메이션 퍼포먼스 성능을 향상하고 싶은 경우
-> 무슨 말인지 잘 모르겠다.. 나중에 보충 예정