고코몽의 프론트엔드 저장소 고코몽의 프론트엔드 저장소

React/Style

• Ant Design

  React/Style 2021. 6. 6. 20:55

  https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design Ant Design 모듈 설치 npm i antd index.js에 Ant Design 전역 스타일 추가 사용할 Ant Design Component import 예) import { Calendar } from 'antd'; Ant Design Icon 사용 npm install --save @ant-design/icons import { RollbackOutlined } from '@ant-design/icons'; 외부 Component 적용 시 Props 옵션을 확인할 것

  Read More
• React - Shadow

  React/Style 2021. 6. 6. 20:41

  React Shadow 모듈 설치 npm i react-shadow root.div 안의 태그들만 별도의 스타일 속성 지정 단점 공통적인 스타일인 경우에도 반복적으로 추가해야 함 외부와 내부가 차단되어 있어 document에 지정되어 있는 값을 상대적으로 표현할 때 제약사항 발생 // App.js import root from 'react-shadow'; // App.css 내용 삽입 const styles = ` .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-sp..

  Read More
• React - Styled Components

  React/Style 2021. 6. 6. 20:18

  Styled Components 모듈 설치 npm i styled-components // StyledButton.jsx import styled from 'styled-components'; const StyledButton = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; font-size: 20px; `; export default StyledButton; Styled Components 기능 확장 props 전달 Component에 props를 전달하여 스타일을 다르게 표현 s..

  Read More
• React - CSS Modules

  React/Style 2021. 6. 5. 23:21

  https://create-react-app.dev/docs/adding-a-css-modules-stylesheet Adding a CSS Modules Stylesheet | Create React App Note: this feature is available with react-scripts@2.0.0 and higher. create-react-app.dev CSS Module CSS 클래스가 중첩되는 것을 방지 CSS 파일의 확장자를 .module.css 로 생성 CSS Module 적용 // App.js import logo from './logo.svg'; import styles from './App.module.css'; import Button from './components/But..

  Read More
• React - Style Loaders

  React/Style 2021. 6. 5. 22:25

  create-react-app 으로 프로젝트 생성 후 npm run eject 실행 config/webpack.config.js 확인 - import './App.css'; 에 해당하는 설정 // CSS (webpack.config.js) // "postcss" loader applies autoprefixer to our CSS. // "css" loader resolves paths in CSS and adds assets as dependencies. // "style" loader turns CSS into JS modules that inject tags. // In production, we use MiniCSSExtractPlugin to extract that CSS // to a file..

  Read More