성능

(번역) 랜더링 성능을 향상 시키는 새로운 CSS 속성 content-visibility

content-visibility: the new CSS property that boosts your rendering performance 본 게시글은 https://web.dev/content-visibility/ 의 글을 번역 게시하였습니다. 8월 25일 Chrome 85에 추가된 content-visibility 속성에 대해 정리했습니다. 화면 밖 콘텐츠의 렌더링을 생략함으로써 초기 로드 시간을 개선합니다. Chrome 85에 새로 적용된 content-visibility 속성은 페이지 로드 성능을 향상시키는 가장 효과적인 새로운 CSS 속성 중 하나입니다. content-visibility는 UserAgent가 layout, 더보기…

글쓴이 조 영광, 전

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을 표현하면 이미지의 더보기…

글쓴이 길 선영, 전