ÇÑÀåÀÇ À̹ÌÁö¿¡ ¿©·¯°³ÀÇ ¾ÆÀÌÄÜ À̹ÌÁö¸¦ ³Ö¾î ³õ°í »ç¿ëÇÒ¼ö ÀÖ´Â ¹æ¹ý¿¡ ´ëÇؼ ¾Ë¾Æ º¸ÀÚ.
´ÙÀ½°ú °°ÀÌ 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
|