📌 Image Sprite
여러개의 이미지를 렌더링 하게 되면 속도면에서 효율성이 떨어지기 때문에 여러개의 이미지를 하나로 합쳐서 시간을 단축할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
border: 1px solid black;
display: block;
text-decoration: none;
text-align: center;
padding: 10px 0;
width: 400px;
margin: 10px;
border-radius: 10px;
}
a::before {
display: block;
width: 22px;
height: 22px;
background-color: black;
content: "";
float: left;
margin-left: 10px;
}
.google::before {
background: url(images/css_sprites.png) -10px -52px;
}
.facebook::before {
width: 13px;
height: 24px;
background: url(images/css_sprites.png) -94px -10px;
}
.naver::before {
background: url(images/css_sprites.png) -10px -10px;
}
.kakao::before {
background: url(images/css_sprites.png) -52px -10px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a class="google" href="">구글</a>
</li>
<li>
<a class="naver" href="">네이버</a>
</li>
<li>
<a class="facebook" href="">페이스북</a>
</li>
<li>
<a class="kakao" href="">카카오</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image-sprite</title>
<style>
a {
border: 1px solid red;
display: block;
text-decoration: none;
width: 400px;
padding: 10px;
text-align: center;
margin-bottom: 20px;
border-radius: 15px;
overflow: hidden;
line-height: 30px;
}
a::before {
display: block;
content: "";
width: 30px;
height: 30px;
float: left;
background-image: url(images/css_sprites2.png);
background-size: 60px 60px;
}
.naver::before {
background-position: left bottom;
}
.kakao::before {
background-position: right top;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a class="google" href="">구글</a>
</li>
<li>
<a class="naver" href="">네이버</a>
</li>
<li>
<a class="kakao" href="">카카오</a>
</li>
</ul>
</div>
</body>
</html>
안녕하세요. 프론트엔드 개발자 이현섭입니다.