[CSS] Sprite

🥸Sprite

스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 합니다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다.

---

이미지 스프라이트는 <img>태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다.

 

이미지 스프라이트 기법을 사용하기 위해 필수적으로 작성해줘야하는 것은 아래 3가지가 있습니다.

width, height : 삽입할 이미지의 크기를 결정한다.
background-image : 삽입할 이미지의 경로를 설정한다.
background-position : 이미지에서 사용할 이미지의 위치를 설정한다.