CSS Sprite(CSS 스프라이트)

 꽤 전에 인터넷을 통해서 알게 되어서 이를 이제야 한번 써먹어 보고 블로그에 메모를 위하여 글을 남긴다.

개요

간단하게 CSS Sprite를 설명하면 웹 페이지에서 사용하는 이미지들을 각각의 파일로 관리하지 않고 이미지를 한개의 파일로 만든다음 이 파일 자체를 잘라서 사용하는 이다.

사용 목적

이를 사용하는 이유는 웹 페이지 속도의 향상이 주된 이유이다. 웹에서 파일들을 요청하는 것 자체가 시간을 소모하는 일이기 때문에 한번의 요청으로 이미지를 받아오고 이 이미지를 잘라서 사용하는 것이 시간소모가 적기 때문이다.

본문

이미지 파일

일단 이미지파일을 합치는 것이 제일 우선이다. 이미지 파일을 합치는 것은 이미지 편집 프로그램을 통해서 합치고 이를 좌표를 잘 계산해서 적어두고 사용하는 방법이 가장 클래식하지만 이런 귀찮고 관리가 힘든 방법보다 이미 잘 만들어둔 것들이 있다.

1. CSS Sprites

http://css.spritegen.com/

일단 나는 이 페이지에서 이미지를 합쳤으며, 이 페이지는 한글로된 파일명을 지원하지 않으니 주의하기 바란다.

페이지를 들어가보면 사용법은 매우 직관적이기 때문에 별도의 설명은 하지 않을 것이며, 합치고 나면 결과 이미지는 이미지를 오른쪽클릭해서 다른이름으로 저장하면 된다. 소스코드 파일은 알아서 복사를 해두거나 하면 된다.

적용

자동으로 변환해주는 프로그램들을 이용했다면, 거의 소스코드가 완성된 상태로 되어 있겠지만, 일단 이 기능을 어느정도 이해하기 위해서는 그냥 쌩판으로 적용하는 방법에 대해서 이야기 해보도록 하겠습니다.

먼저, 배경이 될 이미지를 가져와야 합니다.

여기서 예시로 들 이미지는 다음과 같습니다.

a.png

높이 : 48px

너비 : 48px

b.png

  

높이 : 48px

너비 : 48px

c.png

높이 : 96px

너비 : 48px

.a, .b {

background: url("c.png") no-repeat;

}

다음과 같이 a, b 클래스에 해당 이미지를 배경화면으로 채웁니다.

.a {

width: 48px;

height: 48px;

background-position: 0 0;

}

.b {

width: 48px;

height:48px;

background-position: 0 -48px;

}

다음과 같이 태그의 height, width에 제한을 건 다음 포지션을 옮겨서 이미지를 일부만 보이게 하는 방법이다.