다연이네

[days04] 이미지 스프라이트 본문

Web/CSS

[days04] 이미지 스프라이트

　다연　 2020. 12. 8. 13:12
반응형

이미지 스프라이트

 하나의 웹 페이지에 이미지가 많으면 이미지마다 요청해서 가져온다.
 이는 로드하는데 오랜 시간이 걸리고, 서버에 하나하나 이미지를 가지러 가지 때문에 여러번의 요청이 발생한다.
 => 하나의 이미지가 다 들어가있는 것을 잘라서 사용하게 한다. (한번만 요청하도록)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name ="viewport" content ="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
   #navlist{
      position: relative;
   }
   #navlist li{
      position: absolute;
      top: 0;
      
      margin: 0;
      padding: 0;
      
      list-style-type: none;
   }
   
   #navlist li, #navlist a{
      height: 44px;
      width: 43px;
      display: block;
   }
   

 #home {
  left :0;
  background: url(../images/img_navsprites_hover.gif) 0 0;
 }
 #prev {
   left :63px;
  background: url(../images/img_navsprites_hover.gif) -47px 0;
 }
 #next {
   left :129px;
  background : url(../images/img_navsprites_hover.gif) -91px 0;
 }
 
 /* 가상클래스 선택자 */
 #home:hover {
  background-position:  0 -45px;
 }
 #prev:hover {

  background-position:  -47px -45px;
 }
 #next:hover {
  
  background-position :-91px -45px;
 }
 
</style>
</head>
<body>
<h3>이미지 스프라이트</h3>

 <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' 카테고리의 다른 글

[days04] form 입력 양식 만들어보기  (0) 2020.12.08
[days04] 속성 선택자(selector) 사용하기 태그[속성명(기호)속성값]  (0) 2020.12.08
[days04] 반응형 이미지 갤러리 - 수정필요  (0) 2020.12.08
[days03] 타임라인 - 분석해보기  (0) 2020.12.07
[days03] dropdown  (0) 2020.12.07
'Web/CSS' Related Articles more
Comments