[ React ] 05. style , 스타일

 

 

react style

 

 

1. bootstrap

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

 

https://react-bootstrap.netlify.app/docs/getting-started/introduction

Introduction | React Bootstrap

 

 

2. material

https://mui.com/

MUI: The React component library you always wanted

 

 

https://mui.com/material-ui/getting-started/overview/

Overview - Material UI

 

 

 

3. 모듈

 

CSS 클래스가 자동으로 고유한 이름으로 생성되어 전역 스코프의 CSS 클래스와 겹치지 않도록 합니다.

 

일반적으로, React 프로젝트에서는 CSS를 사용하여 컴포넌트의 스타일을 지정합니다. 그러나 전역으로 적용되는 CSS는 프로젝트가 커질수록 유지 관리가 어려워질 수 있습니다. 이를 해결하기 위해 CSS 모듈은 컴포넌트 내에서만 스타일이 적용되도록 돕습니다.

 

module.css 파일은 일반적인 CSS 파일과 비슷하지만, 중요한 차이점은 클래스 이름이 더 이상 전역으로 유지되지 않고 파일 내에서 고유한 이름으로 변환된다는 것입니다. 이를 통해 컴포넌트 간의 스타일 충돌을 피하고 스타일을 더 모듈화 하여 관리할 수 있습니다.

 

/* styles.module.css */

.container {
  width: 100%;
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #333;
}

 

 

import React from 'react';
import styles from './styles.module.css';

const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;

 

여기서 styles.container와 styles.title은 고유한 이름으로 변환된 클래스 이름입니다. 이를 통해 해당 컴포넌트에서만 스타일이 적용되고, 전역으로 적용되는 것을 피할 수 있습니다.

 

파일명.module.css

 

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

Adding a CSS Modules Stylesheet | Create React App

 

장점:

• 스타일이 컴포넌트 스코프에만 적용되어 전역 스타일 충돌 방지.
• 기존 CSS 문법을 그대로 사용할 수 있음.

단점:

• 일반 CSS보다 약간 복잡한 설정이 필요함.
• 클래스명을 동적으로 구성할 때 제약이 있을 수 있음.

 

4. sass (scss)

 

React에서 Sass를 사용하여 스타일링을 할 수 있으며, 기존 CSS보다 더 강력한 기능(중첩, 변수, 믹스인 등)을 제공합니다.

yarn add sass

 

​

https://sass-guidelin.es/ko/#section

 

// App.scss
$primary-color: lightseagreen;

.container {
  background-color: $primary-color;
  padding: 20px;

  h1 {
    color: white;
  }
}

// App.js
import './App.scss';

const SassComponent = () => {
  return (
    <div className="container">
      <h1>Hello, Sass!</h1>
    </div>
  );
};

export default SassComponent;

 

장점:

• 변수, 중첩, 믹스인 등 강력한 기능을 제공.
• 복잡한 스타일 구조를 간결하게 유지할 수 있음.

단점:

• CSS Modules를 사용하지 않으면 전역 스타일 충돌 가능.
• Sass를 설치하고 설정하는 추가적인 작업이 필요.

 

 

5. styled-components

컴포넌트 단위로 스타일을 지정할 수 있어 코드의 가독성과 유지보수성을 향상해 줍니다.

Styled-Components를 사용하면 특정 컴포넌트에 스타일을 지정하는 동시에 JavaScript의 기능을 활용하여 동적으로 스타일을 변경할 수 있습니다. 예를 들어, 컴포넌트의 props에 따라 스타일을 동적으로 변경할 수 있습니다.

이 라이브러리를 사용하면 CSS 클래스 이름을 작성하고 관리하는 번거로움을 줄일 수 있습니다. 대신에 각 스타일을 해당하는 React 컴포넌트 안에 작성하여 관리할 수 있습니다. 또한, Styled-Components는 CSS-in-JS 방식으로 작동하기 때문에 런타임에 실제 CSS 스타일이 삽입되므로 트리 쉐이킹(tree shaking)이나 코드 최적화를 할 수 있습니다.

 

styled-components는 인기 있는 CSS-in-JS 라이브러리로, JavaScript 내에서 CSS를 작성하고, 스타일이 적용된 React 컴포넌트를 생성할 수 있습니다.

 

Sass Guidelines — Korean translation

 

장점:

• 컴포넌트 수준에서 스타일을 정의할 수 있으며, 스타일을 재사용 가능.
• JavaScript의 조건문, 함수 등을 활용하여 동적 스타일링이 가능.
• 스타일의 완전한 캡슐화.

단점:

• 프로젝트가 커질수록 성능 문제 발생 가능 (특히, 매우 많은 컴포넌트가 있을 때).
• 런타임에 CSS가 생성되므로, 코드 분석 및 디버깅이 어렵다고 느낄 수 있음.

 

 

styled-components
yarn add styled-components 
또는 
npm install styled-components

import styled from 'styled-components'

 

 

import React from 'react';
import styled from 'styled-components';

// 스타일드 컴포넌트 생성
const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'white'};
  color: ${props => props.primary ? 'white' : 'blue'};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid blue;
  border-radius: 3px;
`;

// 스타일드 컴포넌트를 사용한 React 컴포넌트
const MyComponent = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default MyComponent;

 

 

확장프로그램 설치 :  vscode-styled-components 검색 설치

 

https://styled-components.com/

styled-components

 

 

animation

https://styled-components.com/docs/api#keyframes

styled-components: API Reference

 

 

 

 

https://emojipedia.org/

📙 Emojipedia — 😃 Home of Emoji Meanings 💁👌🎍😍

 

 

 

 

추가 :

https://styled-components.com/docs/advanced

styled-components: Advanced Usage

 

 

​6. emotion

Emotion은 또 다른 CSS-in-JS 라이브러리로, styled-components와 비슷한 방식으로 작동하며, 빠르고 유연한 성능을 제공합니다. styled 또는 css 헬퍼 함수를 통해 스타일링이 가능합니다.

 

 

https://emotion.sh/docs/introduction

 

Emotion – Introduction

 

/** @jsxImportSource @emotion/react */

 

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const containerStyle = css`
  background-color: lightblue;
  padding: 20px;
`;

const headingStyle = css`
  color: darkblue;
`;

const EmotionComponent = () => {
  return (
    <div css={containerStyle}>
      <h1 css={headingStyle}>Hello, Emotion!</h1>
    </div>
  );
};

export default EmotionComponent;

 

장점:

• 매우 빠르고 경량화된 CSS-in-JS 솔루션.
• styled-components와 유사하지만, 더 빠르고 유연한 성능을 제공.
• 다양한 스타일링 옵션 제공 (태그형 styled API, css 함수 등).

단점:

• 마찬가지로 CSS가 런타임에 생성되므로 성능 이슈가 발생할 수 있음.
• styled-components와 유사한 단점(디버깅이 어려움 등).

 

 

 

7. styled-jsx

styled-jsx는 Next.js에서 기본 제공되는 CSS-in-JS 방식으로, 스타일을 컴포넌트에 국한시키는 방법입니다. 일반적인 CSS 문법을 사용하면서 컴포넌트 내부에 스타일을 선언할 수 있습니다.

 

장점:

• 컴포넌트 수준에서 스타일을 정의하여 스타일 충돌 방지.
• Next.js와 함께 사용할 때 매우 유용하며, 별도의 설정이 필요 없음.

단점:

• 글로벌 스타일 적용이 복잡할 수 있음.
• Next.js 프로젝트 외에서는 추가 설정이 필요함.

 

yarn add styled-jsx
npm install --save styled-jsx

 

return (
    <div>
      <p>hello world</p>
      <style jsx>{`
        p {
          color: green;
        }
      `}</style>
    </div>
  );

 

 

import React from 'react';

const Test = () => {
  return (
    <div className="container">
      <h1>Hello, styled-jsx!</h1>
      <p>This is a paragraph styled with styled-jsx.</p>

      {/* Styled JSX */}
      <style jsx>{`
        .container {
          background-color: #f0f0f0;
          padding: 20px;
          border-radius: 10px;
          text-align: center;
        }
        h1 {
          color: #333;
          font-size: 24px;
        }
        p {
          color: #555;
          font-size: 16px;
        }
      `}</style>
    </div>
  );
};

export default Test;

 

---

 

 

8.  taillwindcss

 

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 클래스 이름을 사용하여 직접 스타일을 적용하는 방식입니다. React와 결합하면 매우 빠르고 효율적인 스타일링이 가능합니다.

 

장점:

• 스타일을 빠르게 적용할 수 있는 유틸리티 기반 클래스 제공.
• 별도의 CSS 파일 없이도 스타일링 가능.
• 반응형 디자인을 쉽게 구현 가능.

단점:

• HTML 코드가 복잡해질 수 있음 (클래스명이 많아지면 가독성 저하).
• 재사용 가능한 스타일을 만드는 데는 추가적인 작업이 필요.

 

https://tailwindcss.com/

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

 

 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

 

tailwind.config.js 설정

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}', // React 파일 경로 설정
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

src/index.css 파일에 Tailwind의 기본 스타일을 추가

 

@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

src/main.jsx 파일에

 
import './index.css';  // Tailwind CSS를 불러옴

 

 

색상 관련 명령어

• 배경색 (bg-)
  • bg-{color}: 배경 색상을 지정하는 클래스입니다.
  • 예시: bg-blue-500, bg-gray-100

<div class="bg-blue-500 text-white p-4">
  배경이 파란색입니다.
</div>

 

 

텍스트 색상 (text-)

• text-{color}: 텍스트 색상을 지정하는 클래스입니다.
• 예시: text-red-500, text-gray-700

<p class="text-red-500">
  빨간색 텍스트입니다.
</p>

 

 

여백 및 간격 관련 명령어

• 패딩 (p-)
  • p-{size}: 요소 안쪽 여백(패딩)을 지정하는 클래스입니다.
  • 예시: p-4, p-8

<div class="bg-gray-200 p-4">
  패딩이 4단위 적용된 박스입니다.
</div>

 

마진 (m-)

• m-{size}: 요소 바깥쪽 여백(마진)을 지정하는 클래스입니다.
• 예시: m-2, m-6

<div class="m-6 bg-gray-100">
  마진이 6단위 적용된 박스입니다.
</div>

 

 

수평/수직 패딩 및 마진 (px-, py-, mx-, my-)

• px-{size}: 수평 패딩
• py-{size}: 수직 패딩
• mx-{size}: 수평 마진
• my-{size}: 수직 마진

<div class="bg-green-500 text-white px-6 py-4">
  수평 패딩 6, 수직 패딩 4가 적용된 박스입니다.
</div>

 

 

 

레이아웃 관련 명령어

• Flexbox (flex)
  • flex: 요소를 Flexbox 컨테이너로 설정합니다.
  • justify-{option}: 자식 요소의 가로 정렬 방식을 지정합니다.
  • items-{option}: 자식 요소의 세로 정렬 방식을 지정합니다.
  • 예시: justify-center, items-center

<div class="flex justify-center items-center h-64 bg-gray-300">
  가운데 정렬된 콘텐츠
</div>​

 

 

그리드 레이아웃 (grid)

• grid: 요소를 그리드 컨테이너로 설정합니다.
• grid-cols-{n}: 그리드의 열 개수를 설정합니다.
• gap-{size}: 그리드 아이템 간의 간격을 지정합니다.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-400 p-4">1번 박스</div>
  <div class="bg-blue-500 p-4">2번 박스</div>
  <div class="bg-blue-600 p-4">3번 박스</div>
</div>

 

 

타이포그래피 명령어

• 폰트 크기 (text-)
  • text-{size}: 폰트 크기를 지정하는 클래스입니다.
  • 예시: text-sm, text-lg, text-xl, text-2xl

 

<p class="text-xl">
  큰 텍스트
</p>

 

 

폰트 굵기 (font-)

• font-{weight}: 폰트의 굵기를 지정합니다.
• 예시: font-bold, font-semibold, font-light

<p class="font-bold">
  굵은 텍스트
</p>

 

 

텍스트 정렬 (text-)

• text-{alignment}: 텍스트의 정렬 방식을 설정합니다.
• 예시: text-left, text-center, text-right

<p class="text-center">
  가운데 정렬된 텍스트
</p>

 

 

테두리 관련 명령어

• 테두리 굴림 (rounded-)
  • rounded-{size}: 테두리의 모서리를 둥글게 만듭니다.
  • 예시: rounded, rounded-lg, rounded-full

<div class="bg-yellow-300 p-4 rounded-lg">
  둥근 모서리를 가진 박스
</div>​

 

테두리 (border)

• border: 테두리를 추가합니다.
• border-{color}: 테두리 색상을 지정합니다.
• border-{size}: 테두리 두께를 설정합니다.

<div class="border border-blue-500 p-4">
  파란색 테두리를 가진 박스
</div>

 

배경 이미지 및 크기 관련 명령어

• 배경 이미지 (bg-)
  • bg-cover: 배경 이미지를 요소 크기에 맞춰 꽉 채웁니다.
  • bg-center: 배경 이미지를 중앙에 배치합니다.

<div class="bg-cover bg-center h-64" style="background-image: url('path/to/image.jpg');">
  배경 이미지가 적용된 박스
</div>

 

 

반응형 디자인 명령어

• Tailwind CSS는 반응형 디자인을 쉽게 구현할 수 있는 유틸리티 클래스를 제공합니다. 미디어 쿼리 접두사를 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.
  • sm:, md:, lg:, xl: 접두사로 각 화면 크기별로 스타일을 지정합니다.

<div class="bg-gray-300 p-4 sm:bg-red-500 md:bg-green-500 lg:bg-blue-500 xl:bg-purple-500">
  화면 크기에 따라 배경색이 바뀝니다.
</div>

 

• sm:: 작은 화면(640px 이상)
• md:: 중간 화면(768px 이상)
• lg:: 큰 화면(1024px 이상)
• xl:: 매우 큰 화면(1280px 이상)

 

 

---

 

 

9. reset

 

https://www.npmjs.com/package/styled-reset

styled-reset

 

npm i styled-reset

yarn add styled-reset

 

 

https://www.npmjs.com/package/styled-normalize

styled-normalize

 

 

npm install --save styled-normalize

yarn add styled-normalize

 

 

10. masonry

 

yarn add react-masonry-css

 

 

https://www.npmjs.com/package/react-masonry-css

react-masonry-css

 

 .my-masonry-grid {
  display: flex;
  margin-left: -30px; /* gutter size offset */
  width: auto;
}
.my-masonry-grid_column {
  padding-left: 30px; /* gutter size */
  background-clip: padding-box;
}

/* Style your items */
.my-masonry-grid_column > div { 
  background: grey;
  margin-bottom: 30px;
}

 

 

1. .my-masonry-grid: 메이슨리 그리드를 포함하는 컨테이너를 스타일링하는 클래스 선택기입니다. 여기서는 display: flex로 설정되어 있어 이 컨테이너의 자식 요소들이 플렉스 컨테이너 내에서 배치됩니다. margin-left: -30px는 컨테이너의 왼쪽에 음수 마진을 생성하여 거터(Gutter) 크기를 오프셋하는 데 사용됩니다.
2. .my-masonry-grid_column: 이 클래스는 메이슨리 그리드 내의 각 열에 적용됩니다. padding-left: 30px로 설정되어 있어 열 사이의 공간(거터 크기)을 만듭니다. background-clip: padding-box;는 배경이 패딩 영역에만 확장되도록 보장합니다.
3. .my-masonry-grid_column > div: 이 선택기는 메이슨리 그리드의 각 열 내의 div 요소를 대상으로합니다. 회색 배경으로 스타일을 지정하고 각 항목 사이에 수직으로 30px의 하단 마진을 추가하여 요소들을 스타일링합니다.

 

 

 

팁 ) 줄바꿈 개행처리 

 

Window : \r\n
Mac OS X : \r

 

This is a line. This is \r\n another line. And  \r\n this is the third line.

 

 \r\n 를 개행으로 인식 

css  :  white-space: pre-wrap