[CSS] CSS 스프라이트(CSS Sprites)

스타일로 말해요 pp.244~245에 잘 나와 있다.

문제는 어떻게 쉽게 반복되는 작업에 적용을 해야 하는 가랑 샘플?

검색을 해보니 툴 소개 해주는 블로그가 있었다.

http://bezzera.tistory.com/289

NHN의 개발도구 N-MET에 대한 소개를 하고 있었다.

http://nuli.navercorp.com/sharing/fe/nmet

에서 받으면 된다.

테스트로 작성을 해보자.

CSM Type이라는 게 있는데 선택옵션은 CS-O, CS-O4, CS-E 세 가지가 있다.

차이를 비교해보자.

CS-O

.PrintList_printAll{display:block;overflow:hidden;position:relative;width:65px;height:88px;margin:-1px;padding:1px;font-size:12px}

.PrintList_printAll span{cursor:pointer;display:block;position:absolute;top:1px;left:1px;width:65px;height:88px;background:url(../img/test.png) 0 0 no-repeat}

CS-O4

.PrintList_printAll{display:block;width:65px;height:88px;background:url(../img/test.png) 0 0 no-repeat}

.PrintList_printAll button{overflow:hidden;width:65px;height:88px}

.PrintList_printAll button span{position:relative;z-index:-1}

CS-E

.PrintList_printAll span{display:inline-block;width:65px;height:88px;background:url(../img/PrintList_printAll.png) 0 0 no-repeat}

[ASP.net]

나의 경우에는 CSS스프라이트를 적용했던 것은 버튼이었다.

asp.net에서는 asp:ImageButton이라는 클래스를 이용해서 할 수 있는데, 이는 HTML의 imput type="image"로 렌더링된다.

예)

<asp:ImageButton ID="buttonPrintAll" runat="server" Text="일괄출력" ImageUrl="Images/PrintList_printAll.png" OnClick="buttonPrintAll_Click" />

=>

<input type="image" name="buttonPrintAll" id="buttonPrintAll" Text="일괄출력" src="Images/PrintList_printAll.png" style="border-width:0px;" />

하지만 CSS스프라이트로 넘어오면서 이미지쪽은 CSS쪽에게 넘겨줘야 한다.

내가 찾은 asp:ImageButton의 대안은 asp:LinkButton이다.

<asp:LinkButton ID="buttonPrintAll" runat="server" class="FnPrintAll" OnClick="buttonPrintAll_Click"><span /></asp:LinkButton>

이것은 a 엘리먼트로 렌더링되고 아래와 같다.

<a id="buttonPrintAll" class="FnPrintAll" href="javascript:__doPostBack('buttonPrintAll','')"><span /></a>

또한 asp.net에서 class 속성을 추가 하는 것은 아래와 같다.

buttonPrintAll.Attributes.Add("class", ab.AllowPrintAll ? "FnPrintAllEnabled" : "FnPrintAllDisabled");

장점은?

우선 다운로드 시간이 줄어든다. 단순히 생각했을 때 여러 개의 합이나 각각 하나씩이나 별 차이가 없을 것 같지만 두 가지면에서 차이가 있다.

 각각 다운을 받으면 각각의 HTTP GET 요청을 해야 한다. HTTP 통신은 TCP이기 때문에 TCP handshake를 각각 해야 한다.

 또한 이미지는 압축이라는 것을 하기에 비슷한 이미지 두 개의 합은 다른 이미지 보다 압축할 데이터가 많아지게 된다. 따라서 전체 용량은 줄어든다.

 비교를 해보니 두 이미지의 합은 9,490 바이트였는데 합친 것은 6,026바이트였다. 무려 36.5%나 크기가 줄어들었다.

또한 이미지 깜박거림이 줄어든다. 크롬으로 확인해보니 최적화 때문인지 이벤트(예. 클릭)이 발생하고 나서야 이미지를 받는 것을 알 수 있었다. 따라서 최초 이미지가 로딩될 때 약간 지연에 원인이 된다.

단점으로는?

 결국은 액션이 없을 이미지 까지 페이지 최초 로딩시에 받아야 하기 때문에 로딩시간이 길어질 수 있다.

 또한 해당 이벤트가 없다면 불필요한 데이터까지 받은 셈이니 어떻게 보면 손해일 수 있다.