CSS Image Sprite 사용의 장점

<시간/>

이미지 스프라이트를 사용하는 주요 이점은 사이트의 로드 시간을 더 빠르게 만드는 http 요청 수를 줄이는 것입니다. 또한 이미지가 더 빨리 로드되어 일부 이벤트에서 한 이미지에서 다른 이미지로 훨씬 더 부드럽게 전환할 수 있습니다. Image Sprite는 단일 이미지에 배치된 이미지 모음입니다.

다음은 CSS를 사용하여 이미지 스프라이트 이점을 보여주는 코드입니다 -

예시

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

출력

위의 코드는 다음과 같은 출력을 생성합니다 -

CSS Image Sprite 사용의 장점

위에서 다음을 사용하여 이미지 스프라이트를 설정했습니다. -

.twitter,.facebook {
   background: url(sprites_64.png) no-repeat;
   display:inline-block;
   width: 64px;
   height: 64px;
   margin:10px 4px;
}
.facebook {
   background-position: 0 -148px;
}