2007/08/21 18:40
[WEB]
YSlow가 공개되면서 '13가지 규칙'에 대해 관심을 가지는 분들이 계실 겁니다.
이 글은 13가지 규칙 중 첫번째인 Make Fewer HTTP Requests에 나와 있는 CSS Sprites에 관한 글입니다.
실례로 Daum의 실시간 이슈 검색어를 가지고 설명을 하겠습니다.
위의 실시간 이슈 검색어를 보면 왼쪽에 1~15까지 번호가 있는데, 이 것을 표현하기 위해 총 15개의 이미지 파일을 사용 하고 있습니다.
이 것을 하나의 이미지로 만들면 총 14번의 HTTP request를 줄이는 효과를 가져올 수 있습니다.(사실 배경 이미지만 깔고 숫자는 텍스트로 표현하는 쪽이 더 좋겠습니다만;;)
이 방식은 왼쪽의 이미지와 같이 15개의 이미지를 하나의 파일로 만들어 놓은 후, CSS의 background-position 속성을 이용하여 브라우저에 원하는 부분만 렌더링을 시켜주는 방식입니다.
Firebug 같은 Firefox의 확장 기능을 이용하여, Daum의 검색 결과 화면에서 Edit > HTML > body Element에 Edit HTML... 기능을 이용하여 아래와 같은 코드를 삽입해 보시면 어떻게 적용이 되는지 간단히 확인하실 수 있습니다.
이 방식을 실제로 사용한다면 아래의 CSS는 좀 다듬을 필요가 있습니다만 이건 어디까지나 예제이므로.. :)
위의 CSS를 보면 한눈에 보이듯이 번호가 증가할 수록 0, -11px, -22px... 등으로 background-position의 마이너스 값이 증가하게 되어 해당 위치부터 브라우저상에 렌더링 되게 되며 height에 의하여 11px만큼만 보여지게 됩니다.
따라서 여러개의 이미지 파일을 가지고 있는 것과 동일한 효과를 얻을 수 있습니다.
덧. http://google.co.kr 에서 사용하고 있는 이미지 애니메이션 효과도 이 방법을 응용한 것입니다.
이 글은 13가지 규칙 중 첫번째인 Make Fewer HTTP Requests에 나와 있는 CSS Sprites에 관한 글입니다.
실례로 Daum의 실시간 이슈 검색어를 가지고 설명을 하겠습니다.
Daum 실시간 이슈 검색어
이 것을 하나의 이미지로 만들면 총 14번의 HTTP request를 줄이는 효과를 가져올 수 있습니다.(사실 배경 이미지만 깔고 숫자는 텍스트로 표현하는 쪽이 더 좋겠습니다만;;)
Firebug 같은 Firefox의 확장 기능을 이용하여, Daum의 검색 결과 화면에서 Edit > HTML > body Element에 Edit HTML... 기능을 이용하여 아래와 같은 코드를 삽입해 보시면 어떻게 적용이 되는지 간단히 확인하실 수 있습니다.
이 방식을 실제로 사용한다면 아래의 CSS는 좀 다듬을 필요가 있습니다만 이건 어디까지나 예제이므로.. :)
<style type="text/css">
#tot_dsrank_b0 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 0; }
#tot_dsrank_b1 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 -11px; }
#tot_dsrank_b2 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 -22px; }
</style>
#tot_dsrank_b0 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 0; }
#tot_dsrank_b1 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 -11px; }
#tot_dsrank_b2 { background:url('http://cfs3.tistory.com/upload_control/download.blog?fhandle=YmxvZzM0QGZzMy50aXN0b3J5LmNvbTovYXR0YWNoLzAvMTguZ2lm') no-repeat; padding-left:15px; height:11px; background-position:0 -22px; }
</style>
위의 CSS를 보면 한눈에 보이듯이 번호가 증가할 수록 0, -11px, -22px... 등으로 background-position의 마이너스 값이 증가하게 되어 해당 위치부터 브라우저상에 렌더링 되게 되며 height에 의하여 11px만큼만 보여지게 됩니다.
따라서 여러개의 이미지 파일을 가지고 있는 것과 동일한 효과를 얻을 수 있습니다.
덧. http://google.co.kr 에서 사용하고 있는 이미지 애니메이션 효과도 이 방법을 응용한 것입니다.
Trackback Address :: http://blog.rsef.net/trackback/44
