connecting dots

CSS | css와 module.css의 차이점 본문

TIL

CSS | css와 module.css의 차이점

dearsuhyun 2024. 7. 27. 10:52

css와 module.css의 차이점

 

CSS (Cascading Style Sheets)

CSS는 웹 페이지의 스타일을 지정하기 위한 언어입니다. HTML 요소의 레이아웃, 색상, 글꼴 등을 정의하는 데 사용됩니다.

 

특징

 

• 전역 범위: 기본적으로 CSS는 전역 범위입니다. 즉, 한 번 정의된 스타일은 전체 문서에서 적용됩니다.

• 간단한 사용법: HTML 파일에서 <link> 태그를 사용하여 CSS 파일을 포함하면 됩니다.

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="example">Hello, world!</div>
</body>
</html>
/* styles.css */
.example {
  color: blue;
  font-size: 20px;
}

 

 

CSS Module

CSS Modules는 CSS를 모듈화하여, 각 모듈이 기본적으로 고유한 범위를 가지도록 하는 기법입니다. 이를 통해 CSS의 전역 범위 문제를 해결할 수 있습니다.

 

특징

 

• 로컬 범위: CSS Module에서 정의된 클래스와 아이디는 기본적으로 로컬 범위입니다. 즉, 특정 컴포넌트에만 적용됩니다.

• 충돌 방지: CSS Module은 클래스 이름과 아이디가 고유하게 변환되므로, 다른 컴포넌트의 스타일과 충돌하지 않습니다.

• 사용법: 일반적으로 리액트와 같은 모던 프론트엔드 프레임워크에서 사용되며, JavaScript 파일에서 import를 통해 포함됩니다.

 

// React 컴포넌트 파일 (MyComponent.js)
import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.example}>
      Hello, world!
    </div>
  );
}

export default MyComponent;
/* MyComponent.module.css */
.example {
  color: blue;
  font-size: 20px;
}

 

 

  css module.css
범위 전역 범위
모든 요소에 스타일이 적용될 수 있음		 로컬 범위
특정 컴포넌트에만 스타일이 적용됨
사용법 <link> 태그를 사용하여 HTML 파일에 포함 import 문을 사용하여
JavaScript 파일에 포함
네이밍 충돌 클래스 이름과 아이디가 전역 범위이므로,
네이밍 충돌이 발생할 수 있음.		 클래스 이름과 아이디가 고유하게 변환되므로, 네이밍 충돌이 발생하지 않음.
유지보수성과 확장성 간단한 유지 보수 높은 유지 보수성 및 확장성
선택 시 고려사항 - 프로젝트 규모가 크지 않을 때
- 전역 스타일이 필요할 때
- 팀이 전통적 css 방식을 선호할 때
- 부트스트랩과 같은 css 라이브러리 사용할 때
이러한 라이브러리는 전역 스타일을 제공하므로
오히려 전통적 css방식이 더 잘 맞을 수 있음		 - 프로젝트가 크고 복잡할 때
- 컴포넌트 기반 개발을 할 때
- 네이밍 충돌을 방지하고 싶을 때
- 스타일을 모듈화하고 재사용 가능한
스타일 컴포넌트를 만들고자 할 때
반응형

'TIL' 카테고리의 다른 글

자바스크립트의 실행 컨텍스트(Execution Context)와 this 키워드, ES6 모듈 특징  (0) 2024.08.21
Javascript | 생성자 함수(prototype), this, ES6 Class, 상속  (0) 2024.08.03
JS | 객체지향 프로그래밍 (Object Oriented Programming) 이해하기 - class, this, constructor, 추상화, 상속, super, 캡슐화, 객체와 인스턴스  (0) 2024.07.28
React | React Hooks - useState와 UseEffect, 마운트(Mount)와 렌더링(Rendering), 호이스팅(Hoisting), 컴포넌트(Component)와 라이브러리(Library)  (0) 2024.07.25
JS | Array method(배열 메소드) 정리  (4) 2024.07.25
'TIL' Related Articles more