고정 헤더 영역
상세 컨텐츠
본문
스프라이트를 이용하는 방식에는 아래 주소처럼 여러가지가 있습니다.
http://arnaumarch.com/en/sprites.html ( 포토샵 플러그인 cs2에서 실행안됨 )
http://spritecow.com ( 배경이 투명한 통 이미지가 필요 함 )
http://spriteme.org/ ( 사용법이 북마크에 해당 플러그인을 추가해서 사용하는 구조입니다. )
마지막으로 아래 내용이 제가 사용하는 방법 입니다.
http://ko.spritegen.website-performance.org/ ( 개별 이미지들을 zip 파일로 압축해서 올리시면 자동으로 CSS코드가 생성 됩니다. 위치계산을 할 필요가 없어집니다. )
샘플로 소스 코드입니다. ( 이미지 개별 zip코드는 첨부파일로 올립니다. )
menu.zip<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>스프라이트 샘플</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- 제이쿼리 프레임웍 로드 -->
<script type="text/javascript"><!--마우스 오버 이벤트 처리 -->
$(document).ready(function(){
$('#menu li').each(function(){
var classOver = $(this).attr('class') + '_r';
$(this).hover(function(){
$(this).addClass(classOver);
}, function(){
$(this).removeClass(classOver);
$(this).addClass('sprite-image');
});
});
});
</script>
<style>
/*css reset*/
html {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup {font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}
li {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:baseline;}sub{vertical-align:baseline;}
legend {color:#000;}
input,button,textarea,select,optgroup,option {font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select {*font-size:100%;}
a { text-decoration:none; }
:focus { -moz-outline-style: none; }
/* 구조 */
#wrapper {
width:900px;
margin:0 auto;
}
#wrapper h1 {
color:#000;
font-size: 2.6em;
padding-bottom: 1em;
}
#wrapper ul#menu {
border: 1px solid #34393A;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background:-moz-linear-gradient(
rgba(244, 244, 244, 1) 0%,
rgba(204, 204, 204, 1) 75%,
rgba(204, 204, 204, 1) 100%);
background:-webkit-gradient(linear,75% 0,75% 100%,
color-stop(0, rgba(244, 244, 244, 1)),
color-stop(0.75, rgba(204, 204, 204, 1)),
color-stop(1, rgba(204, 204, 204, 1)));
padding: 8px 0 8px 8px;
margin:0 0 200px 100px;
-moz-box-shadow: 0px 0px 4px #555; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 4px #555; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 4px #555; /* Opera 10.5, IE 9 */
display: inline-block;
width: auto;
}
#menu li {
padding: 0 8px 0 0;
float: left;
cursor: pointer;
}
/* sprite */
.sprite-image {
background: url(csg-548fa6d3f2d35.png) no-repeat top left;
}
.sprite-menu_01{ background-position: 0 0; width: 140px; height: 30px; }
.sprite-menu_01_r{ background-position: 0 -80px; width: 140px; height: 30px; }
.sprite-menu_02{ background-position: 0 -160px; width: 140px; height: 30px; }
.sprite-menu_02_r{ background-position: 0 -240px; width: 140px; height: 30px; }
.sprite-menu_03{ background-position: 0 -320px; width: 140px; height: 30px; }
.sprite-menu_03_r{ background-position: 0 -400px; width: 140px; height: 30px; }
.sprite-menu_06{ background-position: 0 -480px; width: 140px; height: 30px; }
.sprite-menu_06_r{ background-position: 0 -560px; width: 140px; height: 30px; }
.sprite-menu_07{ background-position: 0 -640px; width: 140px; height: 30px; }
.sprite-menu_07_r{ background-position: 0 -720px; width: 140px; height: 30px; }
</style>
</head>
<body>
<div id="wrapper">
<h1>Sprite demo</h1>
<div id="container">
<ul id="menu">
<li class="sprite-image sprite-menu_01"></li>
<li class="sprite-image sprite-menu_02"></li>
<li class="sprite-image sprite-menu_03"></li>
<li class="sprite-image sprite-menu_06"></li>
<li class="sprite-image sprite-menu_07"></li>
</ul>
</div>
</div>
</body>
</html>
menu.zip
0.03MB
'CSS' 카테고리의 다른 글
| 망분리된 프로젝트에서 웹폰트 적용시 (0) | 2018.02.28 |
|---|---|
| 웹폰트 적용하기 (0) | 2015.07.30 |
| 홈페이지 색상적용시 다른사이트 색상값 확인할때 사용가능한 크롬플러그인 입니다. (0) | 2014.06.13 |
| 웹표준 준수사항 몇가지 (0) | 2011.08.11 |
| css로 이미지 리사이즈하기 (0) | 2010.10.04 |
댓글 영역