원하는 것을 만드는 수단

테일윈드. 사람인 등의 채용 사이트를 보다보면 종종 언급되는 CSS 라이브러리들 중 하나죠? 처음 테일윈드라는 녀석을 보았을 때는 상당히 친숙한 편이었습니다. 왜냐하면 회사에서 화면단은 부트스트랩을 사용하여 직접 디자인하고 있었는데 너무나도 닮아있었죠. 그래서 신년 계획인 개인 프로젝트에 적용하기로 했습죠! 이후에 폰트를 적용하고자 하는 태그에 className='font-KR'를 적용해주면? 정갈한 폰트로 변하게 되죠! 그리고 한글 폰트와 영어 폰트 두 가지를 적용하고자 이렇게 적용하여 사용하고 있습니다. 도움이 되셨길!

따로 CSS 파일을 만들어서 관리하는 것에서 벗어나 자바스크립트 파일 안에서 사용할 수 있도록 만들어주는 라이브러리입니다. 컴포넌트 별로 개발하는 리액트의 특성상, 필요한 CSS만을 사용해서 적용시켜줄 수 있는 이 라이브러리는 합이 잘 맞겠죠? 설치: npm i styled-components 사용 예시: // keyframes : 애니메이션 import styled, { keyframes } from "styled-components" const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; // 정의한 애니메이션 적용 animation: ${animation} 1s linear i..