CSS 이미지 스프라이트 기법에 대하여 알아보려고 합니다. 우선 CSS 이미지 스프라이트란 무엇이고 어떤 효과가 있는지 간략하게 알아보도록 하겠습니다.

웹페이지에 사용되는 이미지는 다양합니다. 배경이미지가 있을 수 있고 그 밖에 아이콘이나 텍스트, 제목 등이 사용될 수 있을 것이니다. 이런 다양한 이미지를 개별적으로 불러와 사용할 수 있지만 분산된 여러개의 이미지를 하나로 묶어서 이미지의 위치 지정만으로 원하는 이미지를 선택하는 기법이 바로 이미지 스프라이트 기법입니다.

스프라이트 기법의 장점이라면 가볍다는 점입니다. 우선 일정 간격으로 다수의 이미지를 하나로 만들기 때문에 불필요한 공간이 발생하지 않으며 많은 파일을 불러올 필요도 없습니다. 리소스 소비가 작겠죠.

또 하나는 관리의 편리함입니다. 여러개의 이미지가 여기저기 분산되어 있다면 어떤 파일이 원하는 파일이고 어떤 이미지인지 정확히 기억하거나 분류하기가 까다롭습니다. 하지만 이 방법을 사용하면 비슷한 분류의 이미지를 동일한 간격으로 배치하기 때문에 쉽게 찾고 적용할 수 있습니다.


그렇다면 단점은 없을까요?
웹페이지의 업데이트가 자주 있다면 스프라이트 이미지 역시 자주 업데이트 해주어야 할 것입니다. 만약 추가되는 부분이 없이 삭제되는 이미지만 있다면 그대로 사용해도 무방하겠지만 원래의 의도, 가볍고 빠른 성능을 제대로 발휘할 수 없겠죠.

CSS를 사용해야 한다.
퍼블리싱이 익숙하지 않다면 CSS를 사용한 position 속성이 어려울 수도 있습니다. 또한 이미지 크기의 조정이 IE 9.0 이상 버전에서 부터 가능합니다.

이런 단점도 있지만 사실 큰 단점은 아니기에 많은 웹사이트가 이 기법을 활요하고 있습니다. 특히 버튼 또는 아이콘의 호버(Hover, 롤오버) 기능을 적용할 때 매우 쉽게 활용할 수 있고, 코드 역시 간결하다는 매우 큰 장점이 있습니다.