'css sprite'에 해당되는 글 1

  1. 2009.12.07 CSS Sprite 를 이용한 간단한 롤오버 메뉴 2
2009. 12. 7. 21:30 | 개발이야기

조금은 철 지난 이야기이긴 하지만,
예전에는 마우스를 메뉴위에 올려두면 색이 바뀌는 메뉴가 대세(?)를 이루던 때가 있었습니다.
(요즘은 포털이 아닌 왠만한 사이트에선 플래시를 많이 활용하더군요)

제가 아주 어릴적.. 그러니까 중학교 시절엔 어렴풋이 이런 기능을
자바스크립트의 마우스 이벤트로 처리 했었던 기억이 납니다..
(확실한건 아닙니다..^^;)

최근에는 각 포털들의 이러한 롤 오버 메뉴를 CSS Sprite 기법으로 표현을 많이 하는데요
이는, 각각 개별의 이미지를 잘라서 해당 이미지를 로딩하는 대신, 한번에 로딩을 하여
http-request를 줄여보기 위해 많이 사용합니다.

즉, 위의 화면에서 검은색 HOME과 빨간색 HOME을 따로 만들어서 보여주는 방식이 아닌
한 페이지에 모아놓고 그것을 위치만 바꾸는 식으로 보여주는 방법인데요,

이러한 이미지를 만들어 놓고, 평소엔 검은부분만 보여주다가,
마우스가 해당 부분 위에 올라가면 이미지를 위로 올려 붉은색 HOME을 보여주는 방법입니다.

간단히 만들어본 예제는 다음과 같습니다.

HTML

CSS

위의 코드를 보면 핵심은 background 이미지 스타일에 있습니다.
배경이미지를 넣은 박스의 크기를 HOME 텍스트에 딱 맞춘 가로 43px, 세로 12px로 만들어 놓고,
배경이미지의 좌표를 0 0 으로 설정해놓고 보면 당연히 검은색 HOME 텍스트만이 보이게 됩니다.
(박스 크기 때문에 하단의 붉은 글자는 안보이죠)

여기서 이제 마우스가 올라왔을때,
배경이미지의 y축을 -25px만큼 당겨주면 붉은색 HOME이 보여지게 되는 원리입니다.

다음의 경우 이러한 스프라이트를 많이 활용하는 편인데요,
미디어 다음 스포츠의 메뉴를 보면 다음과 같은 이미지 하나로 이루어져 있음을 알 수 있습니다.

이 메뉴의 경우 마우스가 오버되었을시 변하는 것은 아니지만,
각 페이지마다 on/off 되는 이미지를 한데 묶어, 각 부분에 맞는 background-image position값을 조절하여
적절하게 사용을 하고 있었습니다.

기본적인 배경이미지의 스타일인 경우 아래와 같이 on인 경우의 이미지를 보여주게 되어 있습니다.

또한, off의 경우 position은 아래와 같이 주고 있습니다. (보이는 스타일은 축구메뉴 에 관련된 스타일입니다)

이 방법이 메뉴의 수가 적은 경우엔 큰 차이가 없지만, 포털사이트처럼 메뉴가 많은 경우엔 꽤 많은 request를 줄여 줄 수 있지 않을까 싶습니다. 또한, 이미지 관리가 훨씬 쉬워지겠죠 ^^;

'개발이야기' 카테고리의 다른 글

CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
CSS Position 이야기  (9) 2009.12.08
IE8 다음 지도 API Polyline문제  (9) 2009.11.24
다음 지도 API를 이용한 GPS정보 처리  (3) 2009.10.22