# styled components

125개의 포스트

next js와 styled components

getInitialProps, getStaticProps, getServerSidePropsstatic method로써 어떤 페이지에 추가된 비동기 함수 이다.server side rendering을 가능하게 하고 initial data population을 할 수 있

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

[TIL] Styled-Components

그동안 프로젝트를 진행함에 있어서 css 파일로만 스타일링을 해왔는데 팀과제를 해야하는 상황에서 styled-components를 채택해서 사용해보기로 하여기록을 남깁니다.자바스크립트 태그가 지정된 템플릿 리터럴과 css의 기능을 사용하여 리액트의 구성 요소를 스타일링

2021년 7월 28일
·
0개의 댓글

React에 CSS를 적용하는 여러 방법

React는 다양한 라이브러리의 조합으로 생산성이 높아지는 자바스크립트 라이브러리이다. 따라서 스타일을 적용하는 방법에도 기존의 import를 사용하는 것 이외에 라이브러리를 사용하는 다양한 방법이 있다.

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

styled-components

styled-components로 컴포넌트에서 css를 관리하고 동적으로 스타일을 관리하고 편리한 유지 보수를 해보자

2021년 7월 20일
·
0개의 댓글
post-thumbnail

[TIL 59] styled-components props로 theme color 내려주기

[TIL 59] styled-components props로 theme color 내려주기

2021년 7월 14일
·
0개의 댓글
post-thumbnail

[React] TypeScript & styled-components 사용 방법

TypeScript & styled-components 사용 방법에 대해 정리했습니다 🤔

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

React Styled Components 에서 Fade in/out Modal 컴포넌트 만들기

Styled Components 를 사용하여 모달을 직접 구현해볼 상황이 생겨서 직접 구현해보고 정리해보았습니다.

2021년 7월 4일
·
0개의 댓글

읽은 좋은 글들 (~21.6.28)

제목 그대로, ?. 문법의 사용법에 관한 글이다. 처음보는 용례까지 있어서 깜짝 놀랐다.ES2021의 새로운 기능들을 소개하는 글이다. 아래 다섯 가지 새로운 기능을 소개하고 있다.Logical Assignment OperatorsNumeric SeparatorsPro

2021년 6월 28일
·
0개의 댓글
post-thumbnail

심리 테스트 웹사이트 개발하기 (2)

이번에는 프로젝트 구조를 설명하려고 해요. 이 폴더가 무슨 의미고 이 파일이 어디서 쓰이는지 궁금하신 분! 🙋🙋🙋 이 글을 읽으며 궁금한 점을 해소해봐요.

2021년 6월 28일
·
2개의 댓글
post-thumbnail

심리 테스트 웹사이트 개발하기 (1)

간단한 심리 테스트를 할 수 있는 사이트를 차근차근 제작하는 방법을 알려드리려고 합니다. 하나하나 따라하면 잘 따라올 수 있을 겁니다. 여기서 프로젝트 내용만 바꾸면 본인이 하고 싶은 것도 개발할 수 있어요. 궁금한 점이 있으면 댓글로 남겨주세요!

2021년 6월 27일
·
2개의 댓글
post-thumbnail

Demystifying styled-components

본 글은 Demystifying styled-components 를 번역한 글입니다. 오역이 있을 수 있습니다. 처음 styled-components 를 사용했을때, 마법과도 같았습니다. 어찌 되었든, 문자열인 것 같기도 함수인 것 같기도 한 구문을 사용함으로써 이

2021년 6월 26일
·
0개의 댓글
post-thumbnail

[HTML & CSS] styled-components 정리, 사용법 & 특징

styled-components는 CSS를 JavaScript에서 분리하지 않고직접적인 컴포넌트로 활용할 수 있는 스타일링 프레임워크입니다.React의 Component와 비슷하게 따로 CSS 스타일을 지정하여사용할 수 있기 때문에 스타일의 재사용성이 높아지게 됩니다.

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

Styled-Components와 Material-UI 함께 사용하다 생긴 문제

프로젝트를 하면서 Material-UI와 Styled-Components를 사용할때, 뼈대는 Material-UI를 사용하지만 Styled-Components로 세부적인 부분들을 수정하고 싶을 때가 있었다예를들면:하지만 제대로 먹질 않았다.그 이유는 아무런 설정을 해주

2021년 6월 20일
·
0개의 댓글
post-thumbnail

Cypress Elements 선택하기 (data-cy 사용과 제거)

cypress elements 선택 / css in js / react에서 property 삭제

2021년 6월 14일
·
0개의 댓글
post-thumbnail

styled-components DOM issue

때때로 styled-components로 작업을 하다 보면 다음과 같은 문구를 보게 된다. 아무래도, react-router-dom에서 prop을 저렇게 대문자로 기입할 때 나오는 에러인 듯 싶다. 커스텀 속성 으로써 DOM에 나타내고 싶다면 lower case로 사용

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

Global styled-components 설정, TypeScript에서 styled-components 적용

평소 scss를 그냥 css 쓰듯 써서(..) 프로젝트 무게도 낮출 겸 TS 적용 겸 styled-components로 교체해봤습니다.글로벌 스타일, 초기값들을 정의합니다. css 파일이 아닌 JS 안에서 스타일을 정의하기 때문에 별도의 방법으로 적용합니다.styled

2021년 6월 7일
·
0개의 댓글
post-thumbnail

Styled-Components 에서 createGlobalStyle 사용하기

Styled-Components에서 margin: 0, padding: 0, font-family 같이 Global한 속성들을 적용시킬 수 있게 해주는 방법이 있다.우선 createGlobalStyle 을 import 해준다.그 다음 GlobalStyle 을 생성해준다

2021년 6월 4일
·
0개의 댓글
post-thumbnail

[CSS] Component Styling

컴포넌트 기반 Bottom-up 방식 개발Storybook구조적으로 CSS를 작성하는 방법의 발전과 이유Styled-ComponentDOM Reference를 활용하기 위한 useRef Hook필요한 기능들을 컴포넌트 단위로 만든 뒤 컴포넌트들을 조립하여 하나의 앱 혹

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