UI&UX/CSS

안녕하세요! 오늘은 리액트에서 사용되는 CSS-in-JS 라이브러리인 styled-components에 대해 소개하려고 합니다. styled-components는 리액트 컴포넌트를 스타일링하는 데에 사용되며, 매우 인기 있는 라이브러리입니다. styled-components를 사용하면 CSS 파일을 작성하거나 클래스 네임을 사용하지 않고도 리액트 컴포넌트에 스타일을 적용할 수 있습니다. 이 라이브러리는 템플릿 리터럴 문법을 사용하여 컴포넌트 스타일을 작성하므로, 일반적인 CSS와 매우 유사한 문법을 가지고 있습니다.   styled-components를 사용하면 다음과 같은 이점을 얻을 수 있습니다: 유지보수 용이성: CSS와 관련된 모든 코드를 컴포넌트 내부에 작성하기 때문에, 코드베이스의 일관성과 유..

React, Vue, Angular, Svelte 4대장을 계속 쓰다 보면 기본적인 css 속성만 알고,css에 대해 무감각해져가고 성능 최적화, 코드 개선에 대해서 공부하다 보면 css에 대해 무감각해져가고 css 속성에 대해 이해도가 떨어지고 구글링, chatgpt 에 의존하게 됩니다.(저 또한 그랬구요...)그래서 기초부터 하나하나 적으면서 정리를 하려고 합니다. Flexdisplay: flex;위와 같은 속성을 가장 많이 사용하실겁니다. 1차원적인 레이아웃을 작성할 때 사용된다고들 하죠. 가로, 세로 정렬justify-content: center; ->컨테이너에서 가로축을 기준으로 가운데 정렬합니다.justify-content: flex-start (default); -> 요소들을 컨테이너의 왼쪽..