분류 전체보기68 Parallax scrolling : Javascript VS CSS 구현 JavascriptCSS- 움직임 등에 대해 보다 직접적인 통제가 가능.즉, 구현 자유도가 높음- 사용자 인풋에 따르는 등 복잡한 인터렉션, 애니메이션도 구현 가능- 하고자 하는 인터렉션 요소에 따라 웹 성능에 지장을 줄 수 있음- 유저 인풋 등과 관계된 인터렉티브가 필요한 경우에 적합- 가볍고 효율적임- 직접 조작 가능한 인터렉티브 요소가 제한적임- 비교적 간단한 인터렉티브 요소 적용에 적합 2024. 7. 6. CSS perspective 해당 요소의 z=0 평면과 사용자 사이의 거리를 정의transform 효과를 주고자 하는 부모 요소에 적용perspective 에 따른 변형 효과perspective 가 클 수록,(거리가 멀 수록) 변형 효과가 적음persepctive 가 작을 수록,(거리가 가까울 수록) 변형 효과가 큼 2024. 7. 6. Web API : Intersection Observer API https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web API | MDNIntersection Observer API는 상위 요소 또는 최상위 문서의 viewport와 대상 요소 사이의 변화를 비동기적으로 관찰할 수 있는 수단을 제공합니다.developer.mozilla.org 사용자가 스크롤을 했을 때 지정 요소가 얼마나 viewport 에 노출되느냐에 따라 callback function 을 하는 API 이다. -생성자 : new IntersectionObserver(callback[,options]) callback 에는 호출하고자 하는 함수를 입력한다.options 에.. 2024. 6. 18. Tailwind CSS 에서 혼란을 방지하기 위한 5가지 사례 출처 : https://velog.io/@lky5697/5-best-practices-for-preventing-chaos-in-tailwind-css [번역] Tailwind CSS에서 혼란을 방지하기 위한 5가지 모범 사례원문 : https://evilmartians.com/chronicles/5-best-practices-for-preventing-chaos-in-tailwind-cssTailwind CSS로 작업하는 것은 매우 빠르고 쉽습니다(Tailwind CSS가 널리velog.io 1. 가능한 한 적은 수의 유틸리티 클래스 사용유틸리티 클래스는 가능한 한 적게 작성하는 것이 좋습니다.pt-4 pb-4를 설정하는 대신 py-4를 사용하면 됩니다. 이는 px, mx 및 my 속성에도 적용됩니다.. 2024. 5. 19. 이전 1 2 3 4 5 ··· 17 다음