> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/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/css-grid/css-grid-for-ie.md).
# IE를 위한 개발 환경 구성
## IE를 위한 CSS Grid 프로젝트 킷
웹 레이아웃 디자인의 새로운 시대를 개쳑 하고 있는 CSS Grid는 최첨단 기술로 강력하고 매력적 입니다. Grid를 사용하면 더 이상 무거운 Grid 라이브러리나 프레임 워크 등을 사용하지 않고도 멋진 레이아웃을 구현할 수 있습니다.
하지만 안타깝게도 Grid 기술에 익숙하지 않거나, 오래된 브라우저를 프로젝트에 고래해야 함에 따라 사용을 기피하기도 합니다. 다행히도 PostCSS, Autoprefixer와 같은 도구를 프로젝트에 사용하면, 오래된 브라우저에서도 Grid를 사용할 수 있습니다.
IE(Internet Explorer)에서 CSS Grid를 활용하기 위한 환경을 구성해봅시다.
### 브라우저 호환
프로젝트 키트를 사용해 개발할 경우, 별도의 Grid 대체 문법을 사용할 필요 없이 **IE 10+ 지원** 합니다.
#### **브라우저 이용 현황**
오늘 날 국내외 브라우저 별 사용자 이용 현황을 확인할 수 있습니다.
* [koreanhtml5.kr](https://goo.gl/oPDjuz)
* [internettrend.co.kr](https://goo.gl/PRRKvk)
### 다운로드
[`CSS Grid ProjectKit for IE`](https://github.com/yamoo9/CSS-Grid/raw/master/grid-for-ie/grid-for-ie-v1.0.1.zip)
### 개발 환경
ProjectKit을 구동하기 위한 개발 환경 구성을 위해 사용자의 운영체제에 설치 되어 있어야 할 것은 다음과 같습니다.
* [Node.js](https://nodejs.org/)
* [yarn](https://yarnpkg.com)
**yarn 설치**
NPM 설치 명령을 사용해 yarn 패키지를 전역 설치합니다.
```bash
$ npm install --global yarn
```
**개발 의존 모듈 설치**
[개발에 필요한 의존 모듈](/css-grid/css-grid-for-ie/tools-ref.md#postcss-and-plugins)을 다음 명령을 사용해 모두 설치합니다.
```bash
$ npm install
# 또는
$ yarn
```
### CLI 명령어
**개발 (Development)**
개발을 위한 라이브 서버를 구동합니다. (파일 수정 저장 시, 자동 업데이트)
```bash
$ yarn dev
```
**빌드 (Build)**
배포를 위한 빌드 프로세스를 처리합니다. (코드 최적화)
```bash
$ yarn build
```
### 환경 설정
[**Autoprefixer**](https://github.com/postcss/autoprefixer#cli) **설정**
IE에서 CSS Grid 사용을 위한 접두사(Prefix)를 자동으로 붙이도록 설정합니다. 접두사 설정을 위한 브라우저 범위는 `browsers` 속성에 배열 값으로 설정할 수 있습니다.
```javascript
module.exports = {
// CSS Grid: IE 브라우저 지원 설정
grid: true,
// Vendor Prefix 처리 범위 설정
browsers: [
"> 1% in KR",
"ie >= 10"
],
};
```
[**PostCSS Gap Properties**](https://github.com/jonathantneal/postcss-gap-properties) **설정**
그리드 거터 문법이 `grid-gap` 에서 `gap` 으로 변경 됨에 따라 자동 변환 처리 합니다.
```javascript
module.exports = {
// 컴파일 과정에서 gap, column-gap, row-gap 속성을 보존할지 유무 설정
preserve: true
};
```
[**CSS Nano**](https://cssnano.co/) **설정**
CSS 코드를 최적화(압축) 할 때 주석을 모두 제거하도록 설정합니다.
```javascript
module.exports = {
preset: [
"default",
// 기본 설정 덮어쓰기
{
// 주석 제거 설정
discardComments: { removeAll: true }
}
]
};
```