CSS - Image Sprite
Contents
CSS - Image Sprite
- Image Sprite란?
- 화면에 필요한 이미지 하나하나가 파일이고, 네트워크 요청을 하기 때문에 비용이 든다.
- 하나의 이미지 파일에 모든 이미지를 담은 후, 위치를 조정하며 골라 사용하는 방법
- 장점
- 10개의 아이콘이 10개의 파일로 존재한다면 10번을 요청하게 되지만, 1번의 요청으로 줄어들어 웹 성능의 향상을 기대할 수 있다.
- 이미지를 불러올 때마다 화면에 표현하기 위해 잠깐의 깜빡임이 생기는데, 하나의 이미지파일을 사용하면 이미 브라우저에서 불러온 파일이라 이 깜빡임이 없다.
- 단점
- 디자이너와 소통이 필요함
- 이미지가 하나만 수정되어도 파일이 변경되어야 함
- 각 이미지의 위치(좌표)를 정확히 관리해야 함
Image sprite 기법
다음은 NAVER 메인페이지의 메뉴아이콘이 할당되어있는 배경이미지 파일이다.
<위 이미지는 실제 Naver 메인화면에서 따온 파일이다.>
저 파일에서 하나의 이미지를 불러오고자 한다면,
좌상단을 기준으로하여 불러오고자 하는만큼의 px값으로 처리한다.
이때, 좌표의 수치 규칙은 다음과 같다.
- 가로는 오른쪽 방향으로
+수치 증가 - 세로는 아래 방향으로
+수치 증가
예제코드
<div class="empty-profile"></div>
.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 값으로 조정하여 옮겨준다.
코드를 살펴보자
<div class="input-tool"></div>
.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번의 상황으로 간다면 위 코드는 다음과 같이 바뀔것이다.
.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번의 방식을 쓴걸까?