# 리액트에서 모듈 CSS를 쓸 때 이모저모
## CSS의 하위 선택자
리액트에서 모듈 CSS를 사용할 때도 CSS 규칙은 동일하게 적용된다. 모듈 CSS는 클래스 이름을 고유하게 처리하지만, 기본적인 CSS 선택자 규칙은 그대로 사용할 수 있다. 따라서 모듈 CSS 파일에서 하위 선택자를 사용하고, 이를 리액트 컴포넌트의 `className` 속성에 적용할 수 있는 것이다.
아래는 그러한 모듈 CSS의 예이다.
```CSS
/* Button.module.css */
.button {
background-color: blue;
}
.button * {
color: white;
}
```
아래는 위 모듈 CSS를 사용하는 컴포넌트이다.
```JSX
import styles from './Button.module.css';
function Button() {
return (
<button className={styles.button}>
<span>Button Text</span>
</button>
);
}
```
위 코드에서 `.button *`는 `.button` 클래스 내부의 모든 하위 요소에 적용된다. 이처럼 CSS 모듈에서도 일반 CSS 선택자(예: `*`, 자손 선택자, 하위 선택자 등)를 사용할 수 있는 셈이다.
따라서 `className`을 사용할 때에도 모듈 CSS에서 정의된 하위 선택자도 잘 적용된다.
## 미디어 쿼리
역시 잘 동작한다. 아래는 그 예이다.
```CSS
/* Button.module.css */
.button {
background-color: blue;
padding: 10px;
}
@media (max-width: 600px) {
.button {
background-color: red;
padding: 20px;
}
}
```
이렇게 작성한 CSS는 화면 크기가 600px 이하일 때 `.button` 클래스의 배경색을 파란색에서 빨간색으로 바꾸고, 패딩을 변경하는 동작을 수행한다. 사용하는 컴포넌트는 위와 동일하다.