# styled components

352개의 포스트
post-thumbnail

Styled-Components로 React 스타일하기.

Styled-Components는 대표적인 CSS-In-JS 라이브러리이며, Styled-Components의 사용법에 앞서, CSS-In-JS에 대해 알아보자.CSS-In-JS는 단어 그대로 자바스크립트 코드에서 css를 작성하는 방식이다. 전통적으로 HTML, CS

약 7시간 전
·
0개의 댓글
·
post-thumbnail

TypeScript 에서 라이브러리 사용 시 에러 잡기

드디어 TypeScript의 세계로 발을 들여놓았다. TypeScript의 편안함을 알기 전에 호환하는 라이브러리 에러 잡느라 바쁘다 바빠react router dom을 사용하려고 설치하니 위와 같은 문장이 나왔다. 강의에선 이렇게 명령어를 입력하면 된다고 들었으나..

어제
·
0개의 댓글
·

styled-components

npm install styled-componentsimport styled from 'styled-componentsstyled-components를 이용하면 컴포넌트를 만들 때 스타일은 미리 주입해서 만들 수 있음.예시로 padding:20px인 div박스를 sty

2일 전
·
0개의 댓글
·

스타일드 컴포넌트, styled-components, CSS in JS

위코드에서 공부하며 정리한 내용입니다.CSS-in-JS 는 자바스크립트 파일 안에서 css 를 작성하는 방법입니다. JS 파일안에서 css 코드를 작성하므로 css 의 변수와 함수를 그대로 사용할 수 있고, css 클래스명을 해시 값으로 자동 생성해 작명에 대한 고민을

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

AS and Attrs (태그 변경)

컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을 떄 (컴포넌트를 확장하고 싶지 않고 그냥 뭔가를 추가할 계획이 없는..)또한 원한다면 🚀 (위코드) 부분에서 HTML 태그의 속성을 설정할 수 있다는 것이다.아래 캡쳐 부분의 속성(required)을 sty

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

[React] AutoComplete 구현하기.

오랜만의 포스트다. 사이드 프로젝트 진행 중 AutoComplete를 구현해야할 이유가 생겼다. 평소 회사에서 MUI를 사용하는데 사이드 프로젝트에서까지 쓰고싶지는 않았다. 그게 이유다. 바로 시작해보도록 하겠다. . . . 우선, 컨테이너부터 만들자.

6일 전
·
0개의 댓글
·

Convi 개발일지 - Style 작업 세팅

Convi 개발일지 - Style 작업 세팅

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

styled-components 정리

$ npm i styled-components그리고 이걸 styled라는 이름으로 가져와서 사용import styled from 'styled-components';유의할 점 세가지컴포넌트 이름은 대문자로 시작styled 뒤에 사용해야 할 HTML 태그명 입력백틱(\`

7일 전
·
0개의 댓글
·

Typescript와 Styled Components

프로그래밍 언어 컴파일 전에 type을 확인하여 작동 전에 오류가 있는지 알려주는 javascript의 프레임워크 중 하나이다.인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다.위에서 Dummy라는 함수는 text와 active을 속성으로 가지며, interfa

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

[리액트] css 바닥 잘림 현상 min-height로 해결

css 박스를 가득 채우다보면 margin-bottom을 줘도 먹히지 않거나 잘려있을 때가 있음위 코드에서 Container의 크기가 지정 됐음에도 컨텐츠가 그 이상으로 들어가면 우리 배가 늘어나는 것처럼 비정상적으로 늘림위 코드는 최상단 div에 flex를 이용하여

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

[리액트] 반응형 @media screen and ()

d.ts 파일에 device, PC 등 변수를 만들어 props로 크기 넣기보통 제외하고 @media screen만 사용함only : 뒤의 조건에서 만not : 뒤의 조건을 제외한all : 모든 미디어 타입aural : 음성 합성 장치braille : 점자 표시 장치h

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

[React] styled-components (CSS in JS)

1) 기본 인라인 style (비교)key값으로 카멜케이스를 사용해야 한다2) styled-components 기초CSS 문법을 그대로 사용할 수 있다글씨, 컴포넌트, 태그 상관없이 감싸서 사용할 수 있다1) if문으로 상황에 따라 구분2) onClick이벤트에 따라

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

CSS의 역사

image가장 전통적인 CSS 방식에는 크게 3가지 방식이 존재한다.Inline CSS(- Internal CSS(- External CSS(일반적으로 간단하게 태그안에 style을 적용하는 방법HTML 페이지에 쉽고 빠르게 CSS 룰을 삽입할 수 있다.변경에 대한 미

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

(CSS) (Styled-components) 아이콘 클릭시 제자리 회전 시키기

Styled-components로 아이콘 제자리 회전 애니메이션 만들기

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

Styled Components

Styled Components는 앞서 배운 CSS in JS 라는 개념이 대두되면서 나온 라이브러리이다.\-> CSS를 컴포넌트화 시킴으로써 많은 불편함을 해결해주도록 해주는 라이브러리npm install --save styled-componentsStyled Com

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

스타일드 컴포넌트(styled-components) 잘 활용하기

스타일드 컴포넌트에서는 컴포넌트를 상속 받아 추가 스타일을 붕여한 컴포넌트를 선언할 수 있다. as 속성을 활용하면 스타일드 컴포넌트로 작성된 컴포넌트의 태그명을 교체하여 쓸 수 있다. 스타일드 컴포넌트로 생성한 컴포넌트에는 attrs()메서드를 활용해 속성값을 부여할 수 있다. keyframes를 불러와 애니메이션 동작을 선언하고, 해당 값을 an...

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

Sunnyside agency page 4. 이미지 & 텍스트 카드

사실 조금씩 작성은 해나가고 있지만, 도대체 어떻게 정리해야할 지 감을 못잡고 있다.하지만 중요한 것은, 완벽하지 않아도 계속해서 결과물을 내놓는 것이라고 생각한다. 그것이 지난 세월 개발자로 지낸 동안 MVP를 내놓고 계속 개발하던 동안 내가 했던 것인데, 너무 완벽

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

Javascript - Styled Components

스타일 컴포넌트

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

Sunnyside agency page 3. 헤더 및 개고생

세상에, 무언가를 설계하고 적으면서 코딩하는게 이렇게 어려운 일이었던가??? 결국 지금까지 혼자서 뭐든 만들어왔고 앞으로 무엇이든 만들 수 있다고 생각했던 나에겐 정말 자존심 상하는 일이었다... 사실 지금 생각하니 개발자들에게 있어 협업이라는 것이 얼마나 중요한가

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

styled-components 기록용

CSS-in-JS는 자바스크립트 파일 안에서 css를 작성할 수 있는 방법입니다.CSS-in-JS는 js 파일 안에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용할 수 있습니다. 그리고 css 클래스명을 해시 값으로 자동으로 생성하여 클래스 이름

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