[CSS] 이미지 스프라이트(image sprite)

CSS 이미지 스프라이트(image sprite)

이미지 스프라이트(image sprite)는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.

웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹브라우저는 서버에 이미지를 요청하게 된다.

하지만 사용되는 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 여러번 요청을 하게되므로 웹페이지의 로딩 시간이 오래 걸리게 된다. 

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운 받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다.

모바일 환경과 같은 한정된 자원을 사용하는 플랫폼에서는 웹페이지의 로딩 시간을 단축해주는 효과가 있다.

또한 많은 이미지 파일을 관리하는 대신 몇개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.

요즘 웹공부를하면서 참고하고있는 우리나라의 대표적인 웹사이트 네이버를 보면

개발자 도구를 확인해보면 네이버에서 사용되는 이미지들이 한곳에 모여있는것을 확인할 수 있다.

적어도 20개 이상의 이러한 이미지들을 20번이상 서버에 요청하지않고 단 한번의 요청으로 불러와서

이미지의 좌표를 이용하여 화면에 출력할 수 있다.

일단 사진을 불러오고 사진을 출력할 크기를 width와 height로 지정한다.

position 속성으로  사진에서 가져오고자하는 이미지의 위치를 x 축과 y축 좌표를 작성한다.

특이한점은 양수로 작성하지않고 -로 시작하며 시작은 맨왼쪽 상단에서 부터 시작된다.

repeat 속성을 작성한 이유는 이미지를 불러와서 사용할때 빈 여백이 발생하면 빈공간을 불러온 이미지로 채워넣게되면서 반복이 발생되는데 이를 방지하기 위함이다.

size속성은 불러온 이미지의 크기를 조정해준다.