CSS Image Sprites
Image Sprites는 여러 이미지들을 하나의 이미지 파일로 합쳐 넣는 겁니다.
웹페이지에 이미지가 많으면 일일이 server에 request 해야 되기 때문에 로딩 시간이 많이 걸립니다.
CSS Image Sprites를 사용하면 server request를 줄이고 퍼포먼스를 향상시킬 수 있습니다.
위 이미지에는 집과 좌 우 화살표가 있습니다.
한개의 이미지 인데요.
이것을 집, 왼쪽 화살표, 오른쪽 화살표 이렇게 따로 따로 분리해서 하나의 이미지로 사용할 수 있습니다.
위 이미지는 http://www.w3schools.com/css/img_navsprites.gif 에 있습니다.
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#prev{left:0px;width:43px;}
#prev{background:url('http://www.w3schools.com/css/img_navsprites.gif') 87px 0;}
#home{left:60px;width:46px;}
#home{background:url('http://www.w3schools.com/css/img_navsprites.gif') 0 0;}
#next{left:129px;width:43px;}
#next{background:url('http://www.w3schools.com/css/img_navsprites.gif') 177px 0;}
</style>
</head>
<body>
<ul id="navlist">
<li id="prev"><a href="#"></a></li>
<li id="home"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
html 파일을 만들고 위 소스코드를 붙여 넣어 보세요.
그러면 아래와 같이 브라우저에 표시 됩니다.
하나만 분석해 보면
#prev{left:0px;width:43px;}
#prev{background:url('img_navsprites.gif') 87px 0;}
첫번째 left 는 브라우저 상의 위치 입니다. 그러니까 0포인트에서 width 43 픽셀까지를 이용할 거라고 먼저 해 놓고 그 다음에 이미지를 넣습니다.
이미지는 img_navsprites.gif 의 87픽셀서부터 표시합니다. 그러면 87픽셀부터 가로로 43픽셀이 표시 되겠죠.
이게 왼쪽 화살표 입니다.
다른 소스코드 볼까요?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0px;width:46px;}
#home{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') 0 -45px;}
#prev{left:63px;width:43px;}
#prev{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') -47px -45px;}
#next{left:129px;width:43px;}
#next{background:url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('http://www.w3schools.com/css/img_navsprites_hover.gif') -91px -45px;}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href="#"></a></li>
<li id="prev"><a href="#"></a></li>
<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>
이것의 원본 이미지는 아래 이미지 입니다.
마우스가 오버 되면 밑의 어두운 이미지가 표시 되도록 하는 것이죠.
직접 만들어서 해 보세요.
마지막 소스코드를 한번 보겠는데요.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img.home
{
width:46px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
img.next
{
width:43px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
img.before
{
width:43px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) 87px 0;
}
</style>
</head>
<body>
<img class="home" width="1" height="1" />
<br /><br />
<img class="next" width="1" height="1" />
<br /><br />
<img class="before" width="1" height="1" />
</body>
</html>
이 소스코드가 원래는 http://www.w3schools.com 의 CSS image sprites 튜토리얼 첫번째 나온 겁니다.
그런데 제 컴퓨터에서는 크롬에서만 제대로 표시 되서 맨 마지막에 놨습니다.
브라우저에 표시되는 것은 저 위의 첫번째 소스하고 똑 같습니다.
실무에서는 이미지가 많이 들어갈 경우 퍼포먼스를 향상시키기 위해 이 효과를 써 보는 것도 좋을 것 같습니다.
이 sprite image 를 만들고 css 파일을 얻을 수 있는 싸이트로는 SpriteMe가 있습니다.
링크 따라 가셔서 한번 보세요.
그리고 관련 글로는 여기를 참조하세요.
sprite01.html'WEB_APP > HTML5' 카테고리의 다른 글
| CSS Sprite Image 관련 팁 (2) | 2012.08.17 |
|---|---|
| HTML5 CSS Text wrapping (Google) (0) | 2012.02.04 |
| HTML5 CSS3 Flexible Box Model (0) | 2012.02.02 |
| HTML5 CSS3 Animation and Adobe Dreamweaver (0) | 2012.01.30 |
| HTML5 CSS Columns Google (0) | 2012.01.27 |
| HTML5 CSS Transform (Google) (0) | 2012.01.26 |
| HTML5 Transitions (-webkit-transition) (0) | 2012.01.20 |
| HTML5 Geolocation (구글 지도에 현위치 표시하기) (3) | 2012.01.19 |
| HTML5 Better semantic tags (0) | 2012.01.18 |
| HTML5 Speech Input (음성인식) API (0) | 2012.01.16 |