1 post tagged with “fe-performance”

April 12, 2019

webpack-spritesmith로 CSS 스프라이트 자동화 적용기

문서(doc, ppt, xls 등)를 볼 수 있는 이미지 뷰어를 개발 할 때, IE와 모바일 브라우저에서 이미지 요청을 줄여 성능을 향상 시키기 위해 CSS Sprite 자동화를 적용하면서 알게된 것을 정리 합니다.시작하기에 앞서 CSS Sprite 자동화를 적용한 프로젝트는 webpack과 scss를 사용하고 있으며, 이에 맞게 CSS 스프라이트 자동화를 적용 했습니다.CSS 스프라이트(Sprite)란?페이지의 이미지 요청 수를 감소시키기 위한 대표적인 방법입니다. 낱개의 이미지들을 합친 하나의 스프라이트 이미지와 낱개의 이미지의 위치와 크기 등의 스타일이 작성된 CSS…

Keep Reading