블로그 로딩 속도 UP! (2) - CSS Sprite 사용으로 HTTP 요청 줄이기
2011. 3. 30. 03:45ㆍIT/Tistory Tips
글을 읽기 전에...
이 게시물에서는 태그 및 CSS에 대한 기본적인 이해가 있다는 바탕에 개별 이미지를 사용하던 방법을 CSS Sprite를 사용하는 방법으로 전환하는 내용만 간략히 다룰 것입니다. 각 태그 및 CSS 속성에 대한 설명은 생략합니다.
이 게시물에서는 태그 및 CSS에 대한 기본적인 이해가 있다는 바탕에 개별 이미지를 사용하던 방법을 CSS Sprite를 사용하는 방법으로 전환하는 내용만 간략히 다룰 것입니다. 각 태그 및 CSS 속성에 대한 설명은 생략합니다.
홈페이지나 블로그 스킨을 구성하다 보면 이미지를 많이 사용하게 된다. 상단의 블로그 메뉴, 사이드 바, 검색 창, 각종 링크 등 많은 이미지를 사용하다 보면 각 이미지를 불러오기 위해 여러 번 HTTP 서버에 요청한다. 10개의 이미지를 사용하면 그 페이지를 정상적으로 표시하기 위해 10번 파일을 내려받는다. 이미지를 사용하지 않으면 그만큼 웹페이지 로딩 시간이 단축되겠지만, 이미지를 꼭 사용해야 할 상황도 있다. 이럴 때 웹 요청을 줄이는 방법이 CSS Sprite다.
CSS Sprite의 개념은 아주 간단하다. 만약 4개의 이미지를 사용해야 할 때 4개의 이미지를 하나로 합친 다음 필요한 부분에 CSS에서 각 이미지 위치를 지정해서 불러오는 방식이다. CSS 중 background-position이라는 속성으로 사용할 이미지의 가로, 세로 위치를 지정하기만 하면 된다.
author1.png | ▶ | sprite.png | ||
author2.png | ||||
home1.png | ||||
home2.png |
예를 들어서 살펴보자. 네 개의 이미지가 있다. 진한 author와 Home, 연한 author와 Home. author와 Home에 각각 /'pəlp/ 블로그로 링크를 거는데 마우스를 올리면 연한 이미지가 진하게 바뀌도록 지정할 것이다. 만약 이 이미지를 세로로 합쳐서 오른쪽과 같이 만든 다음 하나의 이미지로 각 링크의 이미지를 지정한다면 어떻게 될까? 처음에 4개의 이미지를 사용하던 것을 하나의 이미지로 적용하면 네 번 나눠서 이미지를 내려받던 것이 한 번만 받게 되니 웹 요청이 1/4로 줄어든다.
그럼 CSS Sprite를 위한 이미지를 만들어보자. 먼저 합칠 개별 이미지를 선택한 다음 아래의 웹사이트 중 하나를 방문한다.
Site 1 : ▶ spritegen.website-performance.org 방문하기
Site 2 : ▶ csssprites.com 방문하기
이제 준비는 끝났다. 내려받은 파일과 background-position을 사용해서 실제로 CSS Sprite를 적용해보자. 예제로 링크를 연결하는 a 태그에 배경을 지정할 것이다. 보통 일반 이미지로 a 태그에 링크를 걸 땐 아래와 같이 사용한다. a 태그에 class를 지정하고 CSS에서 해당 클래스에 background와 display:block, 너비, 높이 속성을 지정한다. 결과는 아래와 같다.
<예제 1>
이번엔 CSS Sprite를 사용해서 링크 이미지에 마우스를 올렸을 때 진한 이미지가 연하게 바뀌는 것을 적용해보자. 앞에서 나온 background-position을 사용한다. 적용하는 방법은 다음과 같다.
<예제 2>
위와 같은 방식으로 배경 이미지를 사용하는 태그에 CSS Sprite를 적용할 수 있다. 이번엔 여러 개의 링크에 일괄적으로 CSS Sprite를 사용해보자.
<예제 3>
태그 및 CSS |
<div class="ex_css_a"> <a href="http://circlash.tistory.com" title="블로그 대문으로 이동하기" class="ex1" target="_blank"></a> <a href="http://circlash.tistory.com" title="블로그 대문으로 이동하기" class="ex2" target="_blank"></a> </div> <style type="text/css"> .ex_css_a a{background:url(http://bit.ly/fMDiyI);margin:10px;display:inline-block;width:60px;height:18px;} a.ex1{background-position:0 0;} a.ex1:hover{background-position:0 -18px;} a.ex2{background-position:0 -36px;} a.ex2:hover{background-position:0 -54px;} </style> |
결과 |
실제 적용 모습 ▼ |
일괄적으로 적용할 땐 .ex_css_a a { } 부분처럼 전체 영역(div class="ex_css_a")에 있는 모든 링크에 배경 이미지, display:block (또는 가로로 배열하려면 display:inline-block), 너비, 높이를 먼저 지정한다. 그 뒤에 개별 링크의 기본 배경(a.ex1, a.ex2)과 마우스를 올렸을 때 바뀔 배경(a.ex1:hover, a.ex2:hover)에 background-position 속성으로 이미지의 가로, 세로 시작 위치를 지정한다.
CSS 스프라이트는 Google 등 유명한 포털 사이트나 다른 대형 사이트 대부분에서 메뉴나 아이콘을 구성할 때 사용한다. 작은 이미지를 여러 개 사용하는 개인 웹사이트나 블로그 스킨에 사용하면 웹 요청이 줄어 페이지 로딩 시간을 줄일 수 있다. 또 css의 background 속성을 사용할 수 있는 거의 모든 태그에 사용할 수 있다는 점도 장점이다.