[ CSS ] Image Sprites

seonday·2022년 11월 1일

HTML/CSS

목록 보기

8/8

👇 복습하고 넘어가기

"이미지와 배경"

💡 웹페이지에 이미지를 추가하는 2가지 방법

HTML 📖 < img > 태그로 이미지 넣기
-포털사이트에서 이미지 검색에 노출이 필요한 경우
-웹페이지에서 중요한 역할을 하는 경우
✨ 이미지가 로드 되지 않았을때, alt 속성 안의 값으로 대체 표현됨(background-image는 alt 속성이 없다.❌)
<img src="" alt=""/>
-프린트를 했을 때 출력이 되어야 하는 경우

CSS 📖 background-image 속성으로 이미지 넣기
-이미지 위로 텍스트가 들어갈 경우
-단순 디자인적 요소일 경우
-반복되는 이미지인 경우(ex. 아이콘)
-✨ 웹페이지 로딩 속도와 관련있는 경우 -> "Image Sprites"

👉 웹페이지에서 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다

사용 이미지, 웹 브라우저 요청수 증가 = 긴 로딩 시간 😡

✅ Image Sprites

여러 개의 이미지를 하나의 이미지로 합쳐 관리하는 이미지

사용 이미지, 웹 브라우저 요청수 감소 = 짧은 로딩 시간 😌

이 방법을 사용하면 < img >를 사용했을 때 보다 서버 요청 수를 줄여 웹페이지의 로딩 시간을 단축해주는 효과가 있다 또한, 몇개의 스프라이트 이미지만 관리하면 되기 때문에 유지보수 관리 측면에서도 매우 간편하다

📌 Image Sprites 연습해보기

HTML>
<div class="fullImg"></div>

CSS>
div {
      width: 360px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }

💡 마리오만 보여주기

HTML>
<div class="mario"></div>

CSS>
div {
      width: 180px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }
    
.mario {
      background-position: 0px 0px; /* default값, 생략 가능*/
    }

마리오의 경우에는 보여지는 컨테이너인 div의 사이즈만 조절해도 루이지가 가려져서 background-position 속성을 사용할 필요는 없어 기본값인 0px, 0px로 세팅해두었다

💡 루이지만 보여주기

HTML>
<div class="luigi"></div>

CSS>
div {
      width: 180px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }
    
.luigi {
      background-position: -180px 0px;
    }

background-position 참고
background-position-CSS | MDN

background-position속성을 사용해 컨테이너인 div 사이즈 안에서 배경 이미지만 이동시켜 원하는 부분만 보이게 할 수 있다

개인적으로 포토샵에서 레이어 마스크 기능과 비슷한 느낌?

아직 익숙치 않아서 그런지, 처음엔 좌표찾느라 진땀 좀 뺐다. 더 복잡한 것 같은 느낌도 들었는데, 다뤄야하는 소스들이 많아지게 되면 직접 링크를 지정하는 방법보다 스프라이트 기법이 유지보수 측면에서 더 효율적인 방법인 듯 하다 !

📌 Image Sprites 사용시 주의할 점

❗️< img > 가 아닌 background-image로 처리되므로 alt속성을 사용할 수 없다 !
❗️이미지 개수가 늘어나면 스프라이트 자체의 용량도 커진다는 점 !
❗️일부 이미지 또는 로고 등의 수정이 필요할 시 유지보수가 까다롭다는 점 !