IE를 위한 개발 환경 구성
IE를 위한 CSS Grid 프로젝트 킷
웹 레이아웃 디자인의 새로운 시대를 개쳑 하고 있는 CSS Grid는 최첨단 기술로 강력하고 매력적 입니다. Grid를 사용하면 더 이상 무거운 Grid 라이브러리나 프레임 워크 등을 사용하지 않고도 멋진 레이아웃을 구현할 수 있습니다.
하지만 안타깝게도 Grid 기술에 익숙하지 않거나, 오래된 브라우저를 프로젝트에 고래해야 함에 따라 사용을 기피하기도 합니다. 다행히도 PostCSS, Autoprefixer와 같은 도구를 프로젝트에 사용하면, 오래된 브라우저에서도 Grid를 사용할 수 있습니다.
IE(Internet Explorer)에서 CSS Grid를 활용하기 위한 환경을 구성해봅시다.

브라우저 호환
프로젝트 키트를 사용해 개발할 경우, 별도의 Grid 대체 문법을 사용할 필요 없이 IE 10+ 지원 합니다.

브라우저 이용 현황
오늘 날 국내외 브라우저 별 사용자 이용 현황을 확인할 수 있습니다.

다운로드
개발 환경
ProjectKit을 구동하기 위한 개발 환경 구성을 위해 사용자의 운영체제에 설치 되어 있어야 할 것은 다음과 같습니다.
yarn 설치
NPM 설치 명령을 사용해 yarn 패키지를 전역 설치합니다.
$ npm install --global yarn
개발 의존 모듈 설치
개발에 필요한 의존 모듈을 다음 명령을 사용해 모두 설치합니다.
$ npm install
# 또는
$ yarn
CLI 명령어
개발 (Development)
개발을 위한 라이브 서버를 구동합니다. (파일 수정 저장 시, 자동 업데이트)
$ yarn dev
빌드 (Build)
배포를 위한 빌드 프로세스를 처리합니다. (코드 최적화)
$ yarn build
환경 설정
Autoprefixer 설정
IE에서 CSS Grid 사용을 위한 접두사(Prefix)를 자동으로 붙이도록 설정합니다. 접두사 설정을 위한 브라우저 범위는 browsers
속성에 배열 값으로 설정할 수 있습니다.
module.exports = {
// CSS Grid: IE 브라우저 지원 설정
grid: true,
// Vendor Prefix 처리 범위 설정
browsers: [
"> 1% in KR",
"ie >= 10"
],
};
그리드 거터 문법이 grid-gap
에서 gap
으로 변경 됨에 따라 자동 변환 처리 합니다.
module.exports = {
// 컴파일 과정에서 gap, column-gap, row-gap 속성을 보존할지 유무 설정
preserve: true
};
CSS Nano 설정
CSS 코드를 최적화(압축) 할 때 주석을 모두 제거하도록 설정합니다.
module.exports = {
preset: [
"default",
// 기본 설정 덮어쓰기
{
// 주석 제거 설정
discardComments: { removeAll: true }
}
]
};
Last updated