FLEX 2

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

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 코드를 작성하기 전에 styled-components 패키지 설치npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴웹 브라우저의 창이 열리면서 포트에 접속이 됨화..

Front/React.js 2024.08.20

[React] 리액트 스타일링 (Styling)

React 리액트 스타일링🍿 CSS웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것Cascading Style Sheets스타일링을 위한 일종의 언어여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음🍿 CSS 기본 구조Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀..

Front/React.js 2024.08.19