files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html


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

---
title: CSS로 이미지 스프라이트 구현하기
slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
tags:
  - Advanced
  - CSS
  - CSS Image
  - Graphics
  - Guide
  - Sprites
  - Web
  - 스프라이트
translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
---
<div>{{CSSRef}}</div>

<p><strong>이미지 스프라이트</strong>는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.</p>

<div class="blockIndicator note">
<p><strong>참고:</strong> HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.</p>
</div>

<h2 id="구현">구현</h2>

<p><code>toolbtn</code> 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.</p>

<pre class="brush:css notranslate">.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}</pre>

<p>배경 이미지의 위치는 속성에 지정된 {{cssxref("url()")}} 값 다음에 x, y 2개 값으로 지정할 수도 있고, {{cssxref("background-position")}} 속성으로 지정할 수 있습니다.</p>

<pre class="brush:css notranslate">#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}</pre>

<p>이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 <code>toolbtn</code> 클래스가 부여됐다고 가정합시다).</p>

<p>비슷하게, 마우스 호버 상태를 만들 수도 있습니다.</p>

<pre class="brush:css notranslate">#btn:hover {
  background-position: <var>&lt;pixels shifted right&gt;</var>px <var>&lt;pixels shifted down&gt;</var>px;
}</pre>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/">Full working demo at CSS Tricks</a></li>
</ul>