웹페이지에 이미지를 넣을 수 있는 방법은 2가지가 있다. HTML 내에서
태그를 사용하는 방법이 있고, CSS를 통해서 background-image 프로퍼티를 사용하는 방법이다. 굳이, 2가지의 방법을 사용할 수 있는 이유는 무엇일지 정리해보자.
Semantic Web
은 의미론적인 웹이라는 뜻이다. 여기서 의미
라는 것은 사람보다도 기계(컴퓨터)가 이해하고 처리할 수 있도록 하는 의도로 볼 수 있다.
<!-- 아래 두 바나나가 어떻게 보이는지 보자 -->
<h4> 바나나 </h4>
<strong> 바나나 </strong>
위의 코드를 통해서 간단한 예시를 보자. 두 태그 안에는 똑같이 바나나 텍스트가 들어가 있다. 아래 결과를 보면 겉으로 보이는 것도 똑같다는 것을 알 수 있다.
아마, 웹사이트를 보는 사용자로서는 코드를 살펴보지 않고서 둘의 차이점을 느끼기 힘들 것이다. 하지만, 컴퓨터의 경우에는 둘을 다르게 파악할 수 있다. 위의 <h4>
의 경우에는 heading tag 로서 소주제로서 사용됨을 알 수 있고 아래 <strong>
의 경우에는 강조의 의미로서 사용됨을 알 수 있다.
위와 같은 차이는 결국 검색엔진이 사이트를 분석할 때 유의미한 차이를 만들어 낸다. 관련된 내용과 Semantic 하게 HTML을 구성할 수 있는 방법에 대한 것은 이전에 Semantic HTML에서 다뤘다.
<img>
tag이미지를 보여주는 방법 중에서 우선 한가지는 <img>
태그를 이용하는 방법이다. 예시는 아래와 같다.
<img src = "이미지 주소" alt = "설명" />
위의 코드를 보면 2개의 attribute
를 사용하고 있음을 알 수 있다. 여기서 src
의 경우에는 이미지의 주소를 작성하는 곳이고 alt
의 경우에는 이미지가 무엇을 나타내는지 설명하는 내용을 작성할 수 있다. 만약, 이미지를 불러오는 과정에서 문제가 생겨서 이미지가 나오지 않을 때 alt
에 작성된 내용이 나오게 되는데 이를 통해서 사용자는 어떤 이미지가 보여질 예정이었는지 알 수 있게 된다. 또, 스크린 리더 등을 통해서 웹 페이지를 이용하는 사용자 역시 alt
를 통해서 그 내용을 파악할 수 있다.
이미지를 보여주는 두번째 방법은 바로 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를 이용한다면 스타일을 지정하는 측면에서 편리하게 사용할 수 있다.