# styled component
[팀프로젝트] 리디북스 clone - 메인페이지(1)
슬라이더 라이브러리 Slick carousel 사용class형 component 말고, function형 component 쓰기styled.component 사용slick carousel library컴포넌트 재사용조건부렌더링에 따라 할인,대여 패치 구분MainLayo
[Project] 맥주와 함께하는 숙소 예약 서비스 'BeerBnB'
프로젝트 소개 메인 서비스 맥주, 소주, 위스키 등 '술과 어울리는 숙소'를 테마로 지역별, 유형별 원하는 숙소를 검색하고, 예약할 수 있다. '호스트 등록'을 서비스를 통해 내 숙소를 쉽게 등록하고 호스트가 될 수 있다. 프로젝트 기간 : 2021.08.02
Styled Component - Global Style
오늘부터 가능한 매일매일 남는 시간에 유튜브 보는 대신 가볍게(?) 기존 웹사이트들을 클론해보기로 했다^\_^ 스타일드 컴포넌트에 대해 배운 기념으로 알차게 써먹어보던 중에 유용한 기능을 발견해서 글로 남겨놓음!참고: https://www.daleseo.com
[React] 13. 컴포넌트 스타일링 (2)
1. CSS Module ✍ CSS Module은 CSS를 불러와서 사용할 때 크래스 이름을 고유한 값 형태로 만들어 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지하는 기술이다. \* 즉, [파일이름]\[클래스이름]\[해시값] 형태로 생성 사용 방법은 .modul
Styled-Components 스타일 컴포넌트
What is Styled-Components? Styled-components는 라이브러리이다! 프로젝트를 진행 하다가 컴포넌트 파일이 많아지면 CSS를 작성할때 한곳에 다 몰아서 넣으면 많은 고충이 있다 예를들어 중복된 className이 사용 될 수가 있다.
TIL 24 | Styled components
styled component본질적으로, Styled-component 는 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으면 javascript 코드 내에서 일반 css로 구성 요소의 스타일을 지정할 수 있다.설치 npm install --save style
Zero Runtime CSS in JS (Feat. Linaria)
CSS in JS라고 하면 가장 먼저 떠오르는 것은 Styled Component입니다. 개인적으로 Styled Component를 자주 사용하고 있는 데 최근 한 프로젝트에서 Styled Component 관련해서 문제를 경험한 적이 있습니다.스크롤 이벤트가 발생할
9월 15일
UUID 아주 간단 React에서 배열이나 오브젝트에 있는 아이들마다? 컴포넌트를 호출할 때 key props를 넣으라고 아우성친다. 이 때 쓰면됨 React Styling CSS Module App.module.css를 정의해서 필요한 곳에서 import style
styled component 사용법
2021.8.30. 어제 처음 스타일드 컴포넌트로 css in js 방식으로 사용했는데 불편한 점이 있었다.바로 import와 export가 너무 많아지게 되는 것이다.(css in js라서 스타일 파일이지만 .js로 끝나는 것에 유의. css를 자바스크립트로 표현한
TIL 32 - Input radio 버튼 스타일
css는.. 멀고도 깊다고 느끼게 해준 라디오 버튼 스타일 적용이였다.input radio button을 label로 감싸고 span에 스타일을 적용시켜줬고해당 버튼을 누르면 목데이터에 적용한 id값을 받아오게 했다.input radio button을 label로 감싸
Styled Component | props 전달
styeld Component가 SASS보다 좋은게 뭘까? 하면서 반신반의로 사용해 보았다. 근데 겁나 좋다.. ㅋㅋㅋ요렇게 해당 태그에 props를 전달해주면 해당 페이지에서 바로 props를 받아 적용해 버릴 수 있다.이거 외에도, 컴포넌트의 css를 그대로 재활용
Scss에 익숙한 분들을 위한 간단 styled-component 사용법
Scss, Sass를 사용할 땐 아래와 같이 사용했을 것이다!하지만 styled-component는 다음과 같이 사용한다.
TIL. 37 React - Styled Component를 사용한 버튼 색 바꾸기
아직 익숙치는 않지만 이리저리 코드를 수정하며 사용법에 대한 아주 대략적인 감은 get했나..? hook과 styled component에 대한 내용을 공부하며 작성하는 게시글이 많아질 것 같다.
contextAPI + styled-components 로 재사용 컴포넌트 만들기
CSS-in-JS 관련 React 라이브러리 중에서 가장 인기 있는 Styled Component와 contextAPI를 이용해서 재사용 컴포넌트를 만드는 것을 잘 설명한 유튜브 컨텐츠가 있어 해당 내용을 복기하고자 한다.
[TIL-20210705] Component Driven Development(CDD) / Storybook / CSS in JS 방법론
Component Driven Development(CDD) Component Driven Development(CDD)는 컴포넌트 주위에 개발 프로세스를 고정하는 개발 방법론이다. 컴포넌트 수준에서 시작해 페이지나 화면 수준에서 끝나는 것으로 "바닥부터 끝까지"(b
