CSS 애니메이션의 성능 아는 만큼 좋아져요!

본 문서는 원작자의 동의를 얻어 원문의 의미를 해치지 않도록 번역하였으며, 이해를 돕기 위한 Chrome DevTools 활용 방법을 추가했습니다. CSS 애니메이션의 성능 비교 웹 페이지에서 애니메이션을 어떻게 구현하고 계신가요? JavaScript animation? CSS animation? 웅성웅성뭐야 뭐라는ㄱ.. 라이브러리를 활용해 JavaScript 애니메이션을 구현할 수 있지만, 현재의 native CSS도 다양한 애니메이션을 구현할 수 있습니다.그 중 성능 더보기…

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

본 게시물에 언급된 SCSS는 GITHUB 저장소 및 NPM을 통해 설치 가능합니다. https://github.com/ntswitblog/icon-scss-mixins-witblog 왜 Pure CSS ICON을 사용하는가? 일반적으로 웹에서 ICON 이미지를 적용할 때, sprite 이미지를 주로 사용한다. 하지만 라인, 원형, 삼각형, 사각형 같은 단순한 도형의 아이콘은 png나 svg 이미지 대신 Pure CSS로 그리는 경우가 종종 있으며, CSS로 ICON을 표현하면 이미지의 더보기…