이미지스프라이트기법으로 코딩해보기

이번연구는 이미지 스프라이트 기법으로 코딩해보는 것입니다.

먼저 이미지 스프라이트 기법에 대한 사전이해가 필요할것입니다.

그리고 이미지 스프라이트 기법은 무엇이며 왜 이렇게 해야하는지도 알아야 할것입니다.

이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아니라 하나의 png 파일에 모아서 코딩하는 방식입니다. 이 기법이 유용하게 활용된 배경에는 모바일 웹이 활성화 되면서 부터 였죠

이미지스프라이트 방식으로 코딩했을시에 기존 코딩방식으로 메모리를 적게 먹어서 좀더 빠르고 가볍게 코딩할수 있다는것이 장점입니다.

이미지 스프라이트 기법으로 코딩하는 방식은 다양하게 존재하며 이번에는 그중 한가지 방식에 대해서 연구해보도록 하겠습니다.

먼저 png 파일을 정리해보록 해요

png 파일을 만들어갑니다. 이때 사이즈는 디자인에 맞게 맞추지만 가급적 가로 간격을 일정하게 만들어주면 코딩하기 쉽습니다. ^^;;

저는 가로 19px 로 일정하게 만들었습니다.

이렇게 다섯개의 아이콘을 만든다음에 png 파일로 저장합니다.

파일명은 마음대로 해도 상관없지만 가급적 의미를 담아서 저장하도록 합시다 ^^

그리고 css를 이렇게 작성하도록 합니다.

ㅇ여기서 문제는 ul 의 li a에 백그라운드 img 를 넣으면 a 영역에서 백그라운드 이미지가 전체가 잡히기 때문에 안된다는 것입니다. ^^;;

그래서 저는 대체 방법으로 span 태그를 추가해서 백그라운드 이미지를 하나를 넣어준다음에

이미지 스프라이트 기법의 핵심인 백그라운드 포지션값으로 위치값을 옮겨 주었어요

이때 팁이 하나가 있는데 vertical-align이나 마진값같은경우는 저렇게 안넣고 별도 css 로 만들어둔다음에

클래스명을 추가하는방식으로 한다면 css 렌더링 시간이 더 짧아지기 때문에 효율적입니다. ^^

ex) v_middle {vertical-align:"middle"}

문제는 이렇게 해주었더니 아이콘의 위치값이 맞지 않습니다. 그래서 png 파일에 있는 이미지 위치를 살짝 수정하니깐 어느정도 정리가 되었습니다.ㅋ

그런데 이게 왠일인가요?

익스7에서 확인해보니까 문제가 생겼습니다. 저런식으로 깨지네요

우리 퍼블리셔 및 코딩하시는분들

익스 7에 맞출 필요 가 전혀 없지만서도 아직까지 우리나라 현실을 고려해봤을때 씁슬하게도 맞춰주는방법을 알아야겠죠.. ㅜㅜ

익스7에서 저렇게 버그가 생기는 이유는

li { }

li a {} 에 동시에 플롯을 주지 않았기 때문입니다.

익스7의 수많은 버그중에 하나죠 ^^;;

그래서 li에도 똑같이 float:left를 주면 버그가 해결됩니다.

[완성형 css]

.videobox {position: absolute; top:88px; left: 24px; width:587px}
.videobox > ul {margin:10px 0 0 0; padding: 0}
.videobox > ul li {float: left}
.videobox > ul li a {float: left; display: block; color: #fff;  padding: 0 0 0 20px}
.videobox > ul li a span.ico01 {background: url(../img/view_icoset.png) no-repeat; display: inline-block; background-position: 0 0; width:19px; height: 19px; vertical-align: middle; margin: 0 5px 0 0}
.videobox > ul li a span.ico02 {background: url(../img/view_icoset.png) no-repeat; display: inline-block; background-position: -19px 0; width:19px; height: 19px; vertical-align: middle; margin: 0 5px 0 0}
.videobox > ul li a span.ico03 {background: url(../img/view_icoset.png) no-repeat; display: inline-block; background-position: -38px 0; width:19px; height: 19px; vertical-align: middle; margin: 0 5px 0 0}
.videobox > ul li a span.ico04 {background: url(../img/view_icoset.png) no-repeat; display: inline-block; background-position: -57px 0; width:19px; height: 19px; vertical-align: middle; margin: 0 5px 0 0}
.videobox > ul li a span.ico05 {background: url(../img/view_icoset.png) no-repeat; display: inline-block; background-position: -76px 0; width:19px; height: 19px; vertical-align: middle; margin: 0 5px 0 0}
.videobox > ul li a:hover,
.videobox > ul li a:focus {text-decoration: none; color: #e6e6e6}
.videobox > p {clear:both; color: #d7d7d7; white-space: nowrap; float: right; font-size: 11px}

[완성형 html]

 <ul>
     <li><a href="#n" title=""><span class="ico01"></span>재생중</a></li>
     <li><a href="#n" title=""><span class="ico02"></span>준비중</a></li>
     <li><a href="#n" title=""><span class="ico03"></span>음소거</a></li>
     <li><a href="#n" title=""><span class="ico04"></span>소리조절</a></li>
     <li><a href="#n" title=""><span class="ico05"></span>전체화면</a></li>
 </ul> 

이미지 스프라이트 기법에서 가장중요한건 이미지를 px기준으로 정확하게 수치만큼 자른다음에 백그라운드 포지셥값으로 수치만큼 위치만 바꿔주는 것입니다. ^^