![[HTML5&CSS3] 스프라이트(Sprite) 이미지](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVQ3Z1%2FbtqzYLWqanb%2Fy0AuDWl2ZXOWSVCtfHyMKK%2Fimg.png)
728x90
최근 들어서 웹에서는 되도록이면 이미지 사용을 줄이고자 하는 경향이 있습니다. font나 기타 CSS사용으로 어느 정도 대체가 가능하기 때문인데 그럼에도 불구하고 아직까지 웹에서는 많은 수의 이미지가 사용됩니다.
이미지는 클라이언트가 웹페이지를 요청하게 되면 해당 웹페이지에서 사용되는 모든 이미지가 클라이언트쪽으로 다운로드되는데 이때 사용되는 이미지수가 많으면 그만큼 요청수가 많아지게 되고 결국 페이지 로딩 시간이 오래 걸린다는 문제가 있습니다.
이 문제를 해결하고 이미지관리를 쉽게 하고자 스프라이트 이미지가 사용됩니다.
보통 스프라이트 이미지는 버튼이나 기타 아이콘 같은 UI 이미지가 여러 개 있는 걸 의미합니다. 위 이미지는 CLIEL이라고 하는 문구가 적힌 이미지인데 이걸 각각의 문자가 같이 있는 스프라이트 이미지로 보고 예로서 사용해 보고자 합니다.
CSS에서 스프라이트이미지는 여러 개의 이미지가 이미지 파일 하나에 모두 존재하는 상태에서 필요한 이미지의 영역만을 분리하는 방법으로 사용합니다.
<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style type="text/css">
#div1 {
background: url('/assets/img/Untitled.png');
background-position: 0px 0px;
height: 150px;
width: 120px;
}
#div2 {
background: url('/assets/img/Untitled.png');
background-position: -110px 0px;
height: 150px;
width: 120px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>분리 방법은 background-position에서와 같이 가져올 이미지의 위치를 설정해서 해당 영역에 있는 이미지만을 보여주도록 하는 것입니다.
728x90
'Web > HTML5 & CSS3' 카테고리의 다른 글
| [HTML5&CSS3] 키 프레임(keyframes)을 통한 애니메이션 구현 (0) | 2019.12.25 |
|---|---|
| [HTML5&CSS3] 변형 속성 (0) | 2019.12.19 |
| [HTML5&CSS3] 뷰포트(viewport) (0) | 2019.12.17 |
| [HTML5&CSS3] 벤더 프리픽스(vendor prefix) (0) | 2019.12.05 |
| [HTML5&CSS3] 선형 그레디언트(linear-gradient) (0) | 2019.11.25 |