# CSS in JS

55개의 포스트
post-thumbnail

[stitches css] 조건부 스타일링 방법

stitches를 5-6개월 정도 사용하면서 편했던 점이나 활용 방식에 대해 설명하고자 합니다.마찬가지로 classname 혹은 data attribute로도 핸들링이 가능하지만 variants로 핸들링하는 것이 랜더단이 가장 깔끔하고 css 작성문이 직관적이어서 좋았

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

emotion) 애니메이션(keyframes)을 삼항연산자 사용

emotion) 애니메이션(keyframes)을 삼항연산자 사용시 에러 해결

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

JSX

JSX란 무엇일까. 한번쯤 JSX, JSX 하는걸 들어보았지만 오늘 한 번 제대로 알아보자. js가 들어가 있으니 자바스크립트와 관련있어 보인다. 이건 자바스크립트를 확장한 문법이다.즉 문법이고 형식이 있다. 규칙도 있다. JSX란?JSX(JavaScript XML)는

2022년 12월 11일
·
0개의 댓글
·

emotion 사용 후기

CSS-in-JS 라이브러리 중 하나인 emotion을 사용하며 느낀 점을 적어본다.

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

Library | Styled Component

CSS in JavaScript는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.inline style과 비슷한 느낌이지만 inline style은 인라인 태그로 style을 정의하는 반면 CSS in

2022년 12월 4일
·
0개의 댓글
·
post-thumbnail

[React]Styled-components 알아보기(1)

styled-component를 배우기 앞서 Css-in-css와 Css-in-js에 대해 알아보자css 모듈css 모듈은 css를 모듈화 하여 사용하는 방식. Css 클래스를 만들면 자동으로 고유한 클래스네임을 만들어 scope를 지역적으로 제한 모듈화된 css를 번

2022년 11월 23일
·
0개의 댓글
·

노마드코더 / 리액트 REACT JS #2 styled-components

기존 DOM을 만드는 방식인 css,scss 파일을 밖에 두고 쓰지 않음 => CSS in JS 방식임css가 전역으로 중첩되지 않으며 class명 중복을 줄일 수 있음패키지 설치yarn add styled-components적용하고자 하는 컴포넌트 상단에 import

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

[개발일지] Emotion.js의 적용

지금까지는 Css혹은 SCSS를 통해 스타일을 적용해왔는데, Css-In-Js로 작성해보는 것도 좋을 것 같아 적용해보기로 했다.그 전에 Css-In-Js는 Css-In-Css에 비해 어떤 차이가 있어 리액트에서 종종 쓰이는지 확인해 보려한다.2014년 페이스북 개발자

2022년 11월 16일
·
0개의 댓글
·

💅🏻 Styled Components

Styled Component : 리 Style Component를 이용해 React를 컴포넌트 주도 방식으로 개발할 수 있다. Styled-Component

2022년 10월 27일
·
0개의 댓글
·
post-thumbnail

Component-Driven Development (CDD)

: 부품 단위로 UI 컴포넌트를 만들고, 페이지를 조립해나가는 상향식 개발 방법BBCUN모바일, 태블릿 등 다양한 디바이스가 등장하고, 웹 사이트가 점점 복잡해지면서 CSS가 점점 복잡해지고 유지보수가 용이한 CSS를 작성하기 어려워졌다.➡️ CSS 작업을 효율적으로

2022년 10월 27일
·
0개의 댓글
·
post-thumbnail

React - 스타일드 컴포넌트로 이미지 url 지정하기

넷플릭스 클론을 하면서 api 요청으로 받아온 이미지 url을 inline 방법이 아닌 styled-component로 적용하려고 든 아이디어를 정리하고자 한다.css, module css의 사용은 어려워 보인다. 코드를 살펴보자.movie는 api요청을 받아올 영화

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

[React]Styled-Component

1. CSS-in-JS 1-1 정의 CSS-in-JS는 JS 파일 내에서 CSS를 작성할 수 있는 방법. 1-2 특징 CSS-in-JS는 js 파일 내에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용 가능. 그리고 css 클래스명을 해시 값으로

2022년 10월 3일
·
0개의 댓글
·
post-thumbnail

Custom Component

디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하기위해 등장한 개발 방법이 CDD(component Driven Development)이다.\-> 레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할

2022년 9월 3일
·
0개의 댓글
·
post-thumbnail

[CSS] Styled-Components로 CSS-in-JS 구현하기

인터넷이 만들어진 이후 기술의 발달과 함께 인터넷을 사용하는 환경도 다양해졌다. 또, 점점 커지는 프로젝트 규모와 복잡도로 CSS를 일관적인 패턴으로 작성하고 구조화하는 방법이 필요해졌다. 그래서 여러 CSS 방법론들이 나왔고 사진과 같은 발전 과정을 거쳐서 CDD 개

2022년 8월 28일
·
0개의 댓글
·
post-thumbnail

CDD와 CSS-in-JS

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론기본적인 컴포넌트 단위부터 시작하여 UI 뷰(View)를 구성하기 위해 점진적으로 결합(조립)해가는 상향적(bottom-up) 성향을 띔컴포넌트 ?상호 교환 가능하고 표준화된

2022년 8월 26일
·
0개의 댓글
·
post-thumbnail

styled-components 기초

styled-components는 가장 널리 사용되고 있는 CSS-in-JS 라이브러리입니다. 먼저 CSS-in-JS를 알아보겠습니다. CSS-in-JS CSS-in-JS란 말 그대로 JavaScript 코드에서 CSS를 작성하는 방법을 말한다. 기존에는 웹 사

2022년 8월 14일
·
0개의 댓글
·
post-thumbnail

styled-components vs. emotion

리액트에서는 CSS-in-JS을 통해 스타일을 작업을 진행한다.그중에서는 styled-components, emotion이 가장 유명하고 많이 사용된다.그래서 우리 모던 애자일 4기 프론트에서는 어떤 라이브러리를 사용할지 선택하기 위해 각각 어떠한 특징과 장점, 단점이

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

[React] CRYPTO TRACKER를 만들며 배운 것들

CRYPTO TRACKER를 만들며 학습한 것들을 정리하였습니다.

2022년 7월 18일
·
0개의 댓글
·

CSS in JS

배운것 CSS-in-JS css-in-js방식이란,단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다. styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지이다. 패키지란,

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

[React] styled-components 정리

styled-components를 사용하는 이유 일반적인 CSS 모듈 방식로 작업할 경우, 코드 가독성이 떨어진다. html tag보다 무슨 뜻인지 한 눈에 알 수 있는 component 명을 짓는 것이 유리함. 직접 style 속성을 부여할 경우, hover, act

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