# styled component

22개의 포스트

리다기 스터디 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개의 댓글

styled-component

컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 'CSS-in-JS' 라고 한다. 이와 관련된 라이브러리는 굉장히 많지만,그 중 개발자들이 가장 선호하는 styled-component 에 대해서 알아보자. styl

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

Styled Component란 무엇인가✌️

오늘은 2차 프로젝트에서 처음 써먹어 본 Styled Component에 대해 알아보자 🥰 ✅ Styled Component란? styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로

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

2차 프로젝트 - React - Navbar / Sidebar styled component로 구현하기

DataUSA 사이트의 Navbar는 Scroll을 감지하여 처음에는 배경색이 없었다가 일정부분 내려가면 배경색이 생기면서 페이지의 타이틀이 추가된다. 스크롤을 감지하는 이벤트를 활용하여 구현할 수 있다.1차 프로젝트 때 Nav 바를 멋지게 구현해주신 경배김님 덕분에

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

컴포넌트 스타일링

일반 CSS : component를 스타일하는 가장 기본적인 방식Sass : 자주 사용되는 css 전처리기 중 하나로 확장된 css 문법을 사용하여 css 코드를 더욱 쉽게 작성할 수 있게 해준다.CSS module : 스타일을 작성할 때 CSS클래스가 다른 CSS 클

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

Styled-Component에서의 코드 품질 향상을 위한 고민

나는 요즘 개인프로젝트로 React UI 컴포넌트 프로젝트를 하고 있다. 프로젝트라기보다는 개인적으로 좋아하는 UI부분이기에 취미?로 하고 있다. React, TypeScript, Styled-Component를 활용한다. github: https://gith

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

React) Styled-Component

< Inline style >white나 1 rem 같은 키워드는 쿼테이션 기호로 감싸줘야 string으로 인식하지 않음나중에 유지 보수나 성능 상의 이유로 권장되지 않는 방법< Props를 통한 조건부 스타일링 >props를 사용해서 특정 스타일을 부여할

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

styled-component

스타일을 컴포넌트화한다.예전처럼 html, js, css를 따로 작성하고 관리하는 것이 아닌 컴포넌트 단위로 관리하기 위해 스타일또한 한 컴포넌트에 함께 작성한다.jsx 문법을 사용한 컴포넌트 내용에서 마치 또하나의 컴포넌트처럼 선언하고 그 내용을 styled.tag로

2020년 7월 24일
·
0개의 댓글
post-thumbnail

React의 styled components

2차 프로젝트를 진행하면서 styled components에 대해 공부하고 사용하고 있다! 오늘은 styled components의 몇가지 속성에 대해 정리해보기로 한다!

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

[TIL] calc(), styled component 기초

styled component TIL 1) styled component는 이름 그대로 component이다. 따라서 부모의 값을 받을 때 props를 사용한다. 2) scss 처럼 자기자신을 받을 때는 & 기호를 사용한다 3) 다른 컴포넌트를 사용할땐 $기호를 사

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

ssr 삽질기 - styled-component가 잘 렌더링되지 않아요!

찰나의 시간동안 스타일이 전혀 입혀지지 않은 plain text들이 화면에 표시되는 것이 문제였습니다. SSR과 코드스프리팅의 특성상 첫 화면을 렌더링하고 동적임포트 한 chunk된 javascript들이 hydrate 되는데요, hydrate 되기 이전에 첫 렌더링

2020년 5월 17일
·
0개의 댓글

styled된 스타일 override

리린이는 급하게 video.js 에서 자막파일도 없이 화면에 문자열을 overlay 하라는 명을 받았다. createDialog 사용했더니 스타일이 맞지 않아서 오버라이드 필요했음.

2020년 3월 25일
·
0개의 댓글

[TIL] 34. Styled Component

자바스크립트 파일 안에 스타일을 선언하는 방식이다.그렇기 때문에 .css또는 .scss 파일을 따로 만들지 않아도 되는 장점이 있다.설치한 디렉토리로 이동 후, package.json 파일에 dependencies 중 styled-components 이 설치되었는지 확

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