<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 스프라이트 예제1</title>
</head>
<body>
<h1>이미지 스프라이트 예제</h1>
<div class="icons">
<ul>
<li>
<a href="#" class="icon msg">msg</a>
<p>msg</p>
</li>
<li>
<a href="#" class="icon email">email</a>
<p>email</p>
</li>
<li>
<a href="#" class="icon success">success</a>
<p>success</p>
</li>
<li>
<a href="#" class="icon error">error</a>
<p>error</p>
</li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* 공통 */
*{margin:0;padding:0;}
ul,ol,li{list-style:none;}
a{text-decoration: none;}
body{font-size: 16px;color:#333;}
h1{font-size:1rem}
/* .icons */
.icons{height:66px;}
.icon{display:inline-block;width:64px;height:64px;background:url(https://choieh.github.io/air-test/img/index/old/icon_common1.png) no-repeat 0 top ;font-size:0;}
.email{background-position:-66px top;}
.success{background-position:-132px top;}
.error{background-position:-198px top;}