이 글에서는 Scroll-driven animation 에 대한 소개 및 장점에 대해 알아보고 관련 내용 및 사용 예시를 소개합니다. 1. Scroll-driven animation 소개 Scroll-driven animation은 사용자가 스크롤 가능한 컨테이너에서 스크롤이 얼마나 되었는지에 따라 애니메이션 진행이 가능한 새로운 애니메이션 기법입니다. 웹서핑하다 보면, 사이트에서 종종 사용자가 스크롤 한 만큼 애니메이션이 진행되는 사이트들을 접해보신 적이 있을 텐데, 이는 자바스크립트를 사용해 사용자의 스크롤 이벤트에 반응하여 구현되었습니다. e.g. 자바스크립트를 더보기…
Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 알아보았습니다. 단, CSS에서 미디어 쿼리를 사용하면 작성 코드가 길어질 뿐만 아니라 코드 유지 및 관리가 더보기…
Cascade Layers Chrome99+, Firefox97+, Safari Technology Preview 및 Safari iOS에 도입된 CSS의 새로운 스펙 Cascade Layers에 대해 정리했습니다. 이해 a. CSS Cascade CSS Cascade는 CSS의 가장 강력한 강점으로, CSS가 요소에 적용하려는 스타일의 우선순위를 정하는 데 사용하는 알고리즘입니다. CSS Cascade는 어떤 스타일을 적용할지 결정하기 위해 몇 가지 기준을 고려하는데, 그 기준은 다음과 더보기…
CSS touch-action 한눈에 알아보기 touch-action CSS touch-action 속성이 무엇이며 어떻게 동작하는지 테스트 및 gif로 보기 쉽게 정리해보았습니다. 1. touch-action 속성 기본적으로 터치 이벤트의 처리는 브라우저가 담당하는 영역입니다.touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있습니다.표준 터치 제스쳐로는 터치를 사용한 스크롤(panning)과 여러 손가락을 사용한 확대/축소(pinch zoom)가 존재합니다. touch-action 더보기…