[코드라이언] CSS Sprite, 이미지를 한곳에 다 모아 써보자 -Day17-

HTML과 CSS를 이용해서 코딩 시 이미지를 넣어야 할 때가 많다.

그때 보통 쓰는 방법이 <img> 태그에 src로 이미지 URL을 넣거나 css에서 backgroud url을 넣거나 한다.

 

그런데 웹페이지에 들어가는 이미지 파일들을 경로로 이용하여 하나하나 넣어주다 보면, 사용자가 웹페이지에 접속했을 때 브라우저에서는 사용된 이미지 파일들을 하나하나 다 다운로드 받아야 한다.

 

그런데 CSS Sprite 기법을 쓰면, 이미지 파일을 하나 하나 다운받을 필요가 없어 렌더링 속도가 향상된다.

사용되는 이미지 파일들을 한 이미지 파일에 다 모아놓았기 때문이다.

 

 

네이버의 이미지 스프라이트

 

위에 보이는 것처럼 네이버도 사용되는 이미지들을 저렇게 한 파일에 모아서 필요한 이미지 부분만 보이는 CSS Sprite 기법을 사용하고 있다.

 

스프라이트 기법은 간단하다. 우선 사용할 이미지들을 한 파일로 모으면 된다.

 

https://www.toptal.com/developers/css/sprite-generator/

CSS Sprites Generator Tool | Toptal®

위 사이는 CSS Sprite Generator 사이트로 스프라이트 기법으로 사용될 이미지들을 한판에 합쳐주고, 각 이미지들의 위치값도 알려준다.

 

패딩값과 align elements값을 정하고 choose files를 클릭한다.

 

그리고 사용할 이미지 파일들을 다 고르면 된다.

 

나는 프로젝트에 사용되는 이미지들을 넣었다.

 

그럼 위와 같이 이미지들이 합쳐져 있고 왼쪽 화면에는 각 이미지들을 쓸때 CSS 위치값이 나와있다. (이 값을 그대로 쓰면 된다.) 그리고 오른쪽에 합쳐진 이미지들 위로 DOWNLOAD 클릭.

 

그럼 이미지 스프라이트 사용 준비는 끝이다.

 

 

다운 받은 스프라이트 이미지를 작업 파일 경로에 넣어준다.

 

위 이미지를 사용하고 싶다면? 이미지 안의 width, height, backgroud 속성을 복사하자.

 

그리고 <div class="box"> 태그의 자식 요소인 <div class="contents">에 background로 위 이미지를 넣는다.

.box {
  width: 400px;
  height: 400px;
  border: 5px solid pink;
}

.contents {
  width: 110px;
  height: 110px;
  background: url("css_sprites.png") -394px -10px;
}

짠 - 이렇게 이미지가 뜬다.

 

 

이렇게 스프라이트 기법을 하면 렌더링 속도가 빨라진다는 장점이 있지만, 단점이 될 수 도 있는 주의 사항이 있다.

 

• 이미지를 모아놓은 스프라이트 파일 용량이 훨씬 더 커질 수 있으니 조심하자. 배보다 배꼽이 커질 수 있다.
• 이미지를 자주 바꿔 주어야 하는 요소라면 스프라이트 기법이 오히려 유지 보수에 까다로울 수도 있다.

 

 

이미지를 넣다보면, 고화질을 지원하는 애플 제품의 화면(레티나 디스플레이)에서는 이미지가 흐릿하게 나오는 현상이 있다. 이는 CSS에서 지정한 픽셀과 디바이스에서 실제로 처리하는 기본 픽셀인 '물리 픽셀'에 차이가 있기 때문이다.

 

이를 위한 이미지 처리 기법도 있는데, 이는 다음 포스팅에서...