이미지 스프라이트(image sprite) 사용하기 css

이미지 스프라이트 image sprite

여러 이미지들이 합쳐져있는 모습들을 본적이 있을 것이다.

이미지를 넣을 때 하나의 이미지를 여러장 넣는것보다

하나의 이미지를 넣고 그 이미지의 position값을 통해서 나타낼 수 있다.

 

  .icon {
    background-image: url("이미지 주소");
    background-size: 이미지 사이즈;
    display: inline-block;
    width: 가로 크기;
    height: 세로 크기;
    background-position: 이미지 위치;
  }

 

- 하나의 이미지 파일만 관리하기 때문에 관리대상 및 유지보수에도 유리하다.

- 여러 아이콘들을 사용할 때 사용하기 좋다.