# styled component

44개의 포스트

styled component에 mixin 사용하기

Sass에서 가장 유용한 기능 중에 하나는 @mixin 과 @import을 통해 변수화된 스타일링 속성을 재사용임styled-component 공식 문서에는 의외로 이에 대한 구체적인 설명이 없었음themeProvider로 전역 변수로 사용되는 theme 내부에 자주

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

TypeScript+Styled-component+nextjs

\_\_&- https://kyounghwan01.github.io/blog/TS/React/styled-components-preset/#%E1%84%8F%E1%85%A5%E1%86%B7%E1%84%91%E1%85%A9%E1%84%82%E1%85%A5%E1%

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

[Styled-Components] Server Side Rendering을 위한 style 추출

현재 개발중인 프로젝트는 React와 Express를 사용하고 있다. 사용자가 처음 접속할 시에는 Express 서버에서 React 앱을 Server Side Rendering한 페이지를 제공하도록 작성했는데, 첫 로드 시에 Styled-Component를 사용한 el

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

[Styled-Components] Extending Styles가 안될 때

styled-component 문서에 따르면 className을 전달해야 custom 혹은 third-party components에서도 잘 동작한다고 한다.The styled method works perfectly on all of your own or any th

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

다른 컴포넌트를 가져와서 extending styled-component 작성 시 스타일 적용 안되는 경우

아래와 같이, Nav 파일의 NavLogo는 Nav를 import해서 extending 형식으로 width를 설정하려고 하지만, 적용 안됨공식문서를 살펴본 결과, 아래와 같이 className을 넣어야 적용된다고 나와있음Logo.js 파일을 아래와 같이 수정한 결과 작

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

TIL 34 styled-component의 활용

이번에 맡게 된 프로젝트의 프론트 부분을 구현하면서 styled-component를 사용했다. 부트캠프 파이널 프로젝트에서 한번 사용한 경험이 있었기 때문에 바로 적용할 수 있었는데 그 중 새로 알게 된 내용에 대해 정리해본다.아래 코드는 스타일 컴포넌트의 기초 코드다

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

TIL : Styled-Components

Pure CSS를 사용하다가 Sass를 처음 사용했을 때 그 편리함에 무척 감동했던 기억이 있다. 특히 nesting이 되는 점이 정말 혁신적이었다. 특정 태그에만 원하는 스타일을 주기 위해 불필요한 클래스네임을 짓고, 상위 태그의 클래스네임을 반복적으로 써야하는게 무

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

IM 35 일차

[2021/03/28 일요일] 주말 개인 공부

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

Next.js + Typescript 에 Styled-component 적용

라이브러리 설치Javascript를 사용할 때는 위의 명령어로 설치를 하면 되지만, Typescript를 적용하면 styled-component를 인식하지 못한다. Typescript에서는 리액트 라이브러리에 대한 type이 정의가 되어있지 않기 때문이다. 따라서 ty

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

Styled-component

Styled-component란?Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리다.설치기본문법생긴모양스타일 지정스타일을 지정하기 위해 위의 예시 처럼 tagged

2021년 3월 3일
·
0개의 댓글

블로그만들기(4) - styled-component

이전 프로젝트에서는 페이지, 컴포넌트를 디자인하기 위해 css-in-js 라이브러리인 @emotion을 통해 styled component를 생성해서 디자인을 진행했는데 이번 프로젝트에서는 styled-component 라이브러리를 통해 디자인했다.styled-comp

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

TIL.51 Styled Component 에서 web font 사용하기

React 프로젝트에서 styled component를 사용할때 web font는 어떻게 사용하는지 알아봅시다.

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

글감 임시 저장소

기본 문법https://www.daleseo.com/react-styled-components/태그 속성 변경https://velog.io/@taewo/%EB%A6%AC%EC%95%A1%ED%8A%B8-Styled-Componets-2%ED%8E%B8

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

Styled-components 기억하기

React를 학습하던 중 모듈 시스템의 중요성을 계속 깨닫고 있다. 익숙하지 않은 방식들에 시간이 오래 걸리긴 하지만 반복적으로 사용하고 익숙해지면 분명 세분화된 폴더트리 구성에 훨씬 편해질 것이다.윈도우 터미널창에 styled-components를 먼저 설치해준다.p

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

React styled-component

CSS in JS?먼저 CSS in JS의 개념을 짚고 넘어가겠습니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는

2021년 1월 3일
·
0개의 댓글
post-thumbnail

React - 로그인/회원가입 기능에 UX디자인을더하기

이번 포스팅 내용은 API 호출 동작을 수행하는 버튼 및 그 외 Input Box를 UX적 퀄리티를 높일 수 있는 방법을 담고 있습니다.

2020년 12월 29일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -1

공부 순서 0.반응형 웹 이란? 1.react와 styled-components 사용해보기 2.media-query를 이용해 반응형 웹 적용 시켜보기 styled-components를 동적으로 사용해보기 반응형 웹이란? 세계적으로 온라인 시장이 활성화 되면서 pc중심이었던 온라인 서비스 시장이 휴대폰 태블릿 다양한 디바이스로 확대 되었습니...

2020년 12월 17일
·
0개의 댓글
post-thumbnail

styled-component 찍먹 해보기(맛보기)

인기있는 라이브러리는 사용해보고 싶기 마련이다. 그래서 내맘대로 지지고 볶을 수 있는 내 포트폴리오 페이지에서 한번 찍먹(맛보기) 해보기로 했다. styled-component란? 자 그럼 이게 뭔지 알려면 공홈에서 확인해보는게 인지상정이다.

2020년 11월 20일
·
0개의 댓글
post-thumbnail

TIL] React-Styled Components

Styled Components? . 에 가장 각광받는 이다. 설치 명령어: 사용시 장점 Component가 Unmount 되면 css styling이 memory를 차지하지 않아 성능상의 장점이 있다. 자동으로 생성되는 ClassName으로 다른 compone

2020년 11월 8일
·
0개의 댓글