기발자의 개발 노트

키즈가오 웹 사이트는 기존 웹 사이트와 달리 굉장히 많은 이미지를 사용한다. 제작할 때는 이 모든 이미지를 background-image 속성을 사용해서 적용했다. 그러다 문득 의문이 생겼다.

지금까지 공부한 내용에 따르면 이미지를 삽입하려면 <img> 태그 또는 background-image 속성을 사용해야 한다. 그런데 이 둘은 무슨 차이가 있지? 어떨 때 <img> 태그를 사용하고 어떨 때 background-image 속성을 사용하는 것이 좋을까?

국내외 웹 사이트의 코드를 살펴봤더니 <img> 태그와 background-image 속성의 차이점을 두 가지로 정리할 수 있었다.

첫째, 이미지의 성격, 즉 정보성 이미지인지 장식용 이미지인지에 따라 구분할 수 있었다. 정보성 이미지란 기업 로고나 기업 슬로건처럼 목적이 뚜렷한 이미지를 뜻한다. 장식용 이미지는 웹 사이트를 돋보이게 하는 배경 이미지나 아이콘 등을 말한다. 시각장애인이 사용하는 스크린 리더 프로그램은 기본적으로 HTML 문서만 읽을 수 있다. 따라서 background-image 속성으로 기업 로고를 삽입할 경우 해당 정보를 시각장애인에게 전달할 수 있는 방법이 없다. 그래서 정보성 이미지에는 <img> 태그를 사용하고 장식용 이미지에는 background-image 속성을 사용하는 것이 원칙이다.

둘째, 이미지가 업로드되는 방식에 따라 구분할 수 있다. <img> 태그는 기본값으로 원본 이미지 크기가 그대로 적용되므로 width와 height 속성을 변경해도 이미지가 잘리는 현상이 나타나지 않는다. 반면 background-image 속성은 적용된 공간에 이미지를 끼워 넣는 개념이다 보니 공간보다 이미지 크기가 크면 이미지가 잘리는 현상이 나타난다.

/* 현재 50 * 50 공간의 크기보다 이미지 크기가 더 큰 상태이다. */
.background {
    width: 50px;
    height: 50px;
    background-color: yellow;
    background-image: url(rice.png);
    background-repeat: no-repeat;
}

그림 공간보다 이미지가 클 때

정리하면 background-image 속성은 액자 안에 사진을 넣는 개념으로 이해하는 것이 좋다. 액자보다 사진이 크면 액자 크기를 벗어난 부분은 잘릴 수밖에 없다. 반대로 액자보다 사진이 작으면 액자 안에 빈 공간이 생긴다.

그림 액자보다 이미지가 클 때(좌) / 액자보다 이미지가 작을 때(우)