이 글에서는 Scroll-driven animation 에 대한 소개 및 장점에 대해 알아보고 관련 내용 및 사용 예시를 소개합니다. 1. Scroll-driven animation 소개 Scroll-driven animation은 사용자가 스크롤 가능한 컨테이너에서 스크롤이 얼마나 되었는지에 따라 애니메이션 진행이 가능한 새로운 애니메이션 기법입니다. 웹서핑하다 보면, 사이트에서 종종 사용자가 스크롤 한 만큼 애니메이션이 진행되는 사이트들을 접해보신 적이 있을 텐데, 이는 자바스크립트를 사용해 사용자의 스크롤 이벤트에 반응하여 구현되었습니다. e.g. 자바스크립트를 더보기…
[CSS애니메이션] clip-path animation 이 글에서는 clip-path 설정에 대해 설명하고, clip-path 애니메이션을 학습하며 만들고 싶었던 간단한 애니메이션 예제들을 소개하겠습니다. clip-path clip-path는 요소의 어느 영역을 표시할지 설정하는 CSS 속성입니다. 설정된 영역 내부는 표시되고 외부는 숨겨집니다.clip-path는 다양한 모양을 지정할 수 있으며, 기본적으로 네 가지 모양(circle, ellipse, inset, polygon)을 지원합니다. 또한, SVG를 활용한 복잡한 형태도 사용할 수 있습니다. 모양 설정 더보기…
CSS anchor positioning 소개 및 활용 새로운 CSS Anchor position 속성으로 보다 더 편하게 앵커와 요소의 위치를 지정할 수 있습니다.이 글에서는 기능 소개와 활용 예제, 다양한 fallbacks 기능을 정리하였습니다. 🔍 CSS anchor positioning이란? 기존 position 속성은 상속관계에 의한 상대적 위치를 지정하는 방식이었습니다. 따라서 직관적이지만 부모의 overflow등 속성에 의해 원하는 방식대로 사용하기 어려운 경우도 더보기…
아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요? 어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 오기도 하는데요.기존에는 overflow: overlay라는 속성을 활용해 어느 정도 대응할 수 있었지만 overflow: overlay는 이제 삭제되어 사용할 더보기…
Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 알아보았습니다. 단, CSS에서 미디어 쿼리를 사용하면 작성 코드가 길어질 뿐만 아니라 코드 유지 및 관리가 더보기…
part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 실무에 어떻게 적용할 수 있는지 예시와 함께 설명드리겠습니다. 목차 1. 너비 분기 & 높이 분기 더보기…
part1. Media Query 기초 우리가 지금 읽고 있는 이 글은 모니터 또는 태블릿 등과 같은 미디어 매체를 통해 보여지고 있습니다.이러한 미디어 매체는 크고 작은 기기 사이즈, 터치 입력 지원 또는 흑백 컬러 출력과 같은 여러 유형과 특성을 가지고 있습니다.미디어 쿼리는 이처럼 미디어 매체의 다양한 유형과 특성을 확인하고, 특정 유형과 특성 더보기…
Recoil 시작하며 React 프로젝트를 진행하다 보면 많은 프로젝트에서 상태관리 라이브러리를 사용하게 됩니다. 저 역시 이번에 새로운 프로젝트를 시작하면서 어떤 라이브러리를 사용하는 것이 좋을지 고민하게 되었고, 그 과정에서 다양한 상태관리 라이브러리에 대해 알아보게 되었습니다. 그러던 중 Facebook에서 2020년 발표한 Recoil이라는 React 전용 라이브러리에 대해 알게 되었습니다. 간단한 사용과 Facebook이라는 타이틀 때문인지 현재 많은 관심을 받는 더보기…
SASS는 Ruby 언어로 처음 만들어져, LibSass -> Node-Sass로 발전하면서 지난 몇년 간, UI엔지니어 사이에서 큰 사랑을 받았습니다.현재는, Dart Sass라는 이름으로 설치 후 사용 가능하며, 조만간 Node-Sass에서 사용했던 문법들이 depreciated 된다고 공지 되었습니다. The Sass team discourages the continued use of the @import rule.Sass will gradually phase it out over the next few years, and eventually 더보기…