Styled-Components3 [리액트] 리액트에서 스타일 적용하는 5가지 방법 (인라인 스타일, CSS, SCSS, CSS Module, Styled-Components) 1. 인라인 스타일 App.jsx function App() { return } export default App 2. CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만들어야함 CSS 클래스가 중복되는 것을 방지하기 위해 1) 이름을 지을 때 특별한 규칙을 사용하거나 2) CSS selector를 활용한다 CSS 클래스 이름 짓는 2가지 방법 컴포넌트이름-클래스형태 i.e.) App-header BEM 네이밍: Block__Element-Modifier class="컴포넌트이름__역할—세부특징" i.e.) card__title-primary 컴포넌트 스타일로 css를 사용할시 단점 상위 컴포넌트에서 불러온 css 코드가 하위 컴포넌트에까지 영향을 미치기 때문에 컴포넌트마.. 2022. 8. 12. [리액트] styled-components로 keyframe 구현하기 1. styled-components 설치하기 yarn add styled-components 2. keyframes import하기 import styled, { keyframes } from 'styled-components'; 3. keyframes 애니메이션 만들기 const 애니메이션이름 = keyframes` 0% { /* 애니메이션이 0% 진행했을때 적용할 스타일 */ } 50% { /* 애니메이션이 50% 진행했을때 적용할 스타일 */ } 100% { /* 애니메이션이 100% 진행했을때 적용할 스타일 */ } `; 4. keyframes로 만든 애니메이션을 속성값으로 넣어주기 const Box = styled.div` animation: ${애니메이션이름} 2s; `; 2022. 5. 10. [리액트] styled-components로 리액트 프로젝트에 스타일링 넣기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 리액트를 다루는 기술: 9장 컴포넌트 스타일링 9.4 styled-components 리액트 기초반 2-8 화면을 예쁘게! - styled-components styled-components란? 컴포넌트 스타일링 기법 중 하나로 자바스크립트 파일 안에 스타일을 선언하는 CSS-in-JS 방식 컴포넌트에 직접 스타일을 입히기 때문에 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다 styled components의 장점 1) 자바스크립트 파일 하나에 스타일까지 작성할 수 있기 때문에 스타일 파일을 따로 만들지 .. 2022. 4. 6. 이전 1 다음
