반응형 웹 Image Sprite

반응형 웹에서 Image Sprite 사용하기

11월 18, 2014 / BURCHURL

Image Sprite 기능은 이미지 서버 요청 횟수를 줄임으로써, 사이트 성능을 높이는 데 유용하다.

현재는 대부분의 웹에 이  Image Sprite를 쓰고 있다. 하지만, 반응형 웹처럼 이미지의 크기가 유동적으로 변하는 웹사이트에서

Image Sprite를 쓰는 건 상당히 난감해 보인다. 물론, 수십 개의 아이콘을 죽 늘어놓고 쓰기에는 사실 난감하기도 하다.

 

Image Sprite는 아래와 같은 방식으로 작동한다.

1 2 3 4

.imageSprite {     background-image: url(images/sprite.png);     background-position: -50px -200px; }

문제는, px 단위는 반응형 웹에 쓸 수 없다. 반응형 웹은 %로 환산해야 한다.

하지만, 이미지의 크기를 유동적으로 변화시키는 상황에서 이 %를 어떻게 구할 것인가?

만약, 위와 같은 이미지를 반응형 웹에서 Image Sprite로 쓰려면 너무 복잡해져 버려서 그만 Image Sprite와 같은 유용한 기능을 포기하게 될 것이다.

하지만, 아래와 같은 방법을 쓴다면 조금 단순한  Image Sprite를 활용하면서 멋진 반응형 웹사이트를 만들 수 있다.

아래는 필자가 최근에 작업한 사이트의 한 부분이다.

위 이미지의 네비게이션 부분을 Image Sprite로 작업해보자.

먼저, 아래와 같은 이미지를 준비한다.

그리고, html 부분이 아래와 같이 구성되었다면,

1 2 3 4 5 6 7 8 9 10 11

<header id="header">     <nav>        <ul class="navigation">          <li class="st1"><a href="#mobile1" class="selected">Act0를 선점하라!</a></li>          <li class="st2"><a href="#step2">파이터들을 만나라!</a></li>          <li class="st4"><a href="#step4">Act0을 알려라!</a></li>          <li class="st5"><a href="#step5">파티원을 모집하라!</a></li>          <li class="st3"><a href="#step3">레바 SPECIAL WEBTOON</a></li>       </ul>    </nav>  </header>

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#header nav li a {     width: 100%;height: 100%;     background: url(images/m_bg_header_off.png) 0 0 no-repeat;     -webkit-background-size: 500% 200%; background-size: 500% 200%; } #header nav li.st1 a {background-position: 0 0;} #header nav li.st2 a {background-position: 25% 0;} #header nav li.st3 a {background-position: 50% 0;} #header nav li.st4 a {background-position: 75% 0;} #header nav li.st5 a {background-position: 100% 0;} #header nav li.st1 a.selected {background-position: 0 100%;} #header nav li.st2 a.selected {background-position: 25% 100%;} #header nav li.st3 a.selected {background-position: 50% 100%;} #header nav li.st4 a.selected {background-position: 75% 100%;} #header nav li.st5 a.selected {background-position: 100% 100%;}

css 구성은 위와 같다.
먼저, background-size는 아래와 같다.

-webkit-background-size: 500% 200%;

background-size: 500% 200%;

가로로는 이미지 조각이 총 5개이므로, backround의 가로 사이즈는 500%,
세로로는 이미지 조각이 총 2개이므로, backround의 세로 사이즈는 200% 가 된다.

그리고, 각 메뉴별 background-position은 아래의 간단한 공식에 대입만 하면 된다.

background-size: 100/(가로 이미지 조각 개수 -1)+’%’ 100%/(세로 이미지 조각 개수 -1)+’%’

와 같다. 위의 네비게이션에서 두 번째 메뉴인 ‘파이터들을 만나라’ 부분의 backgorund-position은

100/(5-1)+’%’ 100/(2-1)+’%’ 곧,

1	#header nav li.st2 a {background-position: 25% 0;}

와 같다. 간단하지 않은가?
필자의 설명이 부실하다면 아래 사이트를 참고 바란다.
 

 

참고 사이트

http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/

 

 

출처 
bit.ly/3oTEahG