이미지스프라이트
-
이미지 스프라이트(Image Sprite)HTML·CSS 2022. 2. 15. 18:23
이미지 스프라이트(Image Sprite)란? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것 웹 브라우저가 서버에 요청하는 이미지가 많으면 많을 수록 웹 페이지 로딩이 오래걸린다. 이미지 스프라이트를 사용하면 단 하나의 이미지 요청으로 줄일 수 있고, 파일 관리도 간편해진다. 사용할 스프라이트 이미지↓ 원본이미지(클릭) /* 기본 설정 */ .character .c { display: inline-block; width: 424px; height: 523px; border: 1px solid red; background: url('/img/img_sprite.png') no-repeat; } /* 위치변경 */ .character .c1 { background-position: -0px -35p..