CSS Cascade Layers 소개

Cascade Layers Chrome99+, Firefox97+, Safari Technology Preview 및 Safari iOS에 도입된 CSS의 새로운 스펙 Cascade Layers에 대해 정리했습니다. 이해 a. CSS Cascade CSS Cascade는 CSS의 가장 강력한 강점으로, CSS가 요소에 적용하려는 스타일의 우선순위를 정하는 데 사용하는 알고리즘입니다. CSS Cascade는 어떤 스타일을 적용할지 결정하기 위해 몇 가지 기준을 고려하는데, 그 기준은 다음과 더보기…

CSS touch-action 한눈에 알아보기

CSS touch-action 한눈에 알아보기 touch-action CSS touch-action 속성이 무엇이며 어떻게 동작하는지 테스트 및 gif로 보기 쉽게 정리해보았습니다. 1. touch-action 속성 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역입니다.touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있습니다.표준 터치 제스쳐로는 터치를 사용한 스크롤(panning)과 여러 손가락을 사용한 확대/축소(pinch zoom)가 존재합니다. touch-action 더보기…

CSS, SVG로 만드는 Circle Progress Bar (SVG stroke-dashoffset 활용)

Progress Bar는 어떠한 작업이 수행될 때, 그 작업의 진행 상태, 수치 값을 시각적으로 보여주기 위해 사용하는 요소입니다.막대 형태의 Progress Bar는 일반적으로 아래와 같이 진행 상태에 따른 %를 width 값으로 주고그 영역만 배경색을 적용하는 방법으로 간단히 처리할 수 있었습니다. 문득 원형의 경우는 어떻게 적용할까 궁금해졌지만 방법이 쉽게 떠오르지 않았습니다.그래서 방법을 찾아보았고 여러 가지 더보기…

picture elements 사용하기

프로젝트를 진행하면서 585 이하의 기기에서는 모바일 소재의 이미지(배경 이미지)가 노출되고, 586 (폴드) 이상의 기기에서는 PC 소재의 이미지가 노출되어야 하는 스펙이 있었습니다.해당 스펙을 적용하기 위해 picture 요소를 사용하였으며 picture 요소에 대해 간략하게 정리해보았습니다. picture 정의 HTML Elements MDN 문서에 따르면 <picture>는 0개 이상의 source 요소와 1개의 img 요소로 이루어져 있으며 서로 다른 디스플레이/기기에서 이미지를 보다 유연하게 노출할 수 더보기…

(번역) 랜더링 성능을 향상 시키는 새로운 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도 다양한 애니메이션을 구현할 수 있습니다.그 중 성능 더보기…