css5 귀찮은 스타일링 컴포넌트를 이용해 해방되기 - 1 이번 시리지는 styled-component를 이용해서 앞으로 진행할 돈벌이 프로젝트의 스타일링 귀찮음을 낮추기 위해 진행하는 과정이다. 좀만 고생해서 확장성있는 컴포넌트를 만들고 스타일링으로부터 해방되자 연구결과는 tailwind를 쓰자 2024. 5. 19. 어떤 css 속성을 선택해야할까 고민할 때 읽어볼 글 mdn에서 성능을 고민할 경우 지침을 알려줬다. 그 글을 한글로 번역해둔것으로 필요할 때 찾아볼 것 CSS 애니메이션과 전환을 사용하세요 성능이 나쁜 기술들(예: setTimeout()이나 top/left 위치 설정)을 사용하는 일부 라이브러리의 animate() 함수 대신에 CSS 애니메이션을 사용하세요. 많은 경우, CSS Transitions를 사용하여 작업을 완료할 수 있습니다. 이는 브라우저가 이러한 효과를 최적화하고 GPU를 사용하여 부드럽게 처리하도록 설계되었기 때문에, 프로세서 성능에 미치는 영향을 최소화할 수 있기 때문입니다. 또 다른 장점은 표준화된 구문을 사용하여 이러한 효과를 앱의 나머지 모양과 느낌과 함께 CSS에 정의할 수 있다는 점입니다. CSS 애니메이션은 keyframes를.. 2024. 5. 19. height가 고정된 요소에서 text line 제어하기 컴포넌트를 제작할 때 height가 고정되고 비율 css만 이용해서 text-content의 line수를 제어하는 방법을 정리해보자. 기본전략은 text를 작성하는 요소를 감싸는 wrapper요소를 이용해 처리한다. - HTML {title} - CSS.textWrapper { height: 100%; display: flex; align-items: center; overflow: hidden; .textContent { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; }} textContent가 들어가는 요소는 di.. 2024. 4. 27. state에 따른 스타일관리 setState란 데이터 변경시 기존의 관련된 dom요소를 찾고 데이터변경에 맞게 ui를 변경하는 과정을 jsx 문법과 같이사용시 선언적으로 처리할 수 있는 기능을 제공하는 함수다. state에 따른 style제어하는 방법을 명확히 하여 시간을 들이붇는 코딩습관을 고쳐보자. state를 통해 class를 제어하는 기본구조return ( ); state에 따라서 클래스를 변경함으로 dom요소를 선택하고 노드의 classList, style 속성에 직접접근하는 코드를 짤 필요가 없게됐다. 외우자 2024. 4. 18. 이전 1 2 다음
