[CSS] 기본 속성 - 이미지 스프라이트

CSS 이미지 스프라이트(Image Sprite)

- 여러 개의 이미지를 하나의 이미지로 합쳐서 관리

- 이미지를 다운받기 위한 서버 요청을 줄일 수 있음 => 로딩 시간 단축

- 관리할 이미지 파일의 수가 줄어 간편

.up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
.up { width: 21px; height: 20px; background-position: 0 0; }
.down { width: 21px; height: 20px; background-position: -21px 0; }
.right { width: 22px; height: 20px; background-position: -42px 0; }
.left { width: 22px; height: 20px; background-position: -65px 0; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_imageSprites

코딩교육 티씨피스쿨