CSS: 스프라이트 이미지 적용하기

html에서 이미지를 이용하는 경우는,

image를 직접 연결해주는 것과,

background를 이용하는 것이 있다.

 

관리자가 바꿔야하는 이미지의 경우에는 image로 적용하고,

사이트를 만들때 필요한 이미지는 background에 넣는다. (바꿀필요가 별로 없는 것)

 

css에서는,

background: url(~.jpg) no-repeat;

를 이용하여 이미지를 적용시키고,

 

background-position: -30px -39px;

이걸로 x축과 y축의 좌표를 설정해준다.

 

 

---

html이 이럴때, 

<div class="wrap">
	<div class="left sprite"></div>
	<div class="right sprite"></div>
</div>

 

css에서는 이렇게 적용할 수 있다.

<style>
      .sprite {
        display: inline-block;
        background: url(sprite_practice.jpg) no-repeat; /* 이미지 적용 */
        width: 39px; /* 이미지 크기 */
        height: 39px; /* 이미지 크기 */
      }
      .left {
        border: 2px solid red;
        background-position: -30px -39px; /* 좌표 설정 */
      }
      .right {
        border: 2px solid blue;
        background-position: -89px -39px; /* 좌표 설정 */
      }
</style>

 

 

 

좌표는 이미지를 간편하게 자를수있는 사이트도 있는데 까먹었다..

일단 포토샵으로 할때는, 

 

 

 

a의 좌표 -> 빨간영역의 좌표만큼 -(마이너스) -> -30px -39px

b의 좌표 -> 파란영역의 좌표만큼 -(마이너스) -> -89px -39px

 

로 적용할 수 있다.

 

적용결과는 다음과 같다.