생활
CSS Sprite 기법이 있던데 이게 웹에 좋은영향을 끼치나요??
위에 질문처럼 css 스프라이트 기법이 뭔지 그리고
웹에 어떤 영향을 끼치는지 알고 싶은데
구글링해보면 웹을 향상시킨다는데 어떻게 향상시키나요??
3개의 답변이 있어요!
안녕하세요?
CSS Sprite 기법에 대해 문의주셨는데 스프라이트 기법에 대해 조금 설명해드리겠습니다
CSS Sprite 기법은 여러개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법입니다
사용자 입장에서는 세개나 받아야 했던 이미지를 한개만 받으면 되니 이미지를 불러오는 시간이 단축되기 때문에
이미지 여러개를 하나로 합치면 파일 용량이 커지진 않을까 하는 우려가 들수도 있지만
실제로 세개의 이미지를 합친 한개의 파일 용량은 개별 이미지의 파일 용량을 더한 값보다
작아서 용량을 줄이는 효과도 동시에 얻을 수 있습니다 그래서 시간과 용량 모두 좋은 영향을 끼칩니다
스프라이트 기법이란.
간단하게 설명하자면 5개의 이미지를 1개로 모아두고 그 모아둔 이미지만 한번에 요청하여 가지고있다가 잘라서 보여주는것입니다.
여기서 장점은
이미지를 한번만 호출하기 때문에 속도가 빨라짐
불러온 이미지를 포지션 등으로 잘라서 사용하기때문에 훨씬 간단하게 코딩할수있음
1개의 이미지를 사용하기때문에 해당 이미지만 잘 관리하면 파일 관리하기도 훨씬 편함
3번과 마찬가지로 해당 파일을 그룹화 해두면 ( 버튼 이미지 를 모아둔 큰 이미지로 스프라이트 기법 사용 등 ) 재활용 등에 몹시 편함
등등 많은 장점이 있습니다.
단점이라면
CSS나 JS가 깨지면 동적으로 랜더링하는 부분에서 깨져서 화면이 엉망이됨 ( 단, 어차피 대부분의 상용화 페이지는 CSS,JS가 깨지면 그순간 알아보기 힘든 수준으로 깨짐)
그 페이지에는 딱 3개의 버튼만 필요한데 만들어둔 스프라이트 이미지가 5개 짜리 버튼이면 쓸모없는 버튼 2개 어치만큼 더 로드해버림
스프라이트 이미지 단 1개라도 깨지면 순식간에 수십곳에 이미지가 깨지기 시작함
등 몇가지 주의하실 단점이 있지만 그래도 장점이 더 커서 많이들 사용하는 기법입니다.
유명한 NAVER 부터 시작하여 카카오, 다음 등 안쓰는곳을 찾는게 더 힘들 정도로 많이들 쓰는 기법이기때문에
잘알아두시고 사용하시기 바랍니다^^
아래 URL 을 보시면 간단한 util 을 사용하여 더 편하게 실제 사용하는법을 보실수있습니다.
CSS에서 아이콘용 이미지를 하나를 만들어서 아이콘이 필요할 때 마다 그 이미지의 한 영역을 표시합니다. 아이콘이 많을 경우 서버에서 하나씩 모두 다운로드해야 하지만, 이미지를 하나를 만들 경우 웹 브라우저에서 캐시하여 사용하므로 서버와의 불필요한 통신이 발생하지 않습니다.