이미지 스프라이트(Image Sprite)는 여러 개의 작은 아이콘 이미지를 하나의 이미지 파일로 합쳐 놓은 기법입니다. 이를 활용하면 서버에 보내는 HTTP 요청 횟수가 크게 줄어들어 웹사이트의 로딩 속도가 눈에 띄게 빨라집니다.
각 아이콘은 background-position 속성으로 스프라이트 이미지에서 원하는 부분만 잘라내어 표시할 수 있습니다. 아래는 CSS 이미지 스프라이트를 활용해 홈, 전화, 사용자, 검색 아이콘이 포함된 탐색 메뉴(내비게이션 바)를 구현한 예제입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
}
span {
width: 200px;
height: 300px;
background-color: black;
}
nav {
background-color: black;
height: 50px;
padding-top: 15px;
padding-left: 10px;
}
nav a {
font-size: 20px;
color: white;
text-decoration: none;
margin-right: 10px;
}
.home {
width: 32px;
height: 32px;
background: url("css_sprites.png") -62px -62px;
}
.search {
width: 32px;
height: 32px;
background: url("css_sprites.png") -10px -62px;
}
.phone {
width: 32px;
height: 32px;
background: url("css_sprites.png") -62px -10px;
}
.user {
width: 32px;
height: 32px;
background: url("css_sprites.png") -10px -10px;
}
</style>
</head>
<body>
<nav>
<img class="home" />
<a href="">HOME</a>
<img class="phone" />
<a href="">Call Us</a>
<img class="user" />
<a href="">Our Team</a>
<img class="search" />
<a href="">Search</a>
</nav>
<h1>
Main content here
</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, non! Numquam
reprehenderit alias, nisi eos corrupti repudiandae deleniti illo officiis!</p>
</body>
</html>실행 결과
위 코드를 실행하면 검은색 배경의 내비게이션 바에 네 개의 아이콘과 메뉴 링크가 가로로 배치된 다음과 같은 화면이 출력됩니다.
