Sprite

2013년 5월 25일 (토) 01:02 판

이 틀은 시트로 된 스프라이트 이미지를 만듭니다. 보통 HTTP연결 총량을 줄이기 위해서 조그만한 이미지들을 한 페이지에 띄울 때 사용됩니다.

{{Sprite
|pos=1
|align=text-top
|image=BlockCSS.png
|link=잔디 블록
|size=16
|sheetsize=256
}}

결과:

변수	기능	디폴트 값
`pos`	`size`와 `sheetsize`에 따른 스프라이트의 목록의 위치를 당담합니다.(왼쪽에서 오른쪽으로, 좌측 상단에서부터 시작합니다.)	1
`align`	vertical alignment의 이미지를 텍스트로 설정합니다.	middle
`image`	접두사 없는 스프라이트 시트(sheet) 이미지입니다.	BlockCSS.png
`link`	스프라이트에 링크를 만듭니다.	잔디 블록
`size`	가로와 세로가 스프라이트의 픽셀과 똑같은 사이즈를 갖습니다.	16
`sheetsize`	픽셀로 시트(sheet)의 전체 사이즈를 만듭니다. 반드시 `size`의 배수가 되야 합니다.	256

@@ 1번째 줄: / 1번째 줄: @@
+<includeonly><span class="sprite" style="{{
-<includeonly><div style="position: relative; height: {{{size|16}}}px; width: {{{size|16}}}px; overflow: hidden; display: inline-block; vertical-align: {{{align|middle}}};"><div style="position: absolute; height: {{{sheetsize|256}}}px; width: {{{sheetsize|256}}}px; {{Sprite/pos|{{{pos|1}}}|{{{size|16}}}|{{{sheetsize|256}}}}}">[[File:{{{image|BlockCSS.png}}}|link={{{link|}}}]]</div></div></includeonly><noinclude>
+#ifeq: {{{size|16}}} | 16 || height: {{{size}}}px; width: {{{size}}}px; }} {{
+#if: {{{align|}}} | vertical-align: {{{align}}} }}"><span style="{{
+#ifeq: {{{sheetsize|256}}} | 256 || height: {{{sheetsize}}}px; width: {{{sheetsize}}}px; }} {{Sprite/pos|{{{pos|1}}}|{{{size|16}}}|{{{sheetsize|256}}}}}">[[File:{{{image|BlockCSS.png}}}|link={{{link|}}}]]</span></span></includeonly><noinclude>
 {{/doc}}
-[[Category:Templates|S]][[fr:Modèle:Sprite]]
+[[Category:Sprite templates]][[fr:Modèle:Sprite]]
 </noinclude>