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

웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화 해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법입니다.

원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들 처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수있는 효과를 얻을 수 있다.

1. 본문 h2 아래에 메뉴 추가

      <nav class="ui-menu">
        <ul class="group">
          <li class="ui-home"><a href="#">Home</a></li>
          <li class="ui-profile"><a href="#">Profile</a></li>
          <li class="ui-settings"><a href="#">Settings</a></li>
        </ul>
      </nav>

2. 새 백그라운드 뒤에 CSS 추가

/* End Birds Demo */

/* UI Menu */
.ui-menu ul {
	margin: 0;
	padding: 0;
}

.ui-menu li {
	float: left;
	list-style: none;
	margin-right: 20px;
}

3. 각각의 메뉴에 백그라운드 이미지 추가

.ui-menu a {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url(images/sprites.png);
}

4. 글자 제거

  text-indent: -9999px;
  background-repeat: no-repeat;

5. background-postion: 가로 세로;

아이콘의 사이즈는 50px 50px 이다.

.ui-menu .ui-profile a {
  background-position: 0 -50px;
}

6. :hover

3개 아이콘에 각각 마우스 올렸을때 적용

.ui-menu .ui-home a:hover{
  background-position: -50px 0;
}