CSS Sprites

ÇÑÀåÀÇ À̹ÌÁö¿¡ ¿©·¯°³ÀÇ ¾ÆÀÌÄÜ À̹ÌÁö¸¦ ³Ö¾î ³õ°í »ç¿ëÇÒ¼ö ÀÖ´Â ¹æ¹ý¿¡ ´ëÇؼ­ ¾Ë¾Æ º¸ÀÚ.

´ÙÀ½°ú °°ÀÌ test2.png¶ó´Â ÇÑÀåÀÇ À̹ÌÁö¿¡ 4°³ÀÇ ¾ÆÀÌÄÜÀÌ ÀÖ´Ù.



Ãâ·Â °á°ú¸¦ ¸ÕÀú º¸ÀÚ.



  3¹ø ¾ÆÀÌÄÜÀ» Ãâ·ÂÇÏ´Â "id #three" CSS¸¦ ¸ÕÀú º¸ÀÚ.

    #three {
    position: absolute;
    left: 300px;
    top: 600px; 
    width: 200px;
    height: 100px;   
    background: url(img/test2.png) no-repeat;
    background-position: 0px -100px;
    transform: scale(2,2);
    transform-origin: 0% 0%;   
    }

1. ±âº» À̹ÌÁö Ç¥½Ã

absolute´Â ºÎ¸ð°¡ ÀÖÀ¸¸é ºÎ¸ðÀÇ ¿µÇâÀ» ¹Þ´Â´Ù.
position: absolute;

xÀ§Ä¡ 300px, ¼¼·Î À§Ä¡ 600 À§Ä¡¸¦ Áß½ÉÀ¸·Î ±×¸°´Ù.
left: 300px;
top: 600px; 

±×¸± ´ë»óÀÇ Æø°ú ³ôÀ̸¦ °áÁ¤ÇÑ´Ù.
±×¸² ¼Ò½ºÀÇ Æø°ú ³ôÀ̵µ ÁöÁ¤ÇÏ´Â ¿ªÇÒÀ» ÇÑ´Ù.
width: 200px;
height: 100px;   

À̹ÌÁö ¼Ò½ºÀÇ url ¼Ò½º¿Í ºñ¹Ýº¹À» ÁöÁ¤ÇÑ´Ù.
background: url(img/test2.png) no-repeat;


2. À̹ÌÁö ¼Ò½º¿¡¼­ ¿øÇÏ´Â À§Ä¡ ÁöÁ¤Çϱâ

À½¼ö·Î ÁöÁ¤Çϸé À̹ÌÁö ¼Ò½ºÀÇ À§Ä¡¸¦ ³ªÅ¸³ª°Ô µÈ´Ù.
À̹ÌÁöÀÇ À§Ä¡¿¡¼­ À§¿¡¼­ ÁöÁ¤ÇÑ width, height¸¸Å­ ±×¸®°Ô µÈ´Ù.
background-position: 0px -100px;

3. À̹ÌÁö ½ºÆ®·¹Äª Çϱâ

È­¸é¿¡ Ãâ·ÂÇÏ´Â width, height¿Í À̹ÌÁö ¼Ò½ºÀÇ width, height°¡ µ¿ÀÏÇϸé À̹ÌÁö ½ºÆ®·¹ÄªÀÌ ÇÊ¿ä ¾ø´Ù.
À̹ÌÁö transform: scale ¸í·ÉÀ» À̹ÌÁö¸¦ ´ÃÀÌ°í ÁÙÀϼö ÀÖ´Ù.
transform: scale(2,2);

À̹ÌÁö¸¦ ½ºÄÉÀϸµ ÇÒ¶§ Á᫐ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù.
transform-origin: 0% 0%;   

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
    .sprite {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    }

    #pone {
    position: absolute;
    left:300px;
    top:300px;
    width: 600px;
    height: 300px;
    margin: -1;
    background-color: red;
    }

    #one {
    position: absolute;
    left:0px;
    top:0px;
    width: 200px;
    height: 100px;
    background: url(img/test2.png) no-repeat 0px 0px;
    transform: scale(2, 2);
    transform-origin: 0% 0%;
    }   

    #two {
    position: absolute;
    left: 1000px;
    top: 300px; 
    width: 200px;
    height: 100px;   
    background: url(img/test2.png) no-repeat -200px 0px;
    }

    #three {
    position: absolute;
    left: 300px;
    top: 600px; 
    width: 200px;
    height: 100px;   
    background: url(img/test2.png) no-repeat;
    background-position: 0px -100px;
    transform: scale(2,2);
    transform-origin: 0% 0%;   
    }

    #four {
    position: absolute;
    left: 1000px;
    top: 600px;   
    width: 200px;
    height: 100px;   
    background: url(img/test2.png) no-repeat;
    background-position: -200px -100px;
    }

</style>
</head>

<body bgcolor="#E6E6FA">
<div id='pone'>
<div class="sprite" id="one">1.this is a test. </div>
</div>
<div class="sprite" id="two">2.this is a test. </div>
<div class="sprite" id="three">3.this is a test. </div>
<div class="sprite" id="four">4.this is a test. </div>

<script>
function onClick() {

}
</script>

<script> (function() {
//document.getElementById("startId").addEventListener("click", onclick);
})();
</script>
</body>
</html>

CSS ½ºÇÁ¶óÀÌÆ® Å×½ºÆ®


Âü°í)
https://medium.com/guleum/½ºÇÁ¶óÀÌÆ®-±â¹ý-css-sprites-½±°Ô-Àû¿ëÇϱâ-842d870bd433
http://nuli.navercorp.com/sharing/fe/nmet