64 :: CSS Module, UI, CSS 프레임워크, CS in JS

엘리스 SW 엔지니어 트랙 64일차

온라인 강의날

 

 

CSS Module

class, id 등에 랜덤 문자열(hash) 달아 준다

 

CSS Module 사용 예시

app.module.css

.title {
  font-size: 2.5ream;
  color: palevioletred;
}

 

App.jsx

import styles from "./app.module.css"

export default function App() {
  return (
    <div>
      <h1 className={styles.title}>Hello World</h1>
    </div>
  )
}

 

 

UI 프레임워크

이미 만들어져 쉽게 쓰기에 좋다

해당 프레임워크 디자인 벗어나기 쉽지 않다

컴포넌트 커스터마이징 어렵다

 

Ant Design, material UL 등

 

Ant Design 사용 예시

import "antd/dist/antd.css"
import { Button } from "antd"

export default function App(){
  return (
    <div>
      <Button type="primary">Primary Button</Button
      <Button type="secondary">Secondary Button</Button
      <Button type="danger">Danger Button</Button
    </div>
  )
}

 

 

CSS farmework

거대한 CSS 파일 가져온다

직접 CSS 작성하지 않는다

HTML에 클래스만 적어주면 스타일 된다

 

W3Css, Tailwind CSS 등

 

w3 css 사용 예시

import { Helmet } from 'react-helmet'

export default function App() {
  return (
    <div>
      <Helmet>
        <link rel ="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
      </Helmet>
      
      <div className="w3-container w3-green">
        <h1>W3 Schools</h1>
      </div>
    </div>
  )
}

 

 

CS in JS

JSX 파일안에서 스타일링 해결

컴포넌트 재사용성 쉬워진다

 

styled components, emotion 등

 

styled components 사용예시

import styled from "styled-components"

const Title = styled.h1`
  font-size: 1.5rem;
  text-align: center;
  color: blue;
`

export default function App() {
  return (
    <Title>Hello World</Title>
  )
}

 

SASS + CSS = SCSS

styled components에서 기본적으로 SCSS 문법 사용 가능

 

 

cross-env

다른 운영체제에서 환경 변수(env) 설정 동일하게 할 수 있게 도와주는 라이브러리

 

 

참고 링크 

cross-env

=> https://www.npmjs.com/package/cross-env

 

styled-components

=> https://styled-components.com/