CSS - 이미지 스프라이트

See the Pen 이미지 스프라이트 by nilgi (@nilgi) on CodePen.

 

이미지 스프라이트는 이미지 모음에서 원하는 부분만 화면에 표시하는 방법이다. 이는 여러 이미지를 불러오지 않기 때문에 빠른 로딩에 유리하다.

 

▲ 티스토리에도 이미지 스프라이트를 사용하고 있다. 이렇게 이미지 하나에 여러 이미지를 담아 원하는 부분만 표시하는 거다.

 

▲ 위 실습 페이지의 이미지도 왼쪽, 오른쪽, 마우스 오버 왼쪽, 오른쪽 4개가 아니라 하나의 이미지에 다 있는거다.

 

• background: url('이미주 조소') 0px 0px; / 이미지가 시작하는 왼쪽px 상단px;

이미지를 만들 때 각 부분의 시작점을 기록해두면 아주 편하다.