CSS (40) 썸네일형 리스트형 Tailwind CSS와 CSS-in-JS 무엇을 사용할까? 언제 어떤 도구를 쓰는게 맞는지 생각해보자. TLDR : 생산성 : Css-in-js 유지보수성, 확장성 : tailwind CSS Styled-Components 베스트 프랙티스(모범 사례) 원문 보기 :https://www.joshwcomeau.com/css/styled-components/ The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've learned.. itchallenger.tistory.com Styled-Components의 비밀 파헤치기 7원문 링크 : https://www.joshwcomeau.com/react.. [짤막글] styled-components는 어떻게 스타일을 적용하는가 TL:DR; className을 사용한다 공식 예제에 가보면 이런 예시가 있다. // This could be react-router-dom's Link for example const Link = ({ className, children }) => ( {children} ); const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; `; render( Unstyled, boring Link Styled, exciting Link ); 리액트 라우터 돔의 Link처럼 생각할 수 있다고 한다. 실제로 아래와 같이 동작한다. 위의 코드를 codeSandbox에 붙여넣고 className만 삭제하면 동작하지 않는다. 즉, styled-.. 디자인 시스템 컴포넌트를 만들 때 고려할 사항들 원문 : building-a-design-system-from-scratch/ Building a Design System from scratch - Maxime Heckel's Blog A deep dive into my experience building my own design system that documents my process of defining tokens, creating efficient components, and shipping them as a package. blog.maximeheckel.com 지속 가능한 UI를 구축하기 위한 헥심은 열쇠는 색상과 타이포그래피에 대한 명확한 표준을 설정하고 재사용 가능한 컴포넌트를 구축하는 것입니다. 전체 코드 보기 : @maximehec.. CSS : Flex와 min-width https://makandracards.com/makandra/66994-css-flex-and-min-width CSS: Flex and "min-width" min-width is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that feels like max-width. min-width in a flex context While the default min-width value is 0 (zero), for flex i makandracards.com min-width는 element의 최소 너비를 정의하도록 .. CSS 애니메이션 : 설계 Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon.. CSS 애니메이션 : 성능 느린 애니메이션은 사용자 경험을 망칩니다. 우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다. 이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다. 안그러면 사용자는 버벅거림을 느끼게 됩니다. 애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다. 픽셀 파이프라인 화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다. 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다. 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다. 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다. 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채.. CSS 애니메이션 : Keyframe CSS 키프레임 애니메이션은 @keyframes at-rule을 사용하여 선언됩니다. 한 세트의 CSS 선언에서 다른 세트로의 전환을 지정할 수 있습니다. @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0%); } } 각 @keyframes 문에는 이름이 필요합니다! 이 경우 이름을 slide-in으로 지정했습니다. 이것을 전역 변수처럼 생각할 수 있습니다. 키프레임 애니메이션은 일반적이며 재사용할 수 있습니다. animation 속성을 사용하여 특정 선택자에 적용할 수 있습니다. .box { animation: slide-in 1000ms; } 동일한 keyframe 선언에 여러 애니메이션을 .. CSS 애니메이션 : Transition Tansform으로 변환을 했다면, Transition으로 이전과 이후를 이어줍니다. 전환은 고도로 구성할 수 있지만 두 가지 값만 필요합니다. 애니메이션을 적용하려는 속성의 이름 애니메이션의 지속 시간 여러 속성에 애니메이션을 적용하려는 경우 쉼표로 구분된 목록을 전달할 수 있습니다. all도 가능하지만... 애니메이션은 소금과 같습니다. 너무 많으면 요리가 망합니다. .btn { transition: transform 250ms, opacity 400ms; } .btn:hover { transform: scale(1.2); opacity: 0; } Timing functions 웹에서 "모션"에 대해 이야기할 때 실제로는 시뮬레이션된 동작에 대해 이야기하고 있습니다. 픽셀 자체는 디스플레이에서 움직이.. 이전 1 2 3 4 5 다음
