1 of 37

CSS 관련 내용 비교

2 of 37

CSS

점유율 비교

3 of 37

https://engineering.linecorp.com/ko/blog/uit-survey2022-report

4 of 37

5 of 37

6 of 37

https://npmtrends.com/bootstrap-vs-emotion-vs-sass-vs-styled-components-vs-tailwindcss

7 of 37

이름	비율
SASS	40.37%
Tailwindcss	24.06%
Styled-components	18.84%
Bootstrap	15.23%
Emotion	2.21%

8 of 37

SASS

9 of 37

설치 및 사용

10 of 37

기능 정리

기능	지원 여부
Nesting	O
파일 Import	O
변수 사용	O
Mix-in	O
조건문	O
값 직접 삽입	X

11 of 37

SassBtn.scss

@mixin button-color($color) {

background-color: $color;

� &:hover {

background: lighten($color, 10%);

}

.SassBtn {

display: inline-block;

outline: none;

cursor: pointer;

font-size: 14px;

line-height: 1;

border-radius: 500px;

border: 1px solid transparent;

letter-spacing: 2px;

min-width: 160px;

font-weight: 700;

text-align: center;

padding: 17px 48px;

color: #fff;

background-color: #f74343;

height: 48px;� &:hover {

transform: scale(1.04);

background-color: #f74343;

}� &.green {

@include button-color($green);

}� &.blue {

@include button-color($blue);

}}

12 of 37

SassBtn.jsx

import "./SassBtn.scss";

import classNames from "classnames";

�export default function SassBtn({ variant }) {

return (

SASS BUTTON

</button>

);

}

13 of 37

App.js

function App() {

return (

<>

</div>

</>

);

}

14 of 37

Styled

Components

15 of 37

설치 및 사용

16 of 37

기능 정리

기능	지원 여부
Nesting	O
파일 Import	O
변수 사용	O
Mix-in	O
조건문	O
값 직접 삽입	O

17 of 37

StyledBtn.jsx, CSS 파트

import styled from "styled-components";

�const colorVariant = {

green: "background-color: #1ed760",

blue: "background-color: #3f95f1",

};

�const colorSet = (color) => {

return `background-color: ${color}`;

};

18 of 37

const BtnStyle = styled.button`

display: inline-block;

outline: none;

cursor: pointer;

font-size: 14px;

line-height: 1;

border-radius: 500px;

border: 1px solid transparent;

letter-spacing: 2px;

min-width: 160px;

font-weight: 700;

text-align: center;

padding: 17px 48px;

color: #fff;

background-color: #f74343;

${(props) =>

props.variant ? colorVariant[props.variant] : colorSet(props.color)};

height: 48px;

� &:hover {

transform: scale(1.04);

background-color: #f74343;

${(props) =>

props.variant ? colorVariant[props.variant] : colorSet(props.color)};

}

`;

19 of 37

StyledBtn.jsx, JSX 파트

export default function StyledBtn({ variant, color }) {

return (

StyledBtn

</BtnStyle>

);

}

20 of 37

App.js

function App() {

return (

<>

</div>

</>

);

}

21 of 37

StyledBtn.jsx, CSS 파트

const BtnStyle = styled.button`

display: inline-block;

outline: none;

cursor: pointer;

font-size: 14px;

line-height: 1;

border-radius: 500px;

border: 1px solid transparent;

letter-spacing: 2px;

min-width: 160px;

font-weight: 700;

text-align: center;

padding: 17px 48px;

color: #fff;

background-color: #f74343;

background-color: ${(props) => props.color};

height: 48px;� &:hover {

transform: scale(1.04);

background-color: #f74343;

background-color: ${(props) => props.color};

}`;

22 of 37

StyledBtn.jsx, JSX 파트

export default function StyledBtn({ variant, color }) {

const colorVariant = {

green: "#1ed760",

blue: "#3f95f1",

};

� const finalColor = variant ? colorVariant[variant] : color;

� return <BtnStyle color={finalColor}>StyledBtn</BtnStyle>;

}

23 of 37

App.js

function App() {

return (

<>

</div>

</>

);

}

24 of 37

Tailwindcss

25 of 37

설치 및 사용

tailwind.config.js 파일 생성

26 of 37

설치 및 사용

index.css 파일에 해당 구문 추가

27 of 37

기능 정리

기능	지원 여부
Nesting	X
파일 Import	X
변수 사용	O
Mix-in	X
조건문	X
값 직접 삽입	X

28 of 37

index.css

@tailwind base;

@tailwind components;

@tailwind utilities;

�:root {

--red-color: #f74343;

--blue-color: #3f95f1;

--green-color: #1ed760;

}

29 of 37

tailwind.config.css

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ["./src/**/*.{js,jsx,ts,tsx}"],

theme: {

extend: {

colors: {

"red-color": "var(--red-color)",

"blue-color": "var(--blue-color)",

"green-color": "var(--green-color)",

},

plugins: [],

};

30 of 37

TailwindBtn.jsx

import classNames from "classnames";

�export default function TailwindBtn({ color }) {

const btnColors = {

red: "bg-red-color",

blue: "bg-blue-color",

green: "bg-green-color",

};

�

31 of 37

TailwindBtn.jsx

return (

<button

className={classNames(

`px-10 py-3 rounded-full font-bold text-center text-white tracking-widest

cursor-pointer outline-none hover:scale-110`,

color ? btnColors[color] : btnColors["red"]

)}

>

TailwindBtn

</button>

);

}

32 of 37

CSS.module

33 of 37

기능 정리

기능	지원 여부
중복 예방	O
Nesting	O
파일 Import	O (제한적 지원, @compose)
변수 사용	X
Mix-in	X
조건문	X
코드 직접 삽입	X

34 of 37

ModuleBtn.module.css

.moduleBtn {

display: inline-block;

outline: none;

cursor: pointer;

font-size: 14px;

line-height: 1;

border-radius: 500px;

border: 1px solid transparent;

letter-spacing: 2px;

min-width: 160px;

font-weight: 700;

text-align: center;

padding: 17px 48px;

color: #fff;

background-color: #f74343;

height: 48px;

&:hover {

transform: scale(1.04);

background-color: #f74343;

}

� &.green {

background-color: #1ed760;

}

� &.blue {

background-color: #3f95f1;

}

�

35 of 37

ModuleBtn.jsx

import React from "react";

import styles from "./ModuleBtn.module.css";

import classNames from "classnames";

�export default function ModuleBtn({ variant, color }) {

return (

<button

className={classNames(styles.moduleBtn, variant && styles[variant])}

style={color && { backgroundColor: color }}

>

ModuleBtn

</button>

);

}

36 of 37

App.js

function App() {

return (

<>

</div>

</>

);

}

37 of 37

SCSS 의 기능이 탐난다면?

파일명.module.scss 사용 가능!