티스토리 뷰

프로그래밍/WEB

[WEB] CSS Sprites - 웹 로딩속도 높이기

앙망 2010. 12. 7. 10:32


CSS Sprites 기법을 이용하여 여러개의 이미지를 하나로 통합한 다음 잘라서 쓴다.

http://csssprites.com/


여러개의 이미지를 하나로 통합한뒤 필요한 이미지를 잘라서 쓰면
request 횟수가 줄어들어 사용자의 반응 속도도 빨라지고
서버의 부하도 줄일 수 있다.
  1. 이미지 통합하기
  2. CSS 작성하기
  3. 사용하기

1. 이미지 통합하기 

2. CSS 작성하기  

/* CSS 작성*/ 
#layoutBottom2 {width:990px;padding-left:12px;margin:10px 0px 20px 0px}
#layoutBottom2 li{margin-left:3px;background:url(/images/main/banner2.gif);no-repeat top left}
#layoutBottom2 li.banner01 {width:90px; height:45px;  background-position: 0 -355px; }
#layoutBottom2 li.banner02 {width:122px; height:45px;  background-position: 0 -615px; }
#layoutBottom2 li.banner04 {width:90px; height:45px;  background-position: 0 -160px; }
#layoutBottom2 li.banner05 {width:90px; height:45px;  background-position: 0 -95px; }
#layoutBottom2 li.banner10 {width:92px; height:45px;  background-position: 0 -30px; }
#layoutBottom2 li.dart_banner_amak {width:90px; height:45px;  background-position: 0 -420px; }
#layoutBottom2 li.banner06 {width:95px; height:45px;  background-position: 0 -550px; }
#layoutBottom2 li.banner07 {width:74px; height:45px;  background-position: 0 -485px; }
#layoutBottom2 li.banner08 {width:100px; height:45px;  background-position: 0 -225px; }
#layoutBottom2 li.banner09 {width:100px; height:45px;  background-position: 0 -290px; }


3. 사용하기

<!-- 배너링크 달기 -->

 <div id="layoutBottom">
 <ul>
  <a href="링크1"><li class="banner01" style="cursor:hand"></li></a>
  <a href=http://naver.com target="_blank"><li class="banner02" style="cursor:hand"></li></a>
  <a href="#" target="_blank"><li class="banner04" style="cursor:hand"></li></a>
  <a href="#" target="_blank"><li class="banner05" style="cursor:hand"></li></a>
  <a href="#" target="_blank"><li class="dart_banner_amak" style="cursor:hand"></li></a>
  <a href="#" target="_blank"><li class="banner06" style="cursor:hand"></li></a>
  <a href="#" target="_blank"><li class="banner07" style="cursor:hand"></li></a>&nbsp;&nbsp;
  <a href="#" target="_blank"><li class="banner08" style="cursor:hand"/></li></a>
  <a href="#" target="_blank"><li class="banner09" style="cursor:hand"></li></a>
  <span id="abroad"><li class="banner10"></li></span>
 </ul>
</div>




저작자표시 비영리 변경금지
공유하기 링크
댓글