Category: style

Styled-components Typescript 적용하기 (+Media query)

시작하기기존에 styled-components 반응형 및 스타일 리셋 설정하기 포스트을 통해서 스타일 최초 설정해보았습니다. theme를 입력했을때 typescript로 자동으로 연결해주는 부분이 미흡했습니다. 타입스크립트를 styled-components 와 제대로 사용해보도록 하겠습니다. 설치하기1npm i styled-components &&a

styled-components lint 적용하기

시작하기styled-components를 사용시에 작성오류를 찾거나 교정을 해줄수 있도록 lint를 추가해보도록 하겠습니다. 설치하기 styledlint (duh) stylelint-processor-styled-components ( 스타일 추출 ) stylelint-config-styled-components ( 구성 요소와 충돌하는 stylelint

CSS will-change 속성

시작하기웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할 때 발생하는 깜빡이는 현상에 관해 알고 있는 사람은 “하드웨어 가속”이라는 용어를 한번쯤 들어본 적이 있을 것 입니다. 하드웨어 가속하드웨어 가속을 활성화하는 방법으로 브라우저를 속여 강제로 animation이나 transform의 시키는 방법을 이용했습니

styled-components 반응형 및 스타일 리셋 설정하기

시작하기저번 포스트에서 styled-components 간단한 사용방법을 알아보았습니다.이번 포스트에서는 브라우저 스타일을 리셋하는 방법과 함께 반응형 설정하는 방법을 알아 보겠습니다. npm install styled-components @types/styled-components패키지를 설치해줍니다. 초기 설정브라우저 스타일 리셋을 하도록 하겠습니다.먼

Tailwindcss 사용법

시작하기저번 포스트에서 Tailwindcss의 초기 설정을 완료햇습니다.다음으로 사용법을 알마 보도록 하겠습니다. Tailwindcss는 정말로 사용하기 쉽습니다.부트스트랩을 사용해보신 분은 익숙하실겁니다. 클래스에 이름을 넣어 주기만 하면 끝! 정말 간편합니다.부트스트랩의 경우 기본 스타일이 정해져 있지만, tailwind의 경우 css를 축약형태로 클래

React Next.js에 Tailwindcss 적용하기

시작하기부트스트랩과 흡사한 ui 프레임워크 입니다.Tailwind CSS는 사용자 지정이 가능한 저수준 CSS 프레임 워크로, 재정의를 위해 싸워야하는 성가신 스타일없이 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공하고 있습니다. 대부분의 ui 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다.하지만 사이트

styled-components 리액트 컴포넌트 스타일링

시작하기styled-components는 리액트 CSS-in-JS 관련 라이브러리입니다.css를 자바스크립트 파일안에 작성하는 형태입니다.기존 css의 경우 웹사이트를 불러올때 모든 css 로딩합니다.하지만 styled-components의 경우에는 컴포넌트가 실행 될때만 스타일을 로드합니다.사용하지 않는 스타일은 표현하지 않습니다. 설치npm instal

리액트에 부트스트랩(bootstrap) 사용하기

#시작하기부트스트랩은 ui프레임워크로 손쉽데 ui디자인을 구현할수 있습니다다React프로젝트에서 부트스트립을 사용해보도록하겠습니다.프로젝트 설치하기npm install react-bootstrap bootstrap로 패키지를 설치 합니다. Stylesheets중요 - 최상단의 루트파일인 src/index.js 또는 App.js 파일에 다음 스타일을 추가해