• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Image Sprites</title>
7
    <style>
8
        .up, .down, .right, .left {
9
            background: url("/examples/images/img_image_sprites.png") no-repeat;
10
        }
11
        .up {
12
            width: 21px;
13
            height: 20px;
14
            background-position: 0 0;
15
        }
16
        .down {
17
            width: 21px;
18
            height: 20px;
19
            background-position: -21px 0;
20
        }
21
        .right {
22
            width: 22px;
23
            height: 20px;
24
            background-position: -42px 0;
25
        }
26
        .left {
27
            width: 22px;
28
            height: 20px;
29
            background-position: -65px 0;
30
        }
31
    </style>
32
</head>
33
​
34
<body>
35
​
36
    <h2>이미지 스프라이트를 이용한 이미지 로딩</h2>
37
    <p>- 원본 이미지 -</p>
38
    <img src="/examples/images/img_image_sprites.png"><br><br>
39
    <p>- 추출한 이미지 -</p>
40
    <div class="up"></div><br>
41
    <div class="down"></div><br>
42
    <div class="right"></div><br>
43
    <div class="left"></div><br>
44
​
45
</body>
46
​
47
</html>