티스토리 뷰

[HTML5 /CSS3] CSS sprites 기법

CSS sprites 기법


페이지의 첫 로딩 속도를 줄여주는 여러 방법 중에서도 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 이 중 CSS sprites 은 실제 적용하기에도 아주 손쉬운 방법 중에 하나라고 할 수 있습니다.

웹페이지에서 필수적으로 자주 사용되는 아이콘, 버튼 같은 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후 배경이미지로 만들어 놓고 position(좌표)값으로 각각의 이미지를 불러오는 것을 css sprite기법이라고 할 수 있습니다.
 css sprite으로 이미지를 불러오게 되면 트래픽이 절약되고 HTTP요청 횟수를 줄어들어 빠른 웹 브라우징을 할 수 있게 됩니다.

대표 포털 사이트를 살펴보자. 많은 이미지와 아이콘, 버튼들이 있겠지만 각각 한가지 이미지씩만 보길 바란다
네이버 스프라이트 기법 보기네이트 스프라이트 기법 보기다음 스프라이트 기법 보기

CSS에서 background로 이미지를 불러오고 거기서 background-position으로 불러오는 방법은 아래와 같습니다.

이런식으로 하나의 통 이미지를 position값으로 위치를 조절해가며 적용할 수 있습니다.

이미지를 쉽게 적용할 수 있는 방법은 N-MET을 받아서 사용할 수 있으며, 그 외에 css sprite를 자동으로 생성해 주는 사이트를 이용해서도 쉽게 적용할 수 있습니다.


Recent Comments