반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

CSS Image Sprites 실습 해 보기

2012. 8. 15. 13:06 | Posted by 솔웅


CSS Image Sprites


Image Sprites는 여러 이미지들을 하나의 이미지 파일로 합쳐 넣는 겁니다.

웹페이지에 이미지가 많으면 일일이 server에 request 해야 되기 때문에 로딩 시간이 많이 걸립니다.

CSS Image Sprites를 사용하면 server request를 줄이고 퍼포먼스를 향상시킬 수 있습니다.




위 이미지에는 집과 좌 우 화살표가 있습니다.

한개의 이미지 인데요.

이것을 집, 왼쪽 화살표, 오른쪽 화살표 이렇게 따로 따로 분리해서 하나의 이미지로 사용할 수 있습니다.


위 이미지는 http://www.w3schools.com/css/img_navsprites.gif 에 있습니다.


<!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;}

#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


sprite02.html


sprite03.html


반응형

Comment