2024. 06. 10 (월) 7주차 - Daily Coding - Day01

 

 

 

37강

CSS 스타일링 part2.

- CSS-in-JS 방식은 자바스크립트에서 CSS를 작성하는 방식이다

- CSS-in-JS 방식은 CSS를 컴포넌트 레벨로 추상화  해서 관리할 수 있다

- styled-components는 리액트 컴포넌트 스타일링을 위해 CSS를 JS로 쓸 수 있게 만든 가장 많이 쓰이는 도구 중 하나이다

 

CSS 스타일링 part3.

- CSS Module은 일반적인 CSS 사용 방식과 비슷하나, CSS 클래스 명을 중첩되지 않게 사용할 수 있다

- 동적으로 CSS Module을 사용하고 싶을 땐 string className 처럼 사용할 수 있다.

- CSS Modules

CSS 스타일링을 그대로 사용하면서 클래스 명이 겹치지 않게 hashing 하여 이름을 생성.

 

유니크한 클래스명을 만들어 줌 (자동으로!)

[filename]\_[classname]\_\_[hash]

 

style.css 추가해주는 방법

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Adding a CSS Modules Stylesheet | Create React App

1. CSS 파일의 이름을 바꾼다 => '~.module.css'

2. 해당 CSS를 import 하는 js에서 CSS import 명을 수정한다 => import styles from. "./PaymentForm.module.css";

3. js에서 class명을 수정한다

=> className = {styles.newPayments}

=> className = {styles.newPayment}

=> className = {styles.newPaymentActions}

 

 

 

- 동적으로 CSS Modules에 스타일링하기

   <div className={`${firstStyle} ${isTrue && secondStyle}`}

=> <div className={`${styles.newPaymentControl} ${!objectState.name && styles.isTrue}`}>

=> .isTrue { border: 2px solid red; }

 

 

https://github.com/dev-owen/react-fundamental/tree/practice/3-12

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

 

 

38강

CSS 스타일링 Part4.

- tailwindcss

 

CSS Framework

다양한 CSS 프레임워크 도구들이 존재한다

Material UI, Ant Design, Chakra UI같은 라이브러리도 많이 사용한다.

 

*BOOTSTRAP : 트위터에서 개발한 프레임워크

 

 

TailwindCSS

- Utility first CSS Framework

- HTML 과 CSS 파일을 별도로 관리할 필요가 없다

- 클래스명을 고민할 필요가 없다

- 디자인이 일관되어 있다

- 자유롭게 커스텀이 가능하다

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.