1. CSS-in-JS 중 Emotion

- styled components보다 더 작은 번들 크기, 더 빠른 로딩 속도
- 서버 사이드 렌더링을 지원함.

2. Bootstrap

• 가장 널리 사용되는 CSS 프레임워크! 트위터에서 개발됨.
• 12열 그리드 시스템으로 반응형 웹 디자인을 지원
• 미리 정의된 스타일과 컴포넌트(버튼, 내비게이션 바, 모달 등)가 풍부함.
• 커스터마이징이 가능하며, Sass 변수를 사용하여 쉽게 테마 변경 가능.
• 광범위한 문서화와 큰 커뮤니티 지원.

장점:
사용하기 쉽고, 다양한 예제와 템플릿이 제공됨.
광범위한 브라우저 호환성.
강력한 커뮤니티 지원과 풍부한 학습 자료.

단점:
커스터마이징하지 않으면, 많은 사이트가 비슷한 디자인을 가질 수 있음.
불필요한 스타일과 컴포넌트로 인해 최종 CSS 파일이 클 수 있음.

3. Foundation

• ZURB에서 개발된 강력한 프론트엔드 프레임워크
• 반응형 웹 디자인을 위한 유연한 그리드 시스템
• 접근성을 고려한 컴포넌트 제공
• 커스터마이징이 쉬운 Sass 기반의 스타일
• 이메일 템플릿을 위한 Foundation for Emails 제공

장점:
매우 유연하고 커스터마이징이 용이.
접근성과 반응형 디자인을 중점으로 설계됨.
다양한 기업용 템플릿과 모듈 제공.

단점:
학습 곡선이 다소 높을 수 있음.
문서화가 다른 프레임워크보다 덜 친절할 수 있음.

4. Bulma

• 최신 CSS Flexbox를 기반으로 한 프레임워크.
• 직관적이고 가벼운 디자인.
• 반응형 그리드 시스템과 다양한 UI 컴포넌트 제공.
• 모바일 퍼스트 접근 방식.
• 클래스 이름이 일관되고 명확함.

장점:
간결하고 사용하기 쉬움.
Flexbox 기반으로 현대적인 레이아웃을 쉽게 구현.
가볍고, 불필요한 JavaScript 의존성이 없음.

단점:
기능이 상대적으로 적어 큰 프로젝트에서는 한계가 있을 수 있음.
커뮤니티와 문서화가 Bootstrap에 비해 작음.

CSS

전통적인 CSS는 ".css" 확장자를 가진 별도의 스타일시트 파일을 생성한다.

구조와 스타일을 분리된 파일에 저장하는 방식이다.

이렇게 하면 스타일이 적용될 범위를 지정하지 않아서 스타일 충돌이 일어날 위험이 있고, 범위를 지정해도 어떤 스타일이 어떻게 적용될 선택자를 통해서 스타일이 적용될 범위를 지정하는데, 어떤 스타일이 어떻게 적용될지 제대로 예측하기 어려울 수 있다. 

<예시>

/* style.css */
#card {
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid green;
}

#btn {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid green;
}

(#은 아이콘 선택자.)

CSS-in-JS

CSS-in-JS는 자바스크립트 코드에서 CSS를 작성하는 방식을 말한다. 웹 애플리케이션에서  컴포넌트 단위로 스타일을 작성하여 스타일 충돌을 방지하고, 동적 스타일링을 지원하기 위해 등장했다. 2014년에 처음 소개됨.

이후 이 방식을 적용한 많은 라이브러리가 등장했는데 대표적으로 styled-components와 Emotion이 있다.

<특징>

• 스타일링의 범위가 한정되어 있어 스타일 충돌이 일어날 가능성이 줄어든다.
• 스타일이 컴포넌트와 함께 위치해서 가독성이 향상되었다. 
• state, props, API 데이터 기반의 동적 스타일링 용이하다.
• CSS-in-JS 라이브러리는 스타일을 동적으로 생성하므로, 미리 컴파일된 CSS와 비교했을 때 초기 로딩 시간이 조금 길 수 있다.

<예시>

import React from 'react';

function Card() {
    const cardStyle = {
        width: '300px',
        padding: '20px',
        borderRadius: '10px',
        border: '1px solid green'
    };
    const btnStyle = {
        padding: '10px',
        borderRadius: '5px',
        border: '1px solid green'
    };

    return (
        <div style={cardStyle}>
            <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg" alt="gfg-logo" />
            <p>GeeksforGeeks Interactive Live and Self-Paced Courses to help you enhance your programming.</p>
            <button style={btnStyle}>Explore Now</button>
        </div>
    );
}

export default Card;

▷ 초기 CSS-in-JS
처음에는 빌드 타임(Build Time)에서만 스타일링을 결정하는 라이브러리들이 있었다. 빌드 타임에서는 모든 스타일을 미리 계산하고 적용할 수 있지만, 동적인 스타일링을 하는 데 한계가 있었다. 이를 해결하기 위해 런타임 CSS-in-JS가 등장했다.

▷ 런타임 CSS-in-JS
런타임 CSS-in-JS는 props가 변할 때마다 스타일을 동적으로 생성하여, 동적인 스타일링이 가능하게 한다. 빌드 시점에서 모든 스타일이 결정되지 않고, 런타임에서도 스타일을 생성한다. 이는 동적인 스타일을 쉽게 적용할 수 있게 하지만, 복잡한 스타일 계산이 필요할 때 런타임 오버헤드가 발생할 수 있다.

▷ 제로 런타임 CSS-in-JS (Zero-runtime CSS-in-JS)
이 문제를 해결하기 위해 제로 런타임 CSS-in-JS가 등장했다. 제로 런타임 CSS-in-JS는 런타임에서 동적으로 스타일을 생성하지 않고, 빌드 시점에서 모든 스타일을 미리 계산하여 적용하는 방식이다. 이 접근 방식은 런타임 오버헤드를 줄이고 성능을 최적화할 수 있다.

CSS란? 

Cascading Style Sheet의 약자로, 웹 페이지를 만들 때 스타일링에 사용되는 스크립팅 언어이다. javascript / html과 함께 가장 인기 있는 웹 개발 기술이다. 
원래 css가 엄청 많이 쓰였는데 sass의 등장으로 기본적인 css의 사용량이 많이 줄었다. sass의 발전된 버전인 scss도 css를 대신해서 많이 쓰이고 있다.

CSS 전처리기: Sass(Syntactically Awesome Style Sheets),  SCSS(Sassy CSS)

CSS를 더 강력하고 유연하게 사용하기 위한 확장 언어이다.

CSS의 한계를 보완하고, 코드의 재사용성과 유지보수성을 높이기 위해 고안되었다.

기본적으로 Sass와 SCSS는 CSS로 컴파일되기 때문에, 브라우저에서는 최종적으로 CSS 코드만을 읽는다.

그래서 기존의 CSS 파일과 함께 사용할 수도 있으며, CSS의 모든 기능을 그대로 사용할 수 있다.

<확장된 기능>

1. 중첩 선택자 사용 가능

.nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    text-decoration: none;
  }
}

2. $를 이용해서 변수 정의 가능 

$primary-color: #333;

body {
  color: $primary-color;
}

3. 반복되는 스타일 블록을 재사용할 수 있게 해주는 믹스인

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

4. 여러 개의 Sass또는 SCSS 파일을 하나의 파일로 결합하기

// main.scss 파일에서 다른 SCSS 파일들을 임포트
@import 'reset';
@import 'typography';

Sass와 SCSS의 차이

Sass와 SCSS는 기능적으로는 동일하고, 문법 스타일의 차이만 있다. 

Sass는 중괄호와 세미 콜론 없이 더 간결한 문법을 제공하고, SCSS는 기존의 CSS와 비슷한 문법을 사용해서 CSS를 SCSS로 전환하기 용이하다.(확장자명만 바꿔도 된다.)

Sass: 중괄호 대신 들여쓰기로 블록을 구분하고, 쉼표 대신 개행을 사용한다. 
SCSS: 원래 css문법처럼 중괄호랑 쉼표를 사용한다.

import styled from 'styled-components'

const Button = styled.div
transform: ${props => props.expanded ? 'rotate(180deg)':
    'rotate(0deg)'};
    transition: transform .2s ease-out;
}

// transform : props 객체의 expanded 값이 참이면 버튼을 180도 회전하고, 거짓이면 회전하지 않는다.
// transition: 버튼의 회전 변환이 0.2초 동안 부드럽게 진행된다. 

opacity: ${({open}) => (open ? '1' : '0')};
visibility: ${({ open }) => (open ? 'visible' : 'hidden')};
pointer-events: ${({ open }) => (open ? 'auto' : 'none')};
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1), visibility 225ms, pointer-events 225ms;

//opacity: open prop이 true면 요소가 완전히 보이도록(1)하고, false면 투명하게(0)한다.
//visibility: open prop이 true면 요소가 보이도록, false면 숨기도록(요소가 차지하는 공간은 유지) 설정한다.
//pointer-events: open prop이 true면 요소가 마우스 이벤트를 받도록(auto) 하고, false면 받지 않도록(none) 한다.
//transition: prop에 따라 요소의 투명도, 가시성, 포인터 이벤트 수신 여부를 동적으로 변경한다. 변경은 225ms 동안 부드럽게 전환된다. 




dialog 컴포넌트가 열릴 때 부드러운 transition 적용하는 예시

const Dialog = styled.div`
    opacity: ${({ open }) => (open ? '1' : '0')};
    visibility: ${({ open }) => (open ? 'visible' : 'hidden')};
    pointer-events: ${({ open }) => (open ? 'auto' : 'none')};
    transition: opacity 225ms cubic-beizer(0.4, 0, 0.2, 1), visibility 225ms, pointer-events 225ms; //큐빅 베지어 함수,, 
`;

export default Dialog

이 컴포넌트를 사용하는 파일 예시

import Dialog from './Dialog';

const App = () => {
    const [isOpen, setOPen] = useState(false);

    const toggleDialog = () => {
        setIsOpen(isOpen);
    };

    return (
        <div>
            <button onClick={toggleDialog}>
                {isOpen ? 'Close Dialog' : 'Open Dialog'}
            </button>
            <Dialog open={isOpen}>
                <h1>Dialog Content</h1>
                <p>This is content of the dialog.</p>
            </Dialog>
        </div>
    );
};

export default App;

//버튼을 클릭하면 toggleDialog 함수가 호출되어 isOpen 상태를 토글한다. 
//Dialog 컴포넌트에 "open" prop으로 isOpen 상태를 전달한다.

벤더 프리픽싱 

웹 브라우저의 종류는 다양하다. 인터넷 익스플로러, 크롬, 파이어 폭스, 사파리 등.. 
벤더 프리픽스란 이런 웹 브라우저들이 css 속성이나 기능을 실험적으로 지원할 때 사용하는 접두사이다. 

구글, 크롬, 사파리에서는 접두사로 -webkit을 사용하고, 인터넷 익스플로러는 -ms를 사용하고 그런 식이다.

(예시)

-webkit-border-radius: 10px; /* 크롬, 사파리 */
-moz-border-radius: 10px;    /* 파이어폭스 */
-ms-border-radius: 10px;     /* 인터넷 익스플로러 */
-o-border-radius: 10px;      /* 오페라 */
border-radius: 10px;         /* 표준 */

이렇게 하면 브라우저 간의 호환성을 보장하고, 새로운 기능이 표준화되기 전에 미리 사용할 수 있게 해준다는 장점이 있다. 

자동 벤더 프리픽싱 (styled-components)

styled-components는 자동으로 벤더 프리픽스를 추가해주는 기능을 내장하고 있다. 이를 통해 개발자는 추가 작업 없이도 다양한 브라우저에서 CSS가 제대로 동작하도록 할 수 있다. 

( styled-components의 라이브러리인 "autoprefixer"를 사용 )

예를 들어서, styled-components를 사용해서 이런 스타일 박스를 만들었다면, 

import styled from 'styled-components';

const Box = styled.div`
  display: flex;
  user-select: none;
  transition: transform 0.3s ease-in-out;
`;

자동으로 각 브라우저에는 vendor prefix가 추가된다. 

.Box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: -moz-transform 0.3s ease-in-out;
  transition: -ms-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

<크기>

0 == 0px
0.5 == 2px, 0.125rem
1 == 4px, 0.25rem
4 == 16px, 1rem


sm : 640px 이상 @media (min-width: 640px) { ... }
md : 768px 이상 @media (min-width: 768px) { ... }
lg: 1024px 이상 @media (min-width: 1024px) { ... }
xl: 1280px 이상 @media (min-width: 1280px) { ... }
2xl: 1536px 이상 @media (min-width: 1536px) { ... }

<margin과 padding>

m-15: 모든 방향의 margin을 15로 설정
p-15: 모든 방향의 padding을 15로 설정

mx-15: 위아래 margin을 15로 설정
my-15: 오른쪽, 왼쪽 margin을 15로 설정
mr-15: 오른쪽 margin
ml-15: 왼쪽 margin
mt-15: 위쪽 margin
mb-15: 아래쪽 margin

<텍스트>

font-thin == font-weight: 100
font-extralight == 200
font-light ==300
font-normal == 400
font-medium == 500
font-semibold == 600
font-bold == 700
font-extrabold == 800
font-black == 900



text-xs == 12px
text-sm == 14
text-base == 16
text-lg ==18
text-xl == 20
text-2xl == 24
text-3xl == 30
text-4xl == 36
text-5xl == 48
text-6xl == 60
text-7xl == 72
text-8xl == 96
text-9xl == 128



leading-3 line-height: 12px
leading-4 line-height: 16px
leading-5 20
leading-6 24
leading-7 28
leading-8 32
leading-9 36
leading-10 40
leading-none line-height: 1rem
leading-tight line-height: 1.25rem
leading-snug line-height: 1.375rem
leading-normal line-height: 1.5rem
leading-relaxed line-height: 1.625rem
leading-loose line-height: 2rem



text-white
text-black 
text-[색상 코드]


bg-black background-color: rgb(0 0 0);
bg-white background-color: rgb(255 255 255);
bg-slate-50 background-color: rgb(248 250 252);
bg-slate-100 background-color: rgb(241 245 249);

<배치>

justify-normal justify-content: normal;
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
justify-center justify-content: center;
justify-between justify-content: space-between;
justify-around justify-content: space-around;
justify-evenly justify-content: space-evenly;
justify-stretch justify-content: stretch;


items-start align-items: flex-start;
items-end align-items: flex-end;
items-center align-items: center;
items-baseline align-items: baseline;
items-stretch align-items: stretch;


block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
table display: table;
inline-table display: inline-table;
table-caption display: table-caption;
table-cell display: table-cell;
table-column display: table-column;
table-column-group display: table-column-group;
table-footer-group display: table-footer-group;
table-header-group display: table-header-group;
table-row-group display: table-row-group;
table-row display: table-row;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;

테일윈드는 utility-classes라는 것으로 html에 디자인을 한다. 2017년에 처음 등장했다. 

전통적으로 우리는 css로 웹 스타일링을 해왔는데...

테일윈드는 그냥 html 요소에다가 클래스 이름으로 디자인을 주는 기능이다.

뭔가 디자인 속성을 줄임말처럼 쓰는 독특한 문법이 있음.

이게 좀 html을 복잡해보이게 하고 뭐하는 짓인가 싶지만..
장점들이 있으니까 쓰는 거겠죵

tailwind로 개발할 때의 대표적인 장점은 다음과 같다.

1. 클래스 이름 뭘로 할지 고민하지 않아도 된다. 

2. css파일의 용량이 줄어든다. utility를 쓰면 모든 것을 재사용할 수 있기 때문에 새로운 css를 쓸 필요가 없다. 

3. 쉽게 변화를 줄 수 있다. 일단 css는 쓰는 당시에는 어디에 적용되는 건지 그렇게 명확하게 와닿지 않는데, html안에 있는 클래스 이름은 너무 local한 거라.. 다른 요소들을 망가뜨릴 걱정을 안하고 편하게 속성을 줄 수 있다. 

"아니 그럴 거면 그냥 inline style을 쓰지 그러냐"라는 반박이 있을 수 있다. 

재반박: 

1. (중요) tailwind는 인라인스타일보다 제약이 많아서 predefined된 디자인 시스템을 따르는 것에 가깝다.

utility classes에 쓰는 문법은 이미 다 정해져있기 때문에 tailwind를 쓰면 전보다 훨씬 생산적이고 시각적으로 일관성 있는 UI를 만들 수 있다.

2. 인라인 쿼리에서는 쓸 수 없는 미디어 쿼리를 쓸 수 있다. --> tailwind의 responsive utilities로 가능하다.

3. hover, focus 등의 state... 인라인 스타일에서는 이 state들을 지정할 수 없었지만 tailwind는 state variants를 통해서 가능하다.

(사용 예시)


<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
  <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">
        Erin Lindford
      </p>
      <p class="text-slate-500 font-medium">
        Product Engineer
      </p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
  </div>
</div>

그렇다면 tailwind의 단점은 무엇일까?

유틸리티 우선 접근 방식은 유지보수성이 낮을 수도 있다고 한다.

이를 보완하기 위해서 자주 사용되는 utility 조합을 관리할 수 있다. (컴포넌트로 추출하기, 에디터와 언어 기능 활용하기)

#추가1

states 추가하기.

<button class = "bg-sky-500 hover:bg-sky-700 ...">이런 거?

#추가 2

Breakpoint prefix Minimum width CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

# 추가 3

위의 재반박 근거 1과 관련해서. 
tailwind는 주로 사용되는 css 속성을 모아두고 그 중에서 값을 골라서 사용할 수 있도록 만들어 놓은? 문법을 가지고 있다.
예를 들어 font-size의 경우에는 'xs', 'sm', 'baxe', 'lg', 'xl', '2xl', ...'9xl'의 크기만을 지원한다. 
일반적인 css에서는 아무 숫자나 올 수 있는.. 무한한 경우의 수를 가진 것과 차이가 있다. 


tailwind에서는 미리 지정된 속성 이외의 값을 쓰기 위해서는 대괄호 안에다가 arbitary value로 입력할 수 있다. 근데 이렇게 하면 문법이 복잡해지기 때문에 arbitary 속성을 미리 지정해 둔 테마를 만들어서 사용할 수도 있다. 
만약 px 단위로 디자인 요구사항을 충족해야 하는 경우라면, 다음과 같이 미리 px에 대한 프리셋을 등록해 놓으면 된다.

# 추가 4

장점: 
1. 유연성을 증가시켜서 커스터마이징을 쉽게 할 수 있는 오픈 프레임워크이다. 
2. tailwind는 css프레임워크이므로, react말고도 css를 사용하는 아무 웹 사이트에서나 사용할 수 있다. 
3. 성능이 좋다. 번틀 크기가 가벼워서 로딩 속도를 빠르게 한다. 
테일윈드는 순수한 css 프레임워크이기 때문에 전통적인 javascript 프레임워크보다 빨리 로딩된다. 반면 Material UI는 JavaScript 프레임워크이므로, 웹사이트를 로드할 때마다 전체 Material UI JavaScript 프레임워크가 로드되어야 한다. 

단점:
1. 테일윈드는 앱에서 사용되지 못하고, 웹 사이트에서만 사용될 수 있다. 
만약 크기가 다른 디바이스별로 커스터마이징하고 싶다면 각 장치별로 버튼을 여러 개 만들고 각각 수동으로 개발해야 한다. 
2. 유연한만큼 모든 것을 직접 개발해야 한다. 
3. 테일윈드에도 미리 만들어진 컴포넌트가 있지만 무료가 아니다.   

MUI - spacing

: 자식 요소들 간의 간격을 조정하는 spacing prop

이 값은 아무 양수인 숫자 아무거나 가능. 

(mui의 기본 간격 단위는 8픽셀이다. 만약  12면 96px의 간격)

MUI - sx props

: mui 컴포넌트를 커스터마이징, 컴포넌트 안의 인스턴스별로 속성 지정하기

import FTextButton from '@/components/Common/Button';

$

: 템플릿 리터럴 내에서 자바스크립트 변수를 참조함

width: $ {({ size }) => 

size === 'xsmall' ? '16px' : 

size === 'small' ? '20px' : 

size === 'medium' ? '24px' : '36px'};

(조건) ? 참일 때 값 : 

거짓일 때 값[ (조건) ? 참일 때 값:

거짓일 때 값{ (조건) ? 참일 때 값: 거짓일 때 값}]

Avatar:

사용자의 프로필을 나타내기 위해 사용되는 이미지나 아이콘

important:

<BoxButton sx={{ padding: '14px 16px 14px 14px !important' }} onClick={onClose}>

important는 CSS에서 사용되는 키워드로, 특정 스타일 규칙이 다른 규칙보다 우선 적용되도록 강제하는 역할

MUI (Material-UI)

MUI는 UI 컴포넌트 라이브러리이다. 

주요 특징: 머티리얼 디자인, 컴포넌트 기반, 스타일링 및 테마, 반응형 디자인. 

구글의 머티리얼 디자인 가이드라인을 따른다. 

그냥 아예 버튼, 텍스트 필드, 다이얼로그, 네비게이션 바 같은 컴포넌트 자체를 MUI가 .. .. .. .. .. 포함을 다 하고 있는 것임. 

CSS-in-JS

• StyledComponent
• 현재 리액트에서는 서버 컴포넌트에서 쓸 수 없음

Tailwind CSS

• 반응형 디자인을 위한 다앙햔 유틸리티 클래스 제공, html이나 jsx코드 내에서 직접 관리할 수 있따. 
• 커스텀 스타일이나 재사용해야 하는 스타일은 Tailwind 의 커스텀 클래스를 이용할 수 있다. 
• tailwind.config.js에서 테마를 확장하거나 커스텀 유틸리티 클래스 추가. 
• \

Tailwind CSS와 styled-components를 함께 사용하기

• 반복적이고 기본적인 스타일링은 테일윈드로, 복잡한 스타일이나 동적 스타일링은 스타일드 컴포넌트로 하면 좋다. 
•  

Tailwind CSS의 반응형 유틸리티 클래스는 기본적으로 다음과 같은 미디어 쿼리 구문을 사용한다. 

• sm: 최소 너비 640px
• md: 최소 너비 768px
• lg: 최소 너비 1024px
• xl: 최소 너비 1280px
• 2xl: 최소 너비 1536px

테일윈드에서는 주로 rem 기반의 크기 단위를 사용한다. 테일윈드css 기본 설정에서 1rem은 16px에 해당한다. 48픽셀이면 3rem이고 3rem은 w-12라고 함. 

MUI 예제

const Pagination = styled('nav')({

  display: 'flex',

  justifyContent: 'center',

  alignItems: 'stretch',

  gap: '6px',

});




styled component 예제

const PaginationContainer = styled.nav({

  display: 'flex',

  justifyContent: 'center',

  alignItems: 'stretch',

  gap: '6px',

});




tailwind 예제

const PaginationContainer = styled.nav`

  @apply flex justify-center items-stretch gap-1.5;

  `;

clsx란?

리액트에 공통으로 css속성을 정의할 수 있게 해주는 라이브러리

왜 사용하냐? if 조건문을 안 쓰기 위해서..

CSS에서 텍스트 줄바꿈과 오버플로우 정리

1. 텍스트 줄바꿈 안하기: white-space: nowrap;

텍스트가 줄 바꿈 없이 한 줄로 유지된다. 

.nowrap {
  white-space: nowrap;
}

2. 텍스트 오버플로우 처리: overflow / text-overflow

overflow: hidden;

컨테이너를 벗어나는 텍스트 숨기기

.hidden { overflow: hidden; }

text-overflow: ellipsis;

오버플로우되는 텍스트를 ...으로 표시. 텍스트가 한 줄일 때만 작동한다.

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }​

3. 텍스트 줄바꿈 허용: white-space 기본값

기본적으로 HTML 요소는 텍스트 줄바꿈을 허용한다. (white-space 속성의 기본값인 normal.

.normal { white-space: normal; }​

4. 여러 줄에서의 텍스트 오버플로우 처리

overflow-wrap: break-word;

긴 단어가 있는 경우 자동으로 줄바꿈

.break-word { overflow-wrap: break-word; }​

위와 같이 white-space, overflow, text-overflow 속성을 적절히 사용하여 사용자에게 깔끔하고 가독성 높은 텍스트 레이아웃을 제공할 수 있다.