[CSS] 이미지 스프라이트

이미지 스프라이트란?

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.

sns로 로그인의 경우 화면에 페이스북, 네이버, 카카오톡, 구글 로고가 존재한다.
저 로고를 삽입할 때 아래와 같은 방식으로 코드를 작성할 수 있다.

<img src="facebook.png">
<img src="naver.png">
<img src="kakaotalk.png">
<img src="google.png">

위와 같은 방식일 때는 서버가 총 4장의 사진을 가져오게 된다. 이는 서버에 사진을 가져오라고 4번 요청하는 것이고 그만큼 많은 자원을 요구한다.

이미지 스프라이트는 4장의 이미지를 1개의 이미지로 합친다음 css를 이용하여 나타내는 것이다.
아래의 사진처럼 여러개의 아이콘을 하나의 .png 파일로 만든다.

<a class="sns-icon facebook" href=""></a>
<a class="sns-icon naver" href=""></a>
<a class="sns-icon kakao" href=""></a>
<a class="sns-icon google" href=""></a>

태그에 클래스 명을 주어준다.

.login-sns .sns-icon{
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 20px;
    border: 1px solid white;
    border-radius: 30px;
    color: white;
    background-color: gray;
    background-image: url(./images/sns-icon.png);
    background-size: 304px;
}

.login-sns .facebook{
    background-position: top;
    background-position-x: 201px;
}

.login-sns .naver{
    background-position: top;
    background-position-x: -1px;
}

.login-sns .kakao{
    background-position: top;
    background-position-x: 252px;
}

.login-sns .google{
    background-position: top;
    background-position-x: 101px;
    
}

공통 클래스 명에 .png를 넣어두고 .facebook .naver .kakao .goole 에 따라 position값을 다르게 준다.

이렇게 이미지 하나만 불러와도 4가지의 아이콘을 표현할 수 있다. 서버에 사진 요청을 1번만 하기때문에 훨씬 적은 자원을 요구한다.

이미지 스프라이트의 장점

1. 자원을 적게 소모한다.
2. 하나의 이미지 파일만 관리해서 유지보수가 쉽다.

주의할 점

• 문맥적으로 같은 이미지를 묶어야 한다.