언제나 사용하기 쉬운, SCSS MIXIN으로 만드는 Pure CSS ICON

Posted by in Research

본 게시물에 언급된 SCSS는 GITHUB 저장소 및 NPM을 통해 설치 가능합니다. https://github.com/ntswitblog/icon-scss-mixins-witblog 왜 Pure CSS ICON을 사용하는가? 일반적으로 웹에서 ICON 이미지를 적용할 때, sprite 이미지를 주로 사용한다. 하지만 라인, 원형, 삼각형, 사각형 같은 단순한 도형의 아이콘은 png나 svg 이미지 대신 Pure CSS로 그리는 경우가 종종 있으며, CSS로 ICON을 표현하면 이미지의 요청과 전송량을 줄여 UI 성능을 개선할 수 있다. 하위 브라우저를 대응하는 서비스에서는 Pure CSS ICON을 적용하기 어렵겠지만, 모바일과 IE9 이상의 PC 브라우저 또는 모바일 브라우저만 대응하는 서비스라면 Pure CSS ICON을 사용하는 것도 좋은 방법이다. ※ 하지만 디자이너가 직접 만든 이미지와…read more