Mozilla 한국 커뮤니티

네이버 포털사이트도 한글메뉴부분은 이미지로 처리했더군요. 그래서 소스를 살펴보는데 좀 독특한 방식으로 코딩이 되어있네요? 하나의 이미지에 모든 폰트들을 박아놓고 overflow:hidden 속성으로 position변경을 통해 이미지를 노출시키더라구요. 이렇게하면 하나의 이미지파일만 불러오니 나름 신선하기도 한데 저는 이런 코딩스타일을 처음봤거든요. 다음사이트도 보니까 이렇게 돼있던데 요즘은 이런식으로 코딩하나요? 그래서 저도 이렇게 코딩하려고하는데 모든 브라우저에서 동일하게 position이 정확히 맞나요?

이미지 요청 횟수를 줄이기 위한 방법입니다. CSS 스프라이트(CSS sprite)라고하고 말씀하신 것 처럼 CSS가 아닌 이미지 요소를 사용하기도 합니다.

옛날 오페라 미니에서는 잘 지원이 안되는 경우도 있었는데, 포지션 속성은 대부분의 브라우저에서 잘 지원을 하고 있기 때문에 특별한 문제는 없을 것 같습니다.

다만 이미지를 한군데 모아놓으면 유지운영업무시 좀 복잡하고 힘들기 때문에 메인 페이지같이 트래픽이 많이 몰리는 경우에 적절히 활용하는 것이 좋습니다.