# styled components

272개의 포스트

코드 깔끔하게 작성하기 (리액트, Styled-Components)

자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다. 하물며, 다른 사람이 내 코드를 보는 것은 어떨까? 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.

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

'As' and Attrs

버튼을 하나 만들어 보았습니다 근데 어떤 이유로 button HTML 태그를 사용하고 싶지 않다면 어떻게 해야 할까 예를 들어 href으로 사용하고 싶다는 경우라면 Login 를 사용하게 되면 사진에 보이는 것 처럼 태그 형태가 바뀐 것을 볼 수 있다.예를 들어 굉장히

어제
·
0개의 댓글
post-thumbnail

확작성 사용하기(2)

props로 전달하여 배경색을 변경해 보았니다. 이제는 Box라는 컴포넌트 안에 있는 속성 전부를 받아온 원 모양 디자인을 하고 싶다면 어떻게 해야 할까 알보겠습니다.변수로 할당 된 Box를 styled(Box)로 넣어주면 Box 컴포넌트 안에 있는 속성 까지 전부 쓸

어제
·
0개의 댓글
post-thumbnail

확장성 사용하기

앞서 기본적으로 적용한 BoxOne과 BoxTwo 코드를 보면 background-color 색을 제외하고는 같은 코드이다 여기서 드는 생각은 반복되는 코드를 사용하고 싶지 않을수 있다.props를 사용하는 문법도 쉽게 적용이 가능합니다. boxColor라는 값을 임의

어제
·
0개의 댓글
post-thumbnail

기본적인 설정 방법

기존에 우리가 알고 있는 기본 정익 방식 중 하나이다. 불편하다고 하기에는 자주 사용하는 방식이다보니 싫다 좋다의 개념은 아니었다. 기본적인 적용 방법은 위에 코드와 같다 직관적으로 훨씬 더 깔끔하고 스타일을 적용하는 부분과 분리 되있다 보니 직관적으로도 보기 편하다.

1일 전
·
0개의 댓글

Redux를 이용한 React 다크 모드 기능 (with. styled-components)

styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다.

4일 전
·
0개의 댓글
post-thumbnail

Styled Components 알아보기

Dive into Styled Components.

5일 전
·
0개의 댓글
post-thumbnail

[TS] TypeScript에서 Styled-component 사용하기

TypeScript에서 styled-component를 사용해보자.

6일 전
·
0개의 댓글
post-thumbnail

CSS-in-CSS vs CSS-in-JS

css 모듈과 css in js에 대해 알아보자.

6일 전
·
0개의 댓글
post-thumbnail

[styled-components] | keyframe - animation 효과 구현

styled-components에서 제공하는 keyframes 키워드 사용원하는 애니메이션 효과를 변수로 정의하여 모듈화하고, 이를 animations 속성에 값으로 삽입하여 효과 구현transition 속성과 다르게 이벤트 없이 상시 효과가 발현될 수 있도록 구현가능

6일 전
·
0개의 댓글
post-thumbnail

[styled-components] | CSS에 변화 주는 방법 (CSS transform)

상황에 따라 CSS를 변경하는 방법에는 2가지가 존재한다.컴포넌트 props를 통해 특성 값을 주는 방식상황 별 스타일 컴포넌트를 만들고, 조건부 렌더링을 구현하는 방식첫 번째, 상황에 따라 스타일 컴포넌트에 props를 통해 CSS 특성을 변경하는 방법에 대해 알아보

2022년 5월 17일
·
0개의 댓글
post-thumbnail

styled-components

현업에서 많이 사용하고 있는 styled-components 핵심 적인 부분들은 배우며 기록하고자 합니다.

2022년 5월 13일
·
0개의 댓글

2차 프로젝트

to do 레이아웃 만들기 컴포넌트화 하기 한페이지 안에 styled-components 적용하기 기능 구현 craousel, category별 필터링, 더보기에서 전체보기 인기순 페이지 구현(랜덤 or 예약순)

2022년 5월 11일
·
0개의 댓글
post-thumbnail

스타일 간섭을 방지하기 위한 styled components와 css module

컴포넌트 파일에 css 파일을 import하여 사용하는 기존의 일반적인 스타일링 방식은 스타일의 스코프가 해당 컴포넌트에만 국한되지 않는다. 큰 프로젝트에서 수많은 개발자들이 같은 코드에서 작업하고 있을 때, 동일한 css 선택자가 다른 의도임에도 중복해서 사용될 수도

2022년 5월 8일
·
1개의 댓글

✍️ Next.js + styled-components + redux + redux-saga 기본 세팅

Next.js + styled-components + redux + redux-saga

2022년 5월 6일
·
0개의 댓글
post-thumbnail

[React] Styled Components 사용하기

React Styled-Components 설치 및 사용하기

2022년 5월 6일
·
0개의 댓글
post-thumbnail

Styled Component에서 css 헬퍼 사용하기!

css 헬퍼기능 유용하게 사용해보자!

2022년 5월 1일
·
0개의 댓글
post-thumbnail

[react] styled-components - Theming

참고 공식문서

2022년 4월 30일
·
0개의 댓글

styled-components

들어가기insta-reactJS에서 design에 사용할 styled-components를 간략하게 알아보고,복습해 보는 POSTstyled-components를 사용하는데 있어서 모든 page에 적용 혹은 사용할 수 있게함.styles.jsApp.js

2022년 4월 30일
·
0개의 댓글