---
description: 브라우저 기본 스타일 일반화
---

# CSS 노멀라이징

CRA는 [postcss-normalize](https://github.com/csstools/postcss-normalize/blob/master/INSTALL.md#create-react-app)를 사용해 [CSS를 초기화](https://brunch.co.kr/@euid/2) 합니다. 아래 코드를 CSS 엔트리 파일에 추가합니다.

{% tabs %}
{% tab title="styles/index.css" %}
```javascript
@import-normalize;

// ...
```
{% endtab %}
{% endtabs %}

개발 서버를 구동하거나, 빌드하면 앱에 CSS 초기화 코드 [normalize.css](https://github.com/csstools/normalize.css)가 출력됩니다.

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUu5N5_m0XAGxAE29_E%2F-MUu62Txwq8dDQseqLJB%2Fimage.png?alt=media\&token=c23d1a08-4e9e-472e-9fcc-2d57ce756959)



![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUu8x2LImNCdxu2nWyQ%2F-MUu9l6Tq0FwihvmQZlb%2Fimage.png?alt=media\&token=3778af33-ca8c-493f-bf7b-a3845fd42f6d)

{% hint style="danger" %}
"Unknown at rule @import-normalize css (unknownAtRules)" 오류 [문제 해결 방법](#unknown-at-rule)을 참고하세요.
{% endhint %}

## normalize.css 출력 설정 <a href="#output-settings" id="output-settings"></a>

CRA 구성의 [browserslist 설정](https://github.com/browserslist/browserslist#readme)을 기준 삼아 normalize.css 출력 코드가 제어됩니다.

{% tabs %}
{% tab title="package.json" %}
```javascript
"browserslist": {
  "production": [
    ">1% in KR",
    "not dead",
    "not ie <= 10"
  ],
  "development": [
    "last 2 chrome version",
    "last 2 firefox version",
    "last 1 safari version"
  ]
}
```
{% endtab %}
{% endtabs %}

예를 들어 지원 범위가 IE 9+ 브라우저를 포함한다면 다음과 같이 코드가 출력됩니다. &#x20;

{% tabs %}
{% tab title="last 3 versions" %}
```css
/**
 * IE 9+ 브라우저에서 올바르게 표시되도록 설정
 */

audio,
video {
  display: inline-block;
}

/**
 * IE 10+ 브라우저에서 a 링크에 포함된 img 테두리 제거
 */

img {
  border-style: none;
}
```
{% endtab %}
{% endtabs %}

지원 범위가 IE 10 브라우저를 포함한다면 다음과 같이 코드가 출력됩니다.

{% tabs %}
{% tab title="last 2 versions" %}
```css
/**
 * IE 10+ 브라우저에서 a 링크에 포함된 img 테두리 제거
 */

img {
  border-style: none;
}
```
{% endtab %}
{% endtabs %}

## 브라우저 호환성 <a href="#compatibility-browers" id="compatibility-browers"></a>

[normalize.css 브라우저 지원](https://github.com/csstools/normalize.css#browser-support)에 의해 결정됩니다. 현 시점의 브라우저 호환성은 다음과 같습니다.

* **Internet Explorer 9+**
* Chrome (last 3)
* Edge (last 3)
* Firefox (last 3)
* Firefox ESR
* Opera (last 3)
* Safari (last 3)
* iOS Safari (last 2)

## 알 수 없는 규칙 오류 <a href="#unknown-at-rule" id="unknown-at-rule"></a>

{% hint style="danger" %}
#### "Unknown at rule @import-normalize css (unknownAtRules)"
{% endhint %}

VS Code에서 경고가 표시되면 `css.lint.unknownAtRules` 설정을 `ignore`로 설정하면 경고가 무시됩니다.

![](https://597303073-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUfqhMWK9ILIx0SXJTa%2F-MUu3iBtBncX2DJysy7X%2F-MUu54l1xNIlM3MWRtZU%2Fimage.png?alt=media\&token=ab330e72-a79c-4365-bc48-b6139b57dc96)
