이 글에서는 Scroll-driven animation 에 대한 소개 및 장점에 대해 알아보고 관련 내용 및 사용 예시를 소개합니다. 1. Scroll-driven animation 소개 Scroll-driven animation은 사용자가 스크롤 가능한 컨테이너에서 스크롤이 얼마나 되었는지에 따라 애니메이션 진행이 가능한 새로운 애니메이션 기법입니다. 웹서핑하다 보면, 사이트에서 종종 사용자가 스크롤 한 만큼 애니메이션이 진행되는 사이트들을 접해보신 적이 있을 텐데,...
더보기[CSS애니메이션] clip-path animation 이 글에서는 clip-path 설정에 대해 설명하고, clip-path 애니메이션을 학습하며 만들고 싶었던 간단한 애니메이션 예제들을 소개하겠습니다. clip-path clip-path는 요소의 어느 영역을 표시할지 설정하는 CSS 속성입니다. 설정된 영역 내부는 표시되고 외부는 숨겨집니다.clip-path는 다양한 모양을 지정할 수 있으며, 기본적으로 네 가지 모양(circle, ellipse, inset, polygon)을 지원합니다....
더보기CSS anchor positioning 소개 및 활용 새로운 CSS Anchor position 속성으로 보다 더 편하게 앵커와 요소의 위치를 지정할 수 있습니다.이 글에서는 기능 소개와 활용 예제, 다양한 fallbacks 기능을 정리하였습니다. 🔍 CSS anchor positioning이란? 기존 position 속성은 상속관계에 의한 상대적 위치를 지정하는 방식이었습니다....
더보기
Article 서비스에서는 콘텐츠 로딩 시 애니메이션을 포함한 스켈레톤 UI를 적용하고 있습니다.일반적인 스켈레톤 UI와는 다른 디자인 스펙을 구현하는 과정에서 고민했던 부분들을 정리하여 소개하려고 합니다. 1. 아티클 서비스의 스켈레톤 디자인 스펙 스켈레톤은 사용자에게 페이지가 로드되고 있다는 것을 알려주기 위해 실제 페이지의 요소와 더보기…
아래 사진처럼 스크롤이 없는 페이지에서 스크롤이 발생하는 페이지로 이동 시, 생긴 스크롤로 인해 UI 위치가 변하는 이슈를 겪어본 적 있으신가요? 어떻게 보면 당연한 거 아닌가 싶기도 하지만, 꼼꼼한 디자이너님의 경우 위치가 변하지 않도록 수정해달라 요청이 오기도 하는데요.기존에는 overflow: overlay라는 속성을 활용해 더보기…
Media Query 실전편과 이어집니다. 미디어 쿼리 실전편에 이어, 미디어 쿼리와 관련되어 있는 내용에 대한 설명을 작성하였습니다. 목차 1. SCSS를 활용한 Media Query 앞선 두 관련 글에서 CSS를 사용하여 미디어 쿼리를 작성 및 활용하는 방법에 대해 알아보았습니다. 단, CSS에서 미디어 쿼리를 더보기…
part2. Media Query 실전 적용 Media Query 기초편과 이어집니다. 미디어 쿼리를 사용하면 실행 중인 기기나 조건에 따라 스타일을 다르게 지정할 수 있고,반응형 웹, 다크 모드와 같은 다채롭고 트렌디한 웹 구현이 가능해집니다.이렇게 활용도 높은 미디어 쿼리를 실무에 어떻게 적용할 수 있는지 더보기…
part1. Media Query 기초 우리가 지금 읽고 있는 이 글은 모니터 또는 태블릿 등과 같은 미디어 매체를 통해 보여지고 있습니다.이러한 미디어 매체는 크고 작은 기기 사이즈, 터치 입력 지원 또는 흑백 컬러 출력과 같은 여러 유형과 특성을 가지고 있습니다.미디어 쿼리는 더보기…
Recoil 시작하며 React 프로젝트를 진행하다 보면 많은 프로젝트에서 상태관리 라이브러리를 사용하게 됩니다. 저 역시 이번에 새로운 프로젝트를 시작하면서 어떤 라이브러리를 사용하는 것이 좋을지 고민하게 되었고, 그 과정에서 다양한 상태관리 라이브러리에 대해 알아보게 되었습니다. 그러던 중 Facebook에서 2020년 발표한 Recoil이라는 React 전용 라이브러리에 대해 알게 더보기…