# styled component

35개의 포스트

Next.js + Typescript 에 Styled-component 적용

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

약 14시간 전
·
0개의 댓글

Styled-component

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

어제
·
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개의 댓글
post-thumbnail

🌈 CSS Selector

CSS Selector Reference

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

React 프로젝트 환경셋팅 하기 - boilerplate 만들기

in VSCode, TypeScript, Styled Component,ESLint, Prettier

2020년 10월 30일
·
0개의 댓글

리다기 스터디 9. component styling

요새는 코딩은 컴포넌트 구성되는 추세라고 현업자에게 들어본적이 있습니다.(youtude daqko님 말씀)그래서 컴포넌트별로 styling을 하는게 맞는건지 아니면 styling은 모아서 따로하는게 맞는건지 잘 모르겠지만 .. 이 장에서는 css styling부터 co

2020년 9월 1일
·
0개의 댓글
post-thumbnail

TIP) Styled-Component 자동완성 플러그인

styled Component를 사용하면 동적으로 요소(element) 스타일을 꾸밀 수 있다.그런데 styled Component에서 css 코드를 작성 시, 자동완성이 안되어 일일이 코드를 입력해야한다.그러면 실수를 할 경우 에러나 버그가 발생할 수도 있고, 무엇이

2020년 8월 31일
·
0개의 댓글
post-thumbnail

[react]Styled Component

javascript내에서 css속성을 사용 가능하게 만들어주는 CSS-in-JS 라이브러리이다$ npm install --save styled-componentsconst {내가 원하는 component이름} = styled.{태그이름} \`\`;component이름은

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

styled-component) css props (css 재사용)

css props로 자주 사용하는 css속성은 변수로 저장해서 재사용하자! import styled, { css } from "styled-components"; ${변수명} 을 써주면 적용된다.

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