Jam's story

[CSS] 이미지 스프라이트 - 아이콘 본문

WEB/CSS

[CSS] 이미지 스프라이트 - 아이콘

애플쩀 2022. 5. 25. 12:39

이미지 스프라이트: 단일 이미지에 넣은 이미지 모음 
이미지가 많이 웹 로드할때 오랜 시간이 걸린다. 성능저하 

서버 이미지 가지러 여러번 요청x -성능향상

 

포인트

/* 왼족으로 47px만큼 밀었다.  */
background: url("../images/img_navsprites_hover.gif") -47px 0;

왼쪽으로 91px 아래로 45px 밀었다. 
background: url("../images/img_navsprites_hover.gif") -91px -45px;

 

 

전체코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#navlist{
/* 부모가 되는 것에 relative를 준다는것은 자식에 대한 기준을 만드는 것  */
position: relative;
}
#navlist li{
position:absolute;
top:0;
list-style-type: none;
}
#navlist li, #navlist a{
height: 44px;
width: 43px;
/* border: 1px solid red; */
display:block;
}

li#home{
left:0;
background: url("../images/img_navsprites_hover.gif");
}
li#prev{
left:63px;
/* 왼족으로 47px만큼 밀었다.  */
background: url("../images/img_navsprites_hover.gif") -47px 0;

}
li#next{
left:129px;
background: url("../images/img_navsprites_hover.gif") -91px 0;
}
li#home:hover{
background: url("../images/img_navsprites_hover.gif")0 -45px;
}
li#prev:hover{
background: url("../images/img_navsprites_hover.gif") -47px -45px;
}
li#next:hover{
background: url("../images/img_navsprites_hover.gif") -91px -45px;
}
</style>
</head>
<body>
<h3>이미지 스프라이트</h3>
<pre>
이미지 스프라이트: 단일 이미지에 넣은 이미지 모음 
이미지가 많이 웹 로드할때 오랜 시간이 걸린다. 성능저하 

</pre>
<!-- ul#navlist>li[id]*3>a[href=#] -->
<ul id="navlist">
	<li id="home"><a href="#"></a></li>
	<li id="prev"><a href="#"></a></li>
	<li id="next"><a href="#"></a></li>
</ul>
</body>
</html>

 

가운데에 마우스를 올리면, 다른이미지(색이 진한 이미지)로 변경

 

 

네이버 클론코딩할 때 아이콘도 이와 같은 방법으로 처리하였다. 

 

 

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 검색창 만들기( 이미지 넣기, 크기늘리기)  (0) 2022.05.25
[CSS]속성선택자  (0) 2022.05.25
[CSS] 반응형 웹+ 이미지 갤러리  (0) 2022.05.25
[CSS] 타임라인  (0) 2022.05.25
[CSS] DropDown  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments