[TIL-8]

da.circle·2022년 9월 21일

CSS

TIL

목록 보기

8/44

CSS 선택자

CSS선택자 포스트 바로가기↗

Image Sprites(이미지 스프라이트)

한 파일에 모든 이미지를 담아서 위치를 조정하여 사용한다.

장점

웹 성능이 좋아진다 : 서버에 이미지를 요청할 때 이미지 하나만 요청하면 된다.
이미지를 서버에서 가져올 때 깜빡임이 없다(이미 가져온 한장만 사용하면 된다).

단점

디자이너와 소통이 필요하다.
이미지가 하나만 수정되면 파일 자체가 변경되어야 한다.
px단위로 정확하게 이미지를 관리해야 한다.

연습

기준은 왼쪽 상단이 0px, 0px이며 오른쪽 아래로 갈수록 +가 된다.
div등으로 화면에 구멍을 만들고 그 안에서 저 이미지를 움직이는 느낌.
참고)w3schools_css_image_sprites

위의 w3schools링크에서 가져온 사진이다.

이 사진을 background-position 속성을 이용해서 각 그림을 분리해보자.

<div class="home"></div>
<div class="left"></div>
<div class="right"></div>

집 모양 가져오기

.home {
  background: url("https://www.w3schools.com/css/img_navsprites.gif");
  width: 46px;
  height: 44px;
  background-position: 0px 0px;
  border: 1px solid black;
}

왼쪽 화살표 모양 가져오기

.left {
  background: url("https://www.w3schools.com/css/img_navsprites.gif");
  width: 45px;
  height: 44px;
  background-position: -46px 0px;
  border: 1px solid black;
}

오른쪽 화살표 모양 가져오기

.right {
  background: url("https://www.w3schools.com/css/img_navsprites.gif");
  width: 42px;
  height: 44px;
  background-position: -92px 0px;
  border: 1px solid black;
}