| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- commit
- npm
- viewcontroller
- npm install
- Branch
- react-native
- xtring.log
- DevOps
- REACT
- JavaScript
- git
- ES6
- github
- rn
- styling
- React Native
- currying
- ReactNative
- nextJS
- shortcut
- js
- styled-components
- Docker
- vscode
- HTML
- GitLab
- Xcode
- ios
- Android
- Swift
- Today
- Total
목록Front-End/Styling (3)
xtring.dev
(deprecated)[FE] 🌬tailwindcss로 더 빠른 페이지 만들기(with React)
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을 떠나지 않고도 ..
[Styling] 💅Styled Components 이해하고 사용하기! (with React)
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를..
[Styling] Ant Design과 styled-components 함께 사용하기 : Ant Design + styled-components (based React)
styled-components를 사용하며 Ant Design를 사용해야하면 아래와 같이 사용해보세요. 기존의 기본 Tag들과 styled-components를 함께 사용하는 방식과 같습니다! 필요에 의해서 사용할 수도 있겠지만 이렇게 사용하는 경우는 크게 없을 것 같네요 🤓 Antd의 class에 일일히 접근해서 모든 스타일을 바꾸는 것 보다 root의 index.css에서 전역으로 Antd 클래스의 스타일을 Tune 해놓은 다음에 사용하는 것이 좋을 것 같습니다! 😎 (저만의 생각입니다..ㅎㅎ)