CSS - Image Sprite

CSS - Image Sprite

• Image Sprite란?
  • 화면에 필요한 이미지 하나하나가 파일이고, 네트워크 요청을 하기 때문에 비용이 든다.
  • 하나의 이미지 파일에 모든 이미지를 담은 후, 위치를 조정하며 골라 사용하는 방법
• 장점
  • 10개의 아이콘이 10개의 파일로 존재한다면 10번을 요청하게 되지만, 1번의 요청으로 줄어들어 웹 성능의 향상을 기대할 수 있다.
  • 이미지를 불러올 때마다 화면에 표현하기 위해 잠깐의 깜빡임이 생기는데, 하나의 이미지파일을 사용하면 이미 브라우저에서 불러온 파일이라 이 깜빡임이 없다.
• 단점
  • 디자이너와 소통이 필요함
  • 이미지가 하나만 수정되어도 파일이 변경되어야 함
  • 각 이미지의 위치(좌표)를 정확히 관리해야 함  
     

Image sprite 기법

다음은 NAVER 메인페이지의 메뉴아이콘이 할당되어있는 배경이미지 파일이다.  
 

<위 이미지는 실제 Naver 메인화면에서 따온 파일이다.>  
 

저 파일에서 하나의 이미지를 불러오고자 한다면, 좌상단을 기준으로하여 불러오고자 하는만큼의 px값으로 처리한다.  

이때, 좌표의 수치 규칙은 다음과 같다.

• 가로는 오른쪽 방향으로 + 수치 증가
• 세로는 아래 방향으로 + 수치 증가

예제코드

1

<div class="empty-profile"></div>

1
2
3
4
5
6

.empty-profile {
  width: 314px;
  height: 314px;
  
  background: url("https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png") no-repeat;
}

중간에 있는 이미지를 골라쓰려면?

앞서 좌상단 0, 0 좌표를 기준으로 한 뒤, 이미지의 폭과 너비의 값으로 불러온다고 했다. 그럼 중간에 있는 것들은 어떻게 불러올까? 기준값 0, 0을 background-position 값으로 조정하여 옮겨준다.

코드를 살펴보자  

1

<div class="input-tool"></div>

1
2
3
4
5
6
7

.input-tool {
  width: 130px;
  height: 80px;
  
  background: url("https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png") no-repeat;
  background-position: -315px -225px;
}

background-position: -315px -225px; 바로 이 부분이다.  

여기서 주의할 점은, 가로, 세로 좌표에서의 - 기호이다. 기준점 변경에 대한 기준이 바로 기준점 그 자체이기 때문인데,

1. 쉽게 생각하자면 배경이미지에서 기준점이 옮겨진다면 저 기호는 +가 되어야 하겠지만,
2. 반대로 기준점을 그대로 두고 그 뒤에서 배경이미지가 역으로 움직인다고 생각해보자. 그럼 쉽게 이해할 수 있다.  
    

근데 대체 왜 이런 좌표기준 방식을 썼을까?

혼자 상상해본다. 만약 1번의 상황으로 간다면 위 코드는 다음과 같이 바뀔것이다.  

1
2
3
4
5
6
7

.input-tool {
  width: 415px;
  height: 305px;
  
  background: url("https://s.pstatic.net/static/www/img/uit/sp_main_dba1af.png") no-repeat;
  background-position: 315px 225px;
}

이 방식은 코드만으로 이미지의 크기를 직관적으로 알기가 힘들다. 아마 이런 문제 때문에 2번의 방식을 쓴걸까?