# styled component

156개의 포스트

[React] sidebar 만들기

참고https://wsss.tistory.com/124메뉴 버튼을 클릭하면 버튼 모양이 X로 바뀌고 왼쪽에서 메뉴가 튕겨져 나오는 사이드바를 클론해보았다. HTML, CSS, JS로 구현되어 있는 코드를 React와 styled-component로 바꾸면서 B

3일 전
·
0개의 댓글
·

[TIL] 2022-11-23

인공지능 웹 서비스 프로젝트 진행 중

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

typescript react에서 styled-component 사용하기

with npmnpm install --save styled-components with yarnyarn add styled-componentsjavacript에서 사용한다면 문제는 없지만, typescript에서 오류없이 사용하기 위해서는 styled-compone

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

[React, JS] 원페이지 스크롤 구현하기

시작에 앞서, 랜딩페이지에서 원페이지 스크롤을 구현하고 싶었다. 구글링을 해봤지만.. npm 패키지는 유료버전밖에 없었고, 아무리 서칭을 해봐도 javaScript와 리액트로만 구현된 원페이지 스크롤 기능이 없었다.

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

[TIL] Custom Component ?

CDD는 웹사이트, 웹 APP를 개발할 때 Component라는 최소 단위(부품)를 토대로 개발하는 방법론을 의미한다. 이때, 모듈 단위로 개발된 컴포넌트는 사용자 인터페이스(UI) 구축을 위해 상향식(bottom-up) 으로 결합된다.예시로, 개발자 A는 현재 생수

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

코드스테이츠_S3U3_2,3W_목,금,월

UI 컴포넌트 개발을 위해! CDD, Styled-Component, Storybook

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

styled-component 정리

출처 : https://www.youtube.com/watch?v=j-JxASock0Q&t=3s

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

[React] styled-component 파일 분리하기

styled-component를 사용하는 프로젝트를 진행하던 중 각 컴포넌트 안에서 작성하는게 지저분해 보여서 분리하기로 했다.src/styles/HeaderStyle.ts 경로에 만들었다.styled를 import 한다.css를 작성한다.styledComponents

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

[styled-component] 왕초보가 styled-component 배워보기 - 2

조금 더 배워볼까..⁉️

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

[styled-component] 왕초보가 styled-component 배워보기 - 1

이 도구를 왜 만들었을까? 정말 궁금하다....

2022년 10월 17일
·
6개의 댓글
·
post-thumbnail

[20221014_함께하개 프로젝트]

1. 프로젝트 하실래요!? 부트캠프 수료 후 취업스터디를 하면서 지내고 있었는데, 같은 기수분이 재미있는 아이디어가 있다면서 같이 프로젝트를 하자고 권유를 해주셔서 덕분에 기획 + 디자인 + 개발 + 배포까지 전부 해볼 수 있었다. 프론트엔드 5명, 백엔드 1명 총 6

2022년 10월 14일
·
1개의 댓글
·
post-thumbnail

[Let U Win] CSS Grid (feat. styled-component)

네이버 블로그에서 이전, 원글 작성일시 : 2021.12.16.00:19지난 포스팅에 이어, 이번엔 CSS Grid를 이용해 배치를 완성시켜 보자!원하는 결과는 아래와 같다.들어가기 앞서, 너무너무너무너무너무 자세하고 친절한 설명으로 날 이해시켜주신 고마운 곳을 밝히고

2022년 10월 13일
·
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개의 댓글
·

React_Styled-Components

React에서 스타일을 적용할 수 있는 라이브러리css파일에서 수정할 필요 없이 styled-coponents 설치 및 import 후 js에서 사용가능(설치방법 : 우측 문구 터미널에 입력 "npm install styled-components")(정의방법 : imp

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

React 프로젝트 세팅하기 1편 : 폴더&파일 구성

코드를 입력하세요 코드를 입력하세요 텍스트안녕하세요! 제가 요즘 진행 중인 '벚꽃 오프닝' 프로젝트를 기반으로 프로젝트 세팅하는 방법을 작성해보려 합니다. 사용하려는 라이브러리는 다음과 같습니다. "sass,prettier,eslint" . Create Rea

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

드롭다운 메뉴 커스텀하기

드롭다운을 css로 커스텀화해보자

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

220914 특화 프로젝트 개발일지

특화 프로젝트 개발일지

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

[우아한테크코스] 모락팀의 css in js 라이브러리 선택은? (styled-component와 emotion을 비교하여)

안녕하세요, 모락 프론트엔드팀의 위니입니다 😄프로젝트를 시작하기 앞서, 모락 프론트엔드팀은 css in js 라이브러리 중 어떤 것을 선택할지 고민에 빠졌습니다. 다양한 라이브러리가 있지만 그중 styled-component와 emotion 중 어떤 것을 사용할지 오

2022년 9월 11일
·
1개의 댓글
·