본문 바로가기

CSS

(19)

[motion] React에서 useScroll 훅 가이드 - 옵션과 사용법 정리 useSpring은 스프링 애니메이션을 구현하는 데 사용되는 훅입니다. 이 훅은 값을 변경할 때 자연스러운 스프링 물리 효과를 적용하여 부드러운 애니메이션을 제공합니다. useSpring의 사용 방법과 설정 옵션을 공식 문서를 바탕으로 정리해 보겠습니다.사용 방법1. 직접적인 값 설정useSpring을 초기 값과 함께 사용하여 스프링 애니메이션을 생성할 수 있습니다.예: const x = useSpring(0)와 같이 초기 값을 설정하고, x.set(100)으로 값을 변경하면 스프링 애니메이션으로 100으로 전환됩니다.즉시 값을 변경하고 싶다면 x.jump(100)을 사용할 수 있습니다.2. 다른 모션 값 추적다른 모션 값을 전달하여 그 값이 변경될 때마다 스프링 애니메이션을 적용할 수 있습니다.예: c..

[motion] React에서 useScroll 훅으로 스크롤 애니메이션 구현하기 Framer Motion의 useScroll 훅은 스크롤 이벤트를 감지하고 이를 통해 애니메이션을 구현하거나 UI를 동적으로 변경하는 데 사용됩니다. 이 훅은 스크롤 위치에 대한 정보를 제공하며, 이를 통해 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다.useScroll의 용도 및 기능스크롤 위치 추적: useScroll은 현재 스크롤 위치를 추적하여 이를 기반으로 애니메이션을 적용할 수 있습니다.모션 값 반환: 이 훅은 scrollX, scrollY, scrollXProgress, scrollYProgress라는 네 가지 모션 값을 반환합니다.scrollX와 scrollY: 픽셀 단위로 현재 스크롤 위치를 나타냅니다.scrollXProgress와 scrollYProgress: 0에서 1 사이의 값을..

[Tailwind] tailwind의 필수 라이브러리 clsx, tailwind-merge, cva Tailwind CSS와 함께 tailwind-merge, cva (Class Variance Authority), clsx를 조합하여 사용하는 방식은각각의 라이브러리가 제공하는 기능을 결합하여 효율적인 UI 컴포넌트 관리를 가능하게 합니다. 1. clsx기능: 조건부로 className을 처리하는 데 사용됩니다. 객체나 배열을 통해 조건에 따라 클래스를 추가하거나 제거할 수 있습니다예시import clsx from 'clsx';// orimport { clsx } from 'clsx';// Strings (variadic)clsx('foo', true && 'bar', 'baz');//=> 'foo bar baz'// Objectsclsx({ foo:true, bar:false, baz:isTrue(..

[CSS] 트랜지션과 애니메이션의 차이점 1. 복잡성과 유연성: - 트랜지션: 초기 상태와 최종 상태만을 정의할 수 있어 비교적 단순합니다[1]. - 애니메이션: 여러 중간 단계(keyframes)를 정의할 수 있어 더 복잡하고 다양한 변화를 표현할 수 있습니다[1]. 2. 실행 방식: - 트랜지션: 특정 트리거(예: hover)에 의해 실행되며, 트리거가 제거되면 원래 상태로 돌아갑니다[1]. - 애니메이션: 페이지 로드 시 자동으로 실행될 수 있으며, 지정된 횟수만큼 또는 무한히 반복될 수 있습니다[1][4]. 3. 제어 수준: - 트랜지션: 시작과 끝 상태 사이의 변화를 부드럽게 만들어주지만, 중간 과정을 세밀하게 제어하기 어렵습니다[3]. - 애니메이션: @keyframes를 사용하여 세부적인 움직임을 시..

[Tailwind] Tailwind v4.0 마이그레이션 ( 다크모드 , 색상 재정의, transition-property 설정 등 ) - 번역글 현재 테일윈드 4가 릴리스된 지 일주일이 된 시점에서 v4.0으로 자동 업그레이드가 되지 않을 때, 수동 구성에 대한 이야기를 다룬 블로그는거의 없었습니다. 그중 한 블로그를 발견하여 해당 내용을 번역합니다.https://timomeh.de/posts/upgrading-to-tailwind-v4 Upgrading to Tailwind v4.0 | timomeh.deDec 31, 2024 | 4 min reading time Favorite Media 2024timomeh.de 이 글을 쓰는 시점으로부터 3일 전인 1월 22일, 몇 가지 주요 변경 사항이 포함된 Tailwind v4.0이 출시되었습니다. 저는 오늘 업그레이드를 결정했는데, 솔직히 말해서 업그레이드 경로가 복잡했습니다! Tailwind..

[Tailwind] Form 요소에서 사용할 수 있는 효과들 1. 기본 상호작용hover: /* 마우스 오버 */focus: /* 포커스 */focus-visible: /* 키보드 포커스만 */focus-within: /* 자신이나 자식 요소 포커스 */active: /* 클릭/탭 하는 동안 */visited: /* 방문한 링크 */target: /* URL 해시와 일치하는 요소 */ 2. 폼 관련default: /* 기본 폼 요소 */checked: /* 체크된 상태 */indeterminate: /* 불확정 상태 */placeholder: /* placeholder 텍스트 */autofill: /* 자동완성된 입력 */required: /* 필수 입력 필드 */val..

[CSS] 색상을 사용하는 팁, contrast ratio 확인 방법 1. 메인 컬러를 웹사이트의 개성에 맞게 설정하세요: 컬러는 의미를 전달합니다! 🔴 빨간색주목성이 높음힘, 열정, 흥분을 상징강렬한 에너지를 표현 🟠 주황색빨간색보다 덜 공격적행복, 쾌활함, 창의성을 전달 💛 노란색기쁨, 밝음, 지성을 의미긍정적인 에너지를 표현 💚 초록색조화, 자연, 성장, 건강을 대표안정감과 평화로움을 전달 💙 파란색평화, 신뢰성, 전문성을 상징 ( 파란색 계열이 많이 쓰이는 이유 )차분하고 안정적인 이미지 💜 보라색부, 지혜, 마법을 상징고귀함과 신비로움을 표현 💗 분홍색로맨스, 관심, 애정을 나타냄부드럽고 따뜻한 감정을 전달 🟤 갈색자연, 내구성, 편안함과 연관안정감과 신뢰성을 표현 ⚫ 검정색힘, 우아함, 미니멀리즘을 상징동시에 슬픔과 비통함도 표현 출처https..

[CSS] 구글 개발자 도구에서 CSS 값 수정 단축키로 하기 위처럼 클릭 후 수정 모드로 변환한 뒤 1. Alt + 위/아래: 0.1 단위씩 증가/감소 2. 위/아래 방향키: 1 단위씩 증가/감소3. Shift + 위/아래: 10 단위씩 증가/감소4. Ctrl + 위/아래: 100 단위씩 증가/감소 이제서야 알아서 슬픈 현실.. ㅠ

이전 1 2 3 다음

티스토리툴바