[Web] 웹 스타일링 도구 (CSS, CSS Modules, SCSS, Tailwind CSS, Styled-components)

 

• CSS
• CSS Modules
• SCSS (+ Sass)
• Tailwind CSS
• Styled-components
• 요약

---

웹 개발에서 스타일링은 단순히 보기 좋은 화면을 만드는 것을 넘어, 사용자의 경험을 향상시키고

브랜드의 가치를 표현하는 중요한 요소이다.

 

다양한 스타일링 방법 중에서 CSS, CSS Modules, SCSS, Tailwind CSS, Styled-components는

각각의 장단점과 활용 방식으로 주목받고 있다.

 

이번 포스팅에서는 이들 스타일링 도구와 방법을 비교하며, 상황에 맞는 선택을 할 수 있도록 탐구해 보려 한다.

---

- CSS

 

CSS는 Cascading Style Sheets의 줄임말이며,

전통적인 스타일링 언어로, HTML 요소의 스타일을 정의한다.

 

정적 스타일링 방식으로, 아래와 같은 방식을 따른다.

    1. 스타일은 외부 파일(.css) 또는 <style> 태그에 정의되고, HTML 요소에 적용한다.

    2. 클래스나 선택자를 사용하여 전역적으로 동작한다.

 

CSS는 브라우저에서 기본적으로 지원하고, 가장 기본적인 스타일링 방법이라는 특징이 있다.

 

아래의 코드는 jsx(.js) 예시 코드와 css 예시 코드이다.

// Button.jsx
import React from 'react';
import './button.css';

const Button = () => {
  return <button className="button">Click Me</button>;
};

export default Button;

/* button.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;
}

.button:hover {
  background-color: red;
}

 

---

- CSS Modules

 

CSS Modules는, CSS 파일을 모듈화하여 각 컴포넌트에 국한된 스타일을 작성한다.

 

모듈식 스타일링 방식으로, 아래와 같은 방식을 따른다.

    1. 클래스 이름이 자동으로 로컬화되어 충돌을 방지할 수 있다.

    2. module.css 파일을 사용하며, React에서 주로 사용한다.

    3. CSS 파일과는 다르게 객체를 통해 접근해야 한다. ( ex) styles.button )

 

CSS Modules는 스타일을 격리하고 유지보수성을 증가시키며, 기존 CSS와 호환이 가능하다는 특징이 있다.

 

아래의 코드는 jsx(.js) 예시 코드와 module.css 예시 코드이다.

// Button.jsx
import React from 'react';
import styles from './button.module.css';

const Button = () => {
  return <button className={styles.button}>Click Me</button>;
};

export default Button;

/* button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;
}

.button:hover {
  background-color: red;
}

 

---

- SCSS

 

SCSS는 Sassy CSS의 줄임말로, CSS의 상위 집합(Superset)으로, Sass의 최신 문법이다.

 

정적 스타일링 방식으로, 아래와 같은 방식을 따른다.

    1. CSS와 유사하지만, 변수, 중첩, 믹스인, 상속 등 프로그래밍적인 기능이 추가됐다.

    2. 컴파일러(Sass 또는 Node.js)를 사용해 .scss를 .css로 변환 후 브라우저에서 사용한다.

 

SCSS는 코드의 재사용성과 유지보수성을 강화시키는 특징이 있다.

 

아래의 코드는 jsx(.js) 예시 코드와 scss 예시 코드이다.

// Button.jsx
import React from 'react';
import './button.scss';

const Button = () => {
  return <button className="button">Click Me</button>;
};

export default Button;

/* button.scss */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;

  &:hover {
    background-color: red;
  }
}

 

 

+ 여기서, Sass와 SCSS의 차이점은?

 

1. Sass는 들여쓰기 기반으로 중괄호( {} )가 없고, 세미콜론 ( ; )이 필요가 없다.

2. 기존 CSS와의 호환성의 낮다. ( 문법의 수정이 필요하기 때문에. )

/* button.sass */
.button
  background-color: blue
  color: white
  padding: 10px 20px
  border: 2px solid white

  &:hover
    background-color: red

 

---

- Tailwind CSS

 

Tailwind CSS는 유틸리티-퍼스트( Utility-First ) CSS 프레임워크이다.

 

유틸리티-퍼스트는 프레임워크가 사진 정의된 유틸리티 클래스를 제공하고, 

이를 조합해서 스타일링을 할 수 있음을 의미한다.

 

유틸리티 기반 스타일링 방식으로, 아래와 같은 방식을 따른다.

    1. CSS 클래스 이름이 짧고 기능별로 정의되어 있다. ( ex) text-center, bg-red-500 등 )

    2. HTML에서 직접 스타일링: CSS 파일 없이 HTML 클래스 속성으로 구현 가능하다.

 

Tailwind CSS는 빠른 개발 속도, 모듈식 구성, 디자인 시스템 구축에 적합하다는 특징이 있다.

 

아래의 코드는 jsx(.js) 예시 코드이다.

// Button.jsx
import React from 'react';

const Button = () => {
  return <button className="bg-blue-500 text-white px-6 py-2 border-2 border-white hover:bg-red-500">Click Me</button>;
};

export default Button;

 

---

- Styled-components

 

Styled-components는 JavaScript에서 CSS를 작성하는 CSS-in-JS 라이브러리이다.

 

컴포넌트 기반 스타일링 방식으로, 아래와 같은 방식을 따른다.

    1. 스타일이 컴포넌트에 직접 바인딩되어 CSS와 JavaScript를 함께 관리한다.

    2. 동적으로 스타일링을 적용 가능하다. ( props 기반 )

 

Styled-components는 스타일의 캡슐화, 동적 스타일링, React와 함께 자주 사용하는 특징이 있다.

 

아래의 코드는 jsx(.js) 예시 코드이다.

// Button.jsx
import React from 'react';
import styled from 'styled-components';

const Button = styled.button
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;

  &:hover {
    background-color: red;
  }
;

const App = () => {
  return <Button>Click Me</Button>;
};

export default App;

 

 

+ 캡슐화 예시

 

Styled-components는 각 컴포넌트에 고유한 클래스 이름을 생성하므로, 스타일이 다른 컴포넌트와

충돌하지 않는 특징이 있다.

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

// Button 컴포넌트 (파란 버튼)
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;

  &:hover {
    background-color: red;
  }
`;

// SecondaryButton 컴포넌트 (녹색 버튼)
const SecondaryButton = styled.button`
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: 2px solid white;

  &:hover {
    background-color: darkgreen;
  }
`;

const App = () => {
  return (
    <div>
      <Button>Primary</Button>
      <SecondaryButton>Secondary</SecondaryButton>
    </div>
  );
};

export default App;

 

 

+ 동적 스타일링 예시

Styled-components는 props를 사용해 스타일을 동적으로 변경할 수 있다.

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

// 동적 스타일링 버튼 컴포넌트
const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: 2px solid white;

  &:hover {
    background-color: ${(props) => (props.primary ? "red" : "darkgray")};
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

 

위의 코드 예시는 다음과 같다.

1. 첫 번째 버튼(Primary Button)은 primary prop이 전달되었으므로 파란색 배경과 빨간색 hover 스타일

2. 두 번째 버튼(Secondary Button)은 primary prop이 없으므로 회색 배경과 어두운 회색 hover 스타일

 

---

- 요약

스타일링 방식	예제 코드
CSS	.button { ... } CSS 파일을 별도로 작성
CSS Modules	import styles from './button.module.css'; 로컬화된 클래스 사용
SCSS	button { ... } Sass 문법 사용
Tailwind CSS	className="bg-blue-500 text-white ..." 유틸리티 클래스 사용
Styled-components	styled.button\\ ... `` CSS-in-JS