# styled components

162개의 포스트
post-thumbnail

[React Master Class By Nomad Coders] #2. Styled-Components

[React Master Class By Nomad Coders] React Challenge 1일차 - Styled-Components

29분 전
·
0개의 댓글
post-thumbnail

styled-components 활용팁

styled-components를 사용하면서 겪었던 시행착오들을 케이스로 나누어 더 좋은 방법이라고 생각한 것들을 정리한 것들입니다.

약 24시간 전
·
0개의 댓글
post-thumbnail

Styled-components - (5)theme

불러오기import { ThemeProvider} from "styled-components";App컴포넌트를 ThemeProvider컴포넌트로 감싸주기사용할 색상 정의하기ThemeProvider컴포넌트에 props로 전달하기ThemeProvider컴포넌트 하위에 있는

2021년 11월 25일
·
0개의 댓글
post-thumbnail

TodoList 만들기 : 3

우리가 현재 TodoList를 만들기위해 컴포넌트에서 props를 통해 각각 상태관리하고 있는 관계도를 보면넘겨주고~ 넘겨받고~ 굳이 여기서 사용하지 않아도될 것인데 들어가야하고 등등불필요한 과정과 요소가 들어가있다이 과정을 줄이고 명료하게 해결할수 있는것이 바로 co

2021년 11월 25일
·
0개의 댓글
post-thumbnail

Styled-components - (4)애니메이션 및 Selector

우선 keyframes를 불러와준다.import { keyframes } from "styled-components";keyframes을 활용해 애니메이션을 정의한다.적용할 스타일컴포넌트에 animation속성에 적용한다.animation: ${animation} 1

2021년 11월 24일
·
0개의 댓글
post-thumbnail

Styled-components - (3)기본속성 설정 및 태그 변경하기

as="바꿔주고 싶은 태그명"예시 예시input태그에 required 속성이 다 들어가있는것을 확인할 수 있다.

2021년 11월 24일
·
0개의 댓글
post-thumbnail

CSS의 진화과정

CSS, SCSS, BEM, CSS Modules, Styled-Components

2021년 11월 23일
·
0개의 댓글
post-thumbnail

Styled-components - (2)props전달 및 컴포넌트 확장

전달하려는 key의 명은 자유롭게 지정가능하다. 예시const 작명 = styled(기존스타일컴포넌트명)예시

2021년 11월 23일
·
0개의 댓글
post-thumbnail

Styled-components - (1)설치 및 기본 문법

설치npm i styled-components불러오기import styled from "styled-components";vscode-styled-components 익스텐션 설치하기!예시

2021년 11월 23일
·
0개의 댓글
post-thumbnail

TodoList 만들기 : 2

components 폴더안에 TodoItem.js 파일을 만들어주고 아이템 리스트 컴포넌트를만들어보자여기서 사용해야 할 아이콘은 따로 있으니 다른 사이트에서 가져와보자react-icons라는 사이트에 들어와서 MdDone하고 MdDelete 라는 아이콘을 쓸건데, 어

2021년 11월 22일
·
0개의 댓글
post-thumbnail

[Next.js] Next에서 styled-components 적용하기!

📚 Next.js에서 styed-components 적용하는 방법을 알아보자!

2021년 11월 22일
·
0개의 댓글

[styled-components]첫 사용

어리틀빗을 만들면서 아쉬웠던 점은 아무래도 한단계 한단계 배워가며 즉시 구현을 진행하다보니, 리액트의 강점인 재사용 가능한 컴포넌트를 하나도 만들지 못했다는 것이였다. 이번 우디를 개발하면서, 그때의 문제를 해결하기 위해 styled-components를 도입해서 재사

2021년 11월 19일
·
0개의 댓글

[리액트 기초반] 2주차 - styled-components

styled-components란? 컴포넌트 스타일링 기법 중 하나로 class 이름을 지정하지 않아도 된다는 이점이 있다. 또한 컴포넌트에 스타일을 직접 적기 때문에 생성과 수정이 쉽고 직관적이다. 1.프로젝트 설치 이전에 설치했던 프로젝트와 달리 sytled-c

2021년 11월 18일
·
0개의 댓글
post-thumbnail

[Web template] Next.js with-styled-components (2)

Next.js + typescript + styled-components 적용하기

2021년 11월 18일
·
0개의 댓글
post-thumbnail

TodoList 만들기 : 1

먼저 배경을 만들어보자 이제 npx create-react-app 같은 기본적인건안말할거임 !먼저 styled-components에서 createGlobalStyle 를 import해주고모든 화면에 공통적으로 써줄 스타일인 GlobalStyle이라는 컴포넌트를 만드는데

2021년 11월 17일
·
0개의 댓글
post-thumbnail

[React] styled-components에서 이미지?

styled-components를 사용할 때 이미지 컴포넌트를 직접 styled.img로 만들것인지 styled.div안에 background-image로 이미지를 넣을 것인지 어느게 나은 방법인지 잘 모르겠다. 그래서 이번 기회에 다른 개발자들은 어떻게 사용하고 있는

2021년 11월 14일
·
0개의 댓글

[React] 나만의 초기세팅 정리하기

지금까지 공부한 내용을 기반으로 리액트 초기세팅 을 정리해봤습니다.

2021년 11월 12일
·
0개의 댓글

TIL. 9주차 금요일

💅🏼 CSS 스타일 적용하기 z-index:999 => 가장 앞으로 배경을 올려줄 수 있다. role: 'dialog' => 모달창 구현시 필수적으로 적용해줘야한다. 글자그대로 대화창 처럼 화면이 뜨게 해준다. ' > ' => 자식 결합자로, 첫 번째 요소의 바로 아래 자식인 노드를 선택한다. 직계자식을 선택하게 하여 css를 적용하게 한다. ' ....

2021년 11월 1일
·
0개의 댓글

Next.js에서 SVG 파일 불러오는 방법

1. SVG 파일 그대로 불러오기 2. Webpack next.config.js A.tsx 3. React.js 컴포넌트로 변환하기 HomeIcon.tsx

2021년 10월 25일
·
0개의 댓글
post-thumbnail

[React #9] styled-components로 효과적인 스타일링

현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다. CSS in JS

2021년 10월 25일
·
0개의 댓글