** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=31Hvgosnwgg&list=PLdwQP35_Nz9drJnPT6_u1ZicS2msRLrUN&index=9
1. Image Sprite를 사용하는 이유
- Sprite(스프라이트)라는 용어는 컴퓨터 그래픽스에서 2차원의 비트맵 이미지나 애니메이션을 합성하는 기술을 의미합니다. 웹, 즉 CSS에서는 여러 개의 이미지를 하나의 이미지로 합쳐서 만들어 놓은 것을 의미합니다.
- Image Sprite를 쓰는 이유는 크게 2가지입니다. 렌더링시간줄이기, 용량줄이기입니다.
1) 렌더링시간 줄이기
- 브라우저는 화면에 구현하는 모든 자원을 서버에 요청하고 불러와서 구현(렌더링)합니다.
- 그래서 코드를 읽으면서 렌더링을 하는데 이미지가 4개가 있다고 볼게요. 한개 읽는 당 0.1초가 걸린다고 보도록 하겠습니다. 그럼 총 0.4초를 들이면 이미지 4개를 모두 읽겠죠?
- 근데 4개 이미지를 하나로 만들었다고 볼게요. 하나로 만들면 용량도 커지기 때문에 당연히 시간은 더 걸립니다. 대신 0.2초 정도가 걸리고 하나니까 총합도 0.2초가 걸린 다는 거죠.
- 그럼 어떤가요? 4개를 불러올 때보다 1/2로 시간이 줄죠? 실제 걸리는 시간은 다르겠지만 렌더링 시간이 훨씬 짧아집니다. 그래도 소스가 많을 수록 더 많은 시간이 줄겠죠? 그래서 Image Sprite를 씁니다.
2) 용량줄이기
- 이번에는 용량으로 설명을 해드리겠습니다.
- 이미지로 보면 훨씬 이해가 잘될거 같아 가져왔습니다.
- 각각의 이미지 용량은 4kb죠? 4개면 16kb입니다.
- 근데 하나의 이미지로 만드니까 9kb인 것 보이죠? 훨씬 용량이 줄어듭니다.
- 너무 큰 이미지들을 붙이는 것은 비합리적이여서 그렇게 사용하지는 않지만 작은 아이콘들은 이렇게 Image Sprite를 쓰는 것이 훨씬 좋습니다.
- 대신 이걸 <img> 태그로 쓸 수는 없겠죠? 각각의 버튼으로 적용해야기 때문에 태그가 아닌 CSS에서 배경이미지로 처리하면 됩니다.
2. Image Sprite - 사용법1
** 사용될 이미지
- 출처 : https://icon-icons.com/
Free Icons PNG, ICO, ICNS and SVG
icon-icons.com
- 이번에는 각각의 버튼에 이미지가 각각 들어간다고 보도록 하겠습니다.
- 근데 이미지가 하나이기 때문에 <img> 태그로 쓰면 안되겠죠?
- 그래서 배경이미지로 처리하고 배경이미지 위치조정을 통해서 제작합니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Image Sprite</title>
<style>
button{
width: 50px; height: 50px;
border: none;
background-color: transparent;
text-indent: -999em;
background-image: url(image_sprite.png);
background-repeat: no-repeat;
}
button:nth-child(1){ background-position: 0 0; }
button:nth-child(2){ background-position: -50px 0; }
button:nth-child(3){ background-position: -100px 0; }
button:nth-child(4){ background-position: -150px 0; }
</style>
</head>
<body>
<button>next</button>
<button>prev</button>
<button>up</button>
<button>down</button>
</body>
</html>- 버튼들에 공통적으로 배경이미지를 처리합니다.
- 그리고 배경이미지 위치 조정을 통해 이미지들이 다 달라보이게 처리합니다.
- 이미지는 한개가 50x50사이즈여서 -50px씩 미루면 됩니다.
- 이걸 보니까 이미지 자체를 잘 제작해야 쉽게 미뤄서 만들겠죠?
## 결과 보기
- 버튼에 각각의 이미지가 잘 들어간 것이 보입니다. 이렇게 작성하는 것이 Image Sprite입니다.
3. Image Sprite - 사용법2
- 이번에는 배경이미지의 위치를 일일이 바꾸면 귀찮기 때문에 이미지를 잘 제작해서 부모/조상 요소에 배경이미지로 넣는 방법을 해보도록 하겠습니다.
** 사용될 이미지
- 출처 : https://icon-icons.com/
Free Icons PNG, ICO, ICNS and SVG
icon-icons.com
** 완성이미지
- 이런 아이콘배너를 제작해보도록 하겠습니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Image Sprite</title>
<style>
/* base */
*{ padding: 0; margin: 0; }
li{ list-style: none; }
a{ text-decoration: none; }
.icon_banner{
width: 1200px; height: 200px;
margin: 0 auto; background-color: beige;
}
.icon_banner ul{
display: flex;
width: 100%; height: 100%;
padding: 15px 0; box-sizing: border-box;
background-image: url(hotel_sprite.png); /* Image Sprite */
background-repeat: no-repeat;
}
.icon_banner li{
flex: 1; height: 100%;
}
.icon_banner a{
display: block;
width: 100%; height: 100%;
padding-top: 140px; box-sizing: border-box;
text-align: center; color: #333;
}
</style>
</head>
<body>
<div class="icon_banner">
<ul>
<li><a href="#">객실안내</a></li>
<li><a href="#">다이닝</a></li>
<li><a href="#">인피니티풀</a></li>
<li><a href="#">룸서비스</a></li>
<li><a href="#">발렛서비스</a></li>
<li><a href="#">세차서비스</a></li>
<li><a href="#">세탁서비스</a></li>
<li><a href="#">금고서비스</a></li>
</ul>
</div>
</body>
</html>- 아까와는 다르게 a태그에 배경이미지를 줘서 각각 배경이미지의 위치를 조절한 것이 아니라, 조상요소인 ul태그에 배경이미지를 줘서 처리를 했습니다.
- 보여지는 결과는 같기 때문에, 이렇게 제작해도 됩니다. 하지만 이미지 간격이나 이미지 위치가 잘 안맞는 경우는 위에서 본 방법으로 각각 배경이미지 위치를 맞추는 것이 좋습니다.
## 결과 보기
- 워낙 이미지를 150px씩 잘 맞춰 작업해서 잘 들어갑니다.
- 하지만 간격이나 이미지 크기가 다르다면 각각 맞추는 것을 추천합니다.
4. CSS 움짤 - 애니메이션 처리
- 움직이는 짤을 움짤이라고 합니다. 보통 gif파일로 작업합니다.
- 하지만 크기가 크거나 선명한 작업시 gif파일은 파일 특성상 깨져보입니다.
- 그래서 CSS 애니메이션을 통해 움짤을 만들어 보겠습니다.
- 이때 줘야 하는 것이 그 이미지의 장면을 각각 다 그려서 Image Sprite로 만드는 겁니다.
** 사용될 이미지
- 출처 : https://icon-icons.com/
Free Icons PNG, ICO, ICNS and SVG
icon-icons.com
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Image Sprite</title>
<style>
#orange{
width: 200px; height: 200px;
background-image: url(orange_sprite.png);
background-repeat: no-repeat;
background-position: 0 0;
animation: move 1s infinite alternate steps(5);
}
@keyframes move{
from{ background-position: 0 0; }
to{ background-position: -1000px 0; }
}
</style>
</head>
<body>
<div id="orange"></div>
</body>
</html>- 이때 #orange 파트에는 한개 이미지 사이즈로 설정을 합니다.
- 그리고 배경이미지로 스프라이트이미지를 줍니다.
- @keyframes 로 애니메이션을 줘서 처음 위치는 좌측상단으로 맞추고, 마지막은 이미지 폭만큼 마이너스처리해줘서 다 지나가게 처리합니다.
- 제일 중요한 파트는 CSS에서 animation: move 1s infinite alternate steps(5); 이파트 중 steps(5); 입니다.
- 위치가 이동되는 장면을 5파트로 나눠 스텝, 즉 단계적으로 보여준다는 뜻입니다. 그래서 옆으로 이동되는 것이 아닌 제자리에서 이미지가 교체되는 거라서 고개를 움직이는 것 처럼 보입니다.
## 결과보기
- 고개를 잘 흔드는 것 보이시죠?
- steps(5)를 주지 않았을 때의 움직임입니다. 그냥 위치가 이동되면 옆으로 이동되는 상황까지 다 보이죠?
- 반드시 steps(5)를 줘야 합니다.
'웹언어 > 웹컨텐츠제작꿀팁-HTMLCSS중급편' 카테고리의 다른 글
| [웹컨텐츠제작꿀팁] 7강 TabBar와 SwitchButton제작 (0) | 2022.09.08 |
|---|---|
| [웹컨텐츠제작꿀팁] 번외편 - 새해맞이 윷놀이 만들기 (0) | 2022.02.02 |
| [웹컨텐츠제작꿀팁] 6강 Board Preview 이렇게 써라! (0) | 2022.02.02 |
| [웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라! (0) | 2021.10.30 |
| [웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라! (2) | 2021.10.19 |
