> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/create-react-app/using-postcss.md).

# PostCSS 활용

CRA는 CSS 최적화, [Autoprefixer](https://github.com/postcss/autoprefixer)(브라우저 벤더 접두사 자동 추가)등 제공되는 [PostCSS](https://postcss.org/) 기본 기능을 활용하거나, 새로운 기능을 추가해 사용 할 수 있습니다. 예를 들어 [all](https://developer.mozilla.org/ko/docs/Web/CSS/all), [break](https://www.w3.org/TR/css-break-3/#breaking-controls) 속성, [CSS 변수](https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties), [미디어쿼리 범위](https://www.w3.org/TR/mediaqueries-4/#range-context) 등 새로운 CSS 기능을 구형 브라우저에서 지원되도록 자동 폴리필(polyfill) 합니다.

CRA 구성의 [browserslist 설정](https://github.com/browserslist/browserslist#readme) 기준을 토대로 대상 지원 브라우저에 맞게 코드가 자동 처리됩니다.

{% 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 %}

예를 들어 다음과 같이 작성한 스타일 코드가

```css
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}
```

PostCSS에 의해 다음과 같은 코드가 출력됩니다.

```css
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
```

Autoprefixer에 의한 자동 접두사 설정을 일시적으로 비활성해야 한다면 [비활성 방법](https://github.com/postcss/autoprefixer#disabling)을 사용합니다.

```css
.App {
  /* autoprefixer: off */
  display: flex;
  flex-direction: row;
  align-items: center;
}
```

## CSS Grid 설정

[CSS Grid 레이아웃](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout)의 경우 자동 접두사 기능이 기본적으로 비활성 상태입니다. CSS Grid 접두사를 활성화 하려면 CSS 파일 상단에 다음 주석 코드를 추가합니다.

{% tabs %}
{% tab title="styles/index.css" %}

```css
/* CSS Grid 모듈 사용 설정 */
/* autoprefixer grid: autoplace */
```

{% endtab %}
{% endtabs %}

CSS Grid 레이아웃에 대한 자세한 정보는 러닝 가이드 북을 참고하세요.

{% embed url="<https://yamoo9.gitbook.io/css-grid/>" %}