CSS의 Sprite 기능 tip/xhtml/css2008/05/29 17:57
얼마전에 훈스님 블로그에서 넥슨 사이트의 성능튜닝 - #3 HTTP 요청 줄이기 라는 글을 보았습니다.
글 내용중에 HTTP요청을 줄이기 위한 하나의 방법으로 CSS Sprite 라는 기능을 설명하셨는데
그냥 보고 넘어가다가 태오사이트에서 어떤 분이 구글 메인페이지 하단의 아이콘들의 움직임을 궁금해 하시기에 저도 한번 테스트 해보기로 맘 먹고 코드를 분석하기 시작했습니다.
CSS Sprite 기능을 구글의 경우로 설명을 드리면 구글 하단에 쓰이는 이미지를 보면 하나의 통 이미지 입니다.
이 이미지를 해당 div의 background로 넣고 position의 값을 변경하면 원하는 부분의 이미지 즉 메일, 캘린더, 노트 부분만 나오게 하는 기능입니다.
그래서 IE Developer Toolbar를 이용하여 그 부분의 스타일과 HTML 코드를 보니 마우스를 올리는 순간
마우스가 가르키는 div style의 position값을 setInterval로 변경 해 주는 방법으로 보였습니다.
그 방법으로 간단하게 코딩을 해 봤습니다. 아래의 소스를 복사해서 테스트를 해 보세요.
이 기능을 모르셨던 분들은 언젠간 유용하게 사용하실 수 있겠죠? ^^;
<style type="text/css">
#gm {
width:52px;
height:37px;
background: url(http://www.google.co.kr/ig/f/JB08UxZqEXw/intl/ALL_kr/svc_sprite_all.gif) no-repeat 0px 0px;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
var num=0;
var interVal;
function startSprite(bol)
{
num = (bol ? 0 : -312);
interVal = setInterval("_sprite(" + bol + ")",70);
}
function _sprite(bol)
{
document.getElementById("gm").style.backgroundPosition = num + "px 0px";
num = (bol ? num-52 : num+52);
if(num < -312 || num > 0)
clearInterval(interVal);
}
//-->
</script>
<div id="gm" onmouseover="startSprite(true);" onmouseout="startSprite(false);">
</div>
[출처] CSS의 Sprite 기능|작성자 마리
'tip > xhtml/css' 카테고리의 다른 글
| CSS Text Button Design (0) | 2008/11/06 |
|---|---|
| table의 border를 스타일시트로 가늘게~ (0) | 2008/10/15 |
| input type=image 테두리(boder)값 없애기 (0) | 2008/10/08 |
| Using CSS to Do Anything: 50+ Creative Examples and Tutorials (0) | 2008/06/04 |
| CSS Menu with Dynamic Submenu (0) | 2008/06/04 |
| 40 Free Web Template Resources (1) | 2008/06/04 |
| CSS Gradient Text Effect (0) | 2008/06/02 |
| CSS Decorative Gallery (0) | 2008/06/02 |
| CSS의 Sprite 기능 (0) | 2008/05/29 |
| HTML5 미리 보기 (0) | 2008/05/27 |
| HTML 4와 HTML 5의 차이점 (0) | 2008/05/27 |
