[React] 리액트 styled-components를 사용하여 컴포넌트 스타일링

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 

🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 

• 코드를 작성하기 전에 styled-components 패키지 설치
• npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어

명령어를 입력하여 styled-components 패키지 설치

• Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트
• 스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함

스타일링 컴포넌트를 사용하여 스타일링하는 컴포넌트 Blocks 코드 작성

• 블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정

• vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴

npm 명령어를 실행

• 웹 브라우저의 창이 열리면서 포트에 접속이 됨
• 화면에는 3개의 박스가 가로로 나열되어 나타나는데 현재 flex Direction이 Low로 되어 있음

flex Direction이 Low 인 3개의 박스

•   css 속성을 동적으로 바꾸면서 화면의 변화를 바로 보기 위해 Chrome의 개발자 도구를 열어 Elements탭 클릭
•  박스를 포함하고 있는 DOM Element를 찾아 선택하고 오른쪽 패널에서 css 속성 변경

Baseline로 변경

• align-ttems 속성을 Baseline으로 변경

flex-end로 변경

• align-items 속성을 flex-end로 바꾸면 박스가 아래로 정렬

stretch로 변경

• align-items 속성을 stretch로 바꾸면 다음과 같은 박스가 세로로 늘어남

 

• flex-direction 속성을 column으로 변경하면 박스들이 세로로 정렬

cloumn로 변경

• flex-direction 속성의 값을 column-reverse로 변경하면 정렬 순서가 아래쪽부터 시작하도록 변경

cloumn-reverse로 변

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런