-
이미지 스프라이트(Image Sprite)HTML·CSS 2022. 2. 15. 18:23
이미지 스프라이트(Image Sprite)란?
여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것웹 브라우저가 서버에 요청하는 이미지가 많으면 많을 수록 웹 페이지 로딩이 오래걸린다.
이미지 스프라이트를 사용하면 단 하나의 이미지 요청으로 줄일 수 있고, 파일 관리도 간편해진다.
사용할 스프라이트 이미지↓
<!DOCTYPE html> <html lang="en"> <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"> <link rel='stylesheet' type='text/css' media='screen' href='/css/sprite.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Sprite</title> </head> <body> <div class="title"> <div class="ori_txt">원본이미지(클릭)</div> <img class="ori_img" src="/img/img_sprite.png"> </div> <div class="character"> <div class="c c1"></div> <div class="c c2"></div> <div class="c c3"></div> <div class="c c4"></div> </div> </body> </html>/* 기본 설정 */ .character .c { display: inline-block; width: 424px; height: 523px; border: 1px solid red; background: url('/img/img_sprite.png') no-repeat; } /* 위치변경 */ .character .c1 { background-position: -0px -35px; } .character .c2 { background-position: -956px -35px; } .character .c3 { background-position: -479px -35px; } .character .c4 { background-position: -7px -625px; }-github
https://github.com/seungzzang0326/img_sprite
'HTML·CSS' 카테고리의 다른 글
id/class/name의 차이점 (0) 2021.12.30