한 개의 이미지로 background-position 옵션을 사용하여 나타낸 것을 볼 수 있다.
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Google</title><style type="text/css"><!--
#svc-tab .bgp-fr {background:transparent url(http://img0.gmodules.com/ig/f/PtlE0-b9r1Q/intl/ALL_kr/tab_sprite_all.gif) 0 0 no-repeat}
#svc-toolbar .bgp-fr, .ttv {background:transparent url(http://img0.gmodules.com/ig/images/korea/product_icons_sprite_02.gif) 0 0 no-repeat}
#prod1 .bgp-fr {background-position:0 0px;}
#prod1:hover {color:#ea0000;}
#prod1-tt .ttl,#prod1-tt .ttdl,#prod1-tt .ttdr {background-color:#ea0000;}
#prod1-tt .ttc {border-color:#ea0000;}
#prod1-tt .ttv {background-position:-364px 0px;}
#prod2 .bgp-fr {background-position:0 -37px;}
#prod2:hover {color:#0d53a4;}
#prod2-tt .ttl,#prod2-tt .ttdl,#prod2-tt .ttdr {background-color:#0d53a4;}
#prod2-tt .ttc {border-color:#0d53a4;}
#prod2-tt .ttv {background-position:-364px -37px;}#prod3 .bgp-fr {background-position:0 -74px;}#prod3:hover {color:#878787;}
#prod3-tt .ttl,#prod3-tt .ttdl,#prod3-tt .ttdr {background-color:#878787;}
#prod3-tt .ttc {border-color:#878787;}
#prod3-tt .ttv {background-position:-364px -74px;}
#prod4 .bgp-fr {background-position:0 -111px;}
#prod4:hover {color:#1da745;}
#prod4-tt .ttl,#prod4-tt .ttdl,#prod4-tt .ttdr {background-color:#1da745;}
#prod4-tt .ttc {border-color:#1da745;}
#prod4-tt .ttv {background-position:-364px -111px;}
#prod5 .bgp-fr {background-position:0 -148px;}
#prod5:hover {color:#9e7eb9;}
#prod5-tt .ttl,#prod5-tt .ttdl,#prod5-tt .ttdr {background-color:#9e7eb9;}
#prod5-tt .ttc {border-color:#9e7eb9;}
#prod5-tt .ttv {background-position:-364px -148px;}
#prod6 .bgp-fr {background-position:0 -185px;}
#prod6:hover {color:#ffb400;}
#prod6-tt .ttl,#prod6-tt .ttdl,#prod6-tt .ttdr {background-color:#ffb400;}#prod6-tt .ttc {border-color:#ffb400;}
#prod6-tt .ttv {background-position:-364px -185px;}
#prod7 .bgp-fr {background-position:0 -222px;}
#prod7:hover {color:#3aa4df;}
#prod7-tt .ttl,#prod7-tt .ttdl,#prod7-tt .ttdr {background-color:#3aa4df;}
#prod7-tt .ttc {border-color:#3aa4df;}
#prod7-tt .ttv {background-position:-364px -222px;}
--></style>
<link rel="stylesheet" href="/ig/f/7SAH4JVXuOQ/intl/ALL_kr/homepage.css" type="text/css"></head><body onload="_KO.init()"><div id="wrapper"><div id="guser"><a href="/url?sa=p&pref=ig&pval=3&q=/ig">iGoogle</a><span class="separator">|</span><a href="https://www.google.com/accounts/Login?continue=http://www.google.co.kr/&hl=ko">濡쒓렇??/a></div><a href="/doodle15.html"><img src="/files/attach/images/20240/363/162/a73a5eb24d05a47de744fcfca308fd44.gif" width="276" height="163" border="0" alt="2008?????대룞??蹂대궡二쇱떊 ?щ옉怨??깆썝??媛먯궗?쒕┰?덈떎." title="2008?????대룞??蹂대궡二쇱떊 ?щ옉怨??깆썝??媛먯궗?쒕┰?덈떎."/></a><form action="http://www.google.co.kr/search" name="f" ><script><!--
function qs(el) {if (window.RegExp && window.encodeURIComponent) {var ue=el.href;var qe=encodeURIComponent(document.f.q.value);if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;}
// -->
</script>
<table id="svc-tab" class="bgp" cellpadding="3" cellspacing="2" border="0">
<tr>
<td id="svc-tab0">
<span class="bgp-fr"></span><span><strong>?밸Ц??/strong></span>
</td>
<td class="separator svc-tab_noimg">
|
</td>
<td>
<a id="svc-tab1" href="http://images.google.co.kr/imghp?ie=UTF-8&oe=UTF-8&hl=ko&tab=wi" onclick="return qs(this)"><span class="bgp-fr"></span><span>?대?吏</span></a>
</td>
<td class="separator svc-tab_noimg">
|
</td>
<td>
<a id="svc-tab2" href="http://news.google.co.kr/nwshp?ie=UTF-8&oe=UTF-8&hl=ko&tab=wn" onclick="return qs(this)"><span class="bgp-fr"></span><span>?댁뒪</span></a>
</td>
<td class="separator svc-tab_noimg">
|
</td>
<td>
<a id="svc-tab3" href="http://www.google.co.kr/prdhp?ie=UTF-8&oe=UTF-8&hl=ko&tab=wf" onclick="return qs(this)"><span class="bgp-fr"></span><span>?쇳븨</span></a>
</td>
<td class="separator svc-tab_noimg">
|
</td>
<td>
<a id="svc-tab4" href="http://video.google.co.kr/?ie=UTF-8&oe=UTF-8&hl=ko&tab=wv" onclick="return qs(this)"><span class="bgp-fr"></span><span>鍮꾨뵒??/span></a>
</td>
<td class="separator svc-tab_noimg">
|
</td>
<td>
<a href="/options/"><span class="svc-tab_noimg">?붾낫湲?»</span></a>
</td>
</tr>
</table><div id="search_form"><input name="complete" type="hidden" value="1" /><input name="hl" type="hidden" value="ko" /><div><input autocomplete="off" name="q" id="q" type="text" maxlength="2048" size="55" title="Google 寃?? value="" /></div><input name="btnG" type="submit" class="search_button" value="Google 寃?? /><input name="btnI" type="submit" class="search_button" value="I'm Feeling Lucky" /></div><div id="search_options"><span id="search_scope" ><input type="radio" name="lr" value="" checked id="all" /><label for="all" >?꾩껜 ??/label><input type="radio" name="lr" value="lang_ko" id="il" /><label for="il">?쒓뎅????/label></span><a href="http://www.google.co.kr/advanced_search?hl=ko">怨좉툒寃??/a><span class="separator">|</span><a href="http://www.google.co.kr/preferences?hl=ko">?섍꼍?ㅼ젙</a><span class="separator">|</span><a href="http://www.google.co.kr/language_tools?hl=ko">?몄뼱?꾧뎄</a></div></form>
<table id="svc-toolbar" class="bgp" cellpadding="3" cellspacing="2" border="0">
<tr>
<td>
<a id="prod1" href="http://www.google.com/url?ct=pro&source=kwh&cd=1&q=http%3A//mail.google.com/mail%3Fhl%3Dko" title="?ㅽ뙵?녿뒗 ??⑸웾 ?대찓??><span class="bgp-fr"></span><span>Gmail</span></a>
</td>
<td>
<a id="prod2" href="http://www.google.com/url?ct=pro&source=kwh&cd=2&q=http%3A//www.google.com/calendar/render%3Fhl%3Dko" title="怨듭쑀媛 ?ъ슫 ???쇱젙愿由?><span class="bgp-fr"></span><span>罹섎┛??/span></a>
</td>
<td>
<a id="prod3" href="http://www.google.com/url?ct=pro&source=kwh&cd=3&q=http%3A//toolbar.google.com/intl/ko/" title="釉뚮씪?곗??먯꽌 利먭린??援ш?"><span class="bgp-fr"></span><span>?대컮</span></a>
</td>
<td>
<a id="prod4" href="http://www.google.com/url?ct=pro&source=kwh&cd=4&q=http%3A//desktop.google.co.kr/" title="?쎄퀬 鍮좊Ⅸ ??而댄벂??寃??><span class="bgp-fr"></span><span>?곗뒪?ы넲</span></a>
</td>
<td>
<a id="prod5" href="http://www.google.com/url?ct=pro&source=kwh&cd=5&q=http%3A//picasa.google.co.kr/" title="?몄쭛怨?怨듭쑀媛 ?ъ슫 ?ы넗?⑤쾾"><span class="bgp-fr"></span><span>Picasa</span></a>
</td>
<td>
<a id="prod6" href="http://www.google.com/url?ct=pro&source=kwh&cd=6&q=http%3A//kr.youtube.com/" title="?멸퀎?곸씤 ?숈쁺??而ㅻ??덊떚"><span class="bgp-fr"></span><span>YouTube</span></a>
</td>
<td>
<a id="prod7" href="http://www.google.com/url?ct=pro&source=kwh&cd=7&q=http%3A//www.google.com/chrome/%3Fhl%3Dko" title="Google??李⑥꽭? ??釉뚮씪?곗?"><span class="bgp-fr"></span><span>?щ＼</span></a>
</td>
</tr>
</table><div id="tt" class="tt" style="display:none"><div class="ttl"></div><div class="ttc"><div class="ttdc"><div class="ttdl"></div><div class="ttdr"></div></div><div class="tt-text"></div><div class="ttdc"><div class="ttdl"></div><div class="ttdr"></div></div></div><div class="ttl"></div><div class="ttvc"><div class="ttv"></div></div></div><div id="footer"><div id="footer_links"><a href="/ads/">愿묎퀬 ?꾨줈洹몃옩</a><span class="separator">|</span><a href="/jobs/">梨꾩슜?뺣낫</a><span class="separator">|</span><a href="/about.html">Google ?뺣낫</a><span class="separator">|</span><a href="http://www.google.com/ncr">Google.com in English</a></div><div id="copyright">©2008 - <a href="http://www.google.com/intl/ko/privacy.html">媛쒖씤?뺣낫</a></div></div></div><script src="/ig/f/jb-fdFEykLs/intl/ALL_kr/homepage.js"></script></body><script>if (!window.google) { window.google={}; }if (!window.google.kHL) { window.google.kHL='ko'; }window.setTimeout('window.google.ac.install(document.f,document.f.q,"",true,"?リ린",true,"","")',100);</script></html>
