sprite img : icon 사이즈의 작은 이미지들을 동일 간격으로 띄워 배치하여 하나의 파일로 만든 이미지파일
ex )
위와 같은 이미지파일을 포토샵 등에서 X축 Y축 안내선을 이동시켜가면서 원하는 위치의 시작점을 잡고,
전체 이미지사이즈의 모서리에서 거리가 얼마나 떨어졌는지 계산하여 그 거리만큼의 마이너스값을 입력해주면
원하는 이미지만 골라서 출력할 수 있음
이 이미지를 이용하기 위해 나는 하기와 같이 코드를 짰다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>네이버 날씨<title>
<style type="text/css">
ul li a{text-decoration: none;color: #000;font-size: 34px;}
ul li a span{display: inline-block;width: 46px; height: 46px;
background:url(images/sp_weather_time_5f2bbb.png) no-repeat}
ul li.wt01 a span{background-position: -6px -130px;}
ul li.wt02 a span{background-position: -193px -6px;}
ul li.wt03 a span{background-position: -6px -6px;}
ul li.wt04 a span{background-position: -130px -192px;}
</style>
</head>
<body>
<h2>날씨</h2>
<ul>
<li class="wt01"><a href="#"><span></span><strong>비</strong></a></li>
<li class="wt02"><a href="#"><span></span><strong>맑음</strong></a></li>
<li class="wt03"><a href="#"><span></span><strong>구름</strong></a></li>
<li class="wt04"><a href="#"><span></span><strong>번개</strong></a></li>
</ul>
</body>
</html>
결과물
일일이 거리를 재서 입력한다는 게 좀 많이 귀찮긴 한데
(포토샵 등의 이미지 편집 프로그램이 매우 필요해서)
특히 N사 메인의 경우 거의 sprite 이미지로 구성되어 있음