스프라이트

    [HTML5&CSS3] 스프라이트(Sprite) 이미지

    [HTML5&CSS3] 스프라이트(Sprite) 이미지

    최근 들어서 웹에서는 되도록이면 이미지 사용을 줄이고자 하는 경향이 있습니다. font나 기타 CSS사용으로 어느 정도 대체가 가능하기 때문인데 그럼에도 불구하고 아직까지 웹에서는 많은 수의 이미지가 사용됩니다. 이미지는 클라이언트가 웹페이지를 요청하게 되면 해당 웹페이지에서 사용되는 모든 이미지가 클라이언트쪽으로 다운로드되는데 이때 사용되는 이미지수가 많으면 그만큼 요청수가 많아지게 되고 결국 페이지 로딩 시간이 오래 걸린다는 문제가 있습니다. 이 문제를 해결하고 이미지관리를 쉽게 하고자 스프라이트 이미지가 사용됩니다. 보통 스프라이트 이미지는 버튼이나 기타 아이콘 같은 UI 이미지가 여러 개 있는 걸 의미합니다. 위 이미지는 CLIEL이라고 하는 문구가 적힌 이미지인데 이걸 각각의 문자가 같이 있는 ..