Sprite 속성 / Sprite animation 연습
[ Sprite ]
여러개의 이미지 소스를 하나의 이미지로 합친후( 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 )background-position 등의 css속성을 통해 배경이미지를 렌더링하는 방법이다. 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있으나, 이미지 스프라이트를 사용하면 이미지 다운로드에 걸리는 시간과 http요청 수가 감소하고 웹 프론트엔드의 성능을 최적화한다(:
[ Sprite 속성연습에 사용할 배경이미지 첫번째 ]
[ Sprite 속성연습에 사용할 배경이미지 두번째 ]
[ 위에 이미지를 이용하여 sprites로 가져오기 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_sprites로 원하는 이미지 가져오기</title>
<style>
*{margin: 0;
padding: 0;}
div{
width: 321px;
height: 189.5px;
background: url(images/menu.png) -320px 0;
position: absolute;
left: 50%;
margin-left: -160px;
}
div:hover{
background-position: -320px -189.5px;
}
section{
width: 47px;
height: 54px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -150px;
background: url(images/spritessheet.png) no-repeat -54px 0;
}
</style>
</head>
<body>
<div></div>
<section></section>
</body>
</html>
******** 이미지의 시작은 x좌표 : 0, y좌표 : 0 이다.
Image Sprite 중에 오른쪽에 있는 이미지를 보여주고 싶다면 이미지를 왼쪽 바깥쪽으로 당기기위해 x좌표에 마이너스(-) 값을 넣으면 되고, Image Sprite 중에 아래쪽에 있는 이미지를 보여주고 싶다면 이미지를 위쪽 바깥쪽으로 당기기 위해 y좌표에 마이너스(-) 값을 넣으면 된다. 이점만 주의하자~
[ Sprites Animation ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_sprites animation</title>
<style>
*{margin: 0;
padding: 0;}
#frame{
border: 1px solid red;
position: absolute;
top: 200px;
left: 200px;
width: 99.8px;
height: 203px;
overflow: hidden;
}
#film{
border: 1px solid blue;
width: 499px;
height: 203px;
background: url(images/film.png) no-repeat;
animation; video 5s steps(5) 1;
}
@keyframes video{
from{background-position: 0 0}
to{background-position: -499px 0}
#police{
width: 100px;
height: 215px;
border: 1px solid red;
background: url(images/potato1.png);
margin:400px auto;
animation:police .3s steps(3) infinite;
}
@keyframes police{
from{background-position: 0}
to{background-position: -300px 0}
}
</style>
</head>
<body>
<div id="frame">
<div id="film"></div>
</div>
<div id="police"></div>
</body>
</html>반응형
'IT' 카테고리의 다른 글
| 웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition (0) | 2022.07.06 |
|---|---|
| gnb 연습 / navigation bar (0) | 2022.07.05 |
| position : absolute / fixed / relative / static / z-index (0) | 2022.06.30 |
| 상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child (0) | 2022.06.29 |
| 레이아웃 연습하기 / Z 레이아웃 (0) | 2022.06.28 |