포스트

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

게시 업데이트
By redskelt
2 분읽는 시간
  1. node js 설치
  2. npm(node package manager) 설치
  3. npm으로 grunt-cli를 설치
    1

    $ npm install -g grunt-cli
  4. 프로젝트 지정 - 폴더 생성
    1

    $ mkdir ImageSpriteTest
  5. 프로젝트의 root folder 이동
    1

    $ cd ImageSpriteTest
  6. package.json
    1

    $ npm init
  7. gruntfile.js 파일 추가
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

      module.exports = function (grunt) {
 // Configure grunt
 grunt.initConfig({
   sprite:{
     all: {
       src: "icons/*.png",  //하나의 이미지로 합칠 대상 이미지들  
       dest: "sprites/icons.png", //합쳐진 이미지 
       destCss: "css/sprites.css" //합쳐진 이미지 위치 css
     }
   }
 });
 // Load in "grunt-spritesmith"
 grunt.loadNpmTasks("grunt-spritesmith");
  };
  8. Grunt 설치
    1

    $ npm install grunt --save-dev
  9. grunt-spritesmith 플러그인 설치
    1

    $ npm install grunt-spritesmith
  10. Run the grunt sprite task
    1

    $ grunt sprite
  11. Result

ImageSpriteTest/sprites/icons.png
SpriteImage

ImageSpriteTest/css/sprites.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

.icon-menu_title_0 {
  background-image: url(../sprites/icons.png);
  background-position: 0px 0px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_1 {
  background-image: url(../sprites/icons.png);
  background-position: -49px 0px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_10 {
  background-image: url(../sprites/icons.png);
  background-position: 0px -48px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_11 {
  background-image: url(../sprites/icons.png);
  background-position: -49px -48px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_2 {
  background-image: url(../sprites/icons.png);
  background-position: -98px 0px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_3 {
  background-image: url(../sprites/icons.png);
  background-position: -98px -48px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_4 {
  background-image: url(../sprites/icons.png);
  background-position: 0px -96px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_5 {
  background-image: url(../sprites/icons.png);
  background-position: -49px -96px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_6 {
  background-image: url(../sprites/icons.png);
  background-position: -98px -96px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_7 {
  background-image: url(../sprites/icons.png);
  background-position: -147px 0px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_8 {
  background-image: url(../sprites/icons.png);
  background-position: -147px -48px;
  width: 49px;
  height: 48px;
}
.icon-menu_title_9 {
  background-image: url(../sprites/icons.png);
  background-position: -147px -96px;
  width: 49px;
  height: 48px;
}
CSS
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.