TIL 024 | <img> vs <background-image>

JU CHEOLJIN·2021년 8월 2일
1

HTML & CSS

목록 보기
1/2
post-thumbnail

웹페이지에 이미지를 넣을 수 있는 방법은 2가지가 있다. HTML 내에서 태그를 사용하는 방법이 있고, CSS를 통해서 background-image 프로퍼티를 사용하는 방법이다. 굳이, 2가지의 방법을 사용할 수 있는 이유는 무엇일지 정리해보자.

Semantic Web

Semantic Web은 의미론적인 웹이라는 뜻이다. 여기서 의미라는 것은 사람보다도 기계(컴퓨터)가 이해하고 처리할 수 있도록 하는 의도로 볼 수 있다.

<!-- 아래 두 바나나가 어떻게 보이는지 보자 -->
<h4> 바나나 </h4>
<strong> 바나나 </strong>

위의 코드를 통해서 간단한 예시를 보자. 두 태그 안에는 똑같이 바나나 텍스트가 들어가 있다. 아래 결과를 보면 겉으로 보이는 것도 똑같다는 것을 알 수 있다.

바나나

바나나

아마, 웹사이트를 보는 사용자로서는 코드를 살펴보지 않고서 둘의 차이점을 느끼기 힘들 것이다. 하지만, 컴퓨터의 경우에는 둘을 다르게 파악할 수 있다. 위의 <h4> 의 경우에는 heading tag 로서 소주제로서 사용됨을 알 수 있고 아래 <strong> 의 경우에는 강조의 의미로서 사용됨을 알 수 있다.

위와 같은 차이는 결국 검색엔진이 사이트를 분석할 때 유의미한 차이를 만들어 낸다. 관련된 내용과 Semantic 하게 HTML을 구성할 수 있는 방법에 대한 것은 이전에 Semantic HTML에서 다뤘다.

이미지를 보여주는 2가지 방법

<img> tag

이미지를 보여주는 방법 중에서 우선 한가지는 <img> 태그를 이용하는 방법이다. 예시는 아래와 같다.

<img src = "이미지 주소" alt = "설명" />

위의 코드를 보면 2개의 attribute 를 사용하고 있음을 알 수 있다. 여기서 src 의 경우에는 이미지의 주소를 작성하는 곳이고 alt 의 경우에는 이미지가 무엇을 나타내는지 설명하는 내용을 작성할 수 있다. 만약, 이미지를 불러오는 과정에서 문제가 생겨서 이미지가 나오지 않을 때 alt 에 작성된 내용이 나오게 되는데 이를 통해서 사용자는 어떤 이미지가 보여질 예정이었는지 알 수 있게 된다. 또, 스크린 리더 등을 통해서 웹 페이지를 이용하는 사용자 역시 alt 를 통해서 그 내용을 파악할 수 있다.

background-image

이미지를 보여주는 두번째 방법은 바로 CSS를 이용하는 것이다. 이 때는 주로 div 태그에 사용하는 경우가 많은데 예시는 아래와 같다.

.이미지박스{
  background-image: url("이미지 주소");
}

이미지박스 라는 클래스를 가진 div배경이미지를 보여줄 수 있도록 작성했다. 여기서 배경이미지 라는 단어에 대해서 생각해보자.

배경이미지 는 그 의미 자체로 이미 스타일적인 내용임을 유추할 수 있다. 즉, 어떤 설명이나 의미가 아닌 보기 좋도록 사용하는 것이다. 그 차이를 명확히 알 수 있는 부분이 background-image 를 사용할 때 alt 의 역할을 해주는 property가 따로 없다는 점이다. 이를 통해서 background-image 의 경우에는 Semantic 하지 않은 요소임을 알 수 있다.

만약, background-image 를 통해서 작성된 이미지가 문제가 있어 로드되지 못한 경우에 어떻게 될까? <img> 와는 다르게 이 경우에는 아무것도 보여주지 않는다. 그렇기 때문에 정보를 전달하기 위해 꼭 필요하지 않은 경우에는 backgroun-image 를 사용해서 이미지를 보여주는 것이 권장된다.

결론은?

명확하게 어떤 방법이 정답이라고 이야기 하기는 어렵지만, 정보에 관한 내용을 담고 있는 이미지의 경우에는 <img> 태그를, 그것이 아니라면 background-image 를 사용하기를 권장한다.

하지만 어떤 것이 절대적인 답이라고 이야기 하기가 어려운 점은, 상황에 따라서 <img> 를 사용하는 것보다 background-image 를 사용하는 것이 유리한 점도 있기 때문이다. 예를 들어서 업로드 될 이미지의 사이즈가 계속 변경될 가능성이 있는 경우에 <img> 태그를 사용해서 강제적인 사이즈 조정이 된다면 늘어나거나 줄어드는 이상한 모습이 될 수 있지만 background-image 의 여러 property를 이용한다면 스타일을 지정하는 측면에서 편리하게 사용할 수 있다.

profile
사회에 도움이 되는 것은 꿈, 바로 옆의 도움이 되는 것은 평생 목표인 개발자.

0개의 댓글