xtring.dev

Ref. 📗 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 최근 React 와 함께 사용하는 스타일 라이브러리/프레임워크가 정말 다양해졌습니다. 대표적으로 styled-components, emotion, Tailwind css 등이 있는데 오늘은 Tailwind 에 대해서 알아보려고 합니다! 먼저, Tailwind 의 장점은 tailwind 홈페이지에서 볼 수 있듯이 Rapidly build modern websites without ever leaving your HTML. "HTML을 떠나지 않고도 ..

Styled Components 1. 스타일? Styled Components를 왜 배우는가! SASS 코드를 설치 없이 사용하고 CSS 파일 없이 CSS 코드를 짜고 게다가 이 코드를 React Native 앱으로 공유할수 있습니다. 가장 큰 장점은 기존의 className을 사용하지 않는 것과 컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있다는 점입니다! 2. 셋업 npx create-react-app 을 통해 환경을 설치합니다. 그리고 /src 디렉토리에 App.js와 index.js을 제외한 모든 파일을 제거합니다. 가장 먼저 버튼을 만드는데 hover, active state, 배경색을 바꿔보겠습니다.(js와 css를..

styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)

1. Introduce Flexbox 기존의 웹 layout을 정의하는 방식 보다 세련되고 편한 방법을 제공합니다. Flexbox를 잘 알고 있다면 어떠한 Layout이라도 쉽고 빠르게 정의할 수 있습니다. 사이즈가 불명확하거나 동적인 경우에 효율적이며 쉽게 예측 가능하여 사용하기 편합니다. 웹 뿐만 아니라 React Native에서도 주로 사용되는 Position 방법이기 때문에 잘 알아두면 아주 쓸모가 있습니다! 기본적으로 웹에서는 div요소 즉 block 요소를 기본으로 수직정렬 상태를 가지고 있습니다. 이를 수평정렬하기 위해서는 1. 자식 요소(children)를 inlin-block으로 지정하고 2. `float` 속성 지정을 사용합니다. .item { display: inline-block; ..