IE를 위한 개발 환경 구성

IE를 위한 CSS Grid 프로젝트 킷

웹 레이아웃 디자인의 새로운 시대를 개쳑 하고 있는 CSS Grid는 최첨단 기술로 강력하고 매력적 입니다. Grid를 사용하면 더 이상 무거운 Grid 라이브러리나 프레임 워크 등을 사용하지 않고도 멋진 레이아웃을 구현할 수 있습니다.

하지만 안타깝게도 Grid 기술에 익숙하지 않거나, 오래된 브라우저를 프로젝트에 고래해야 함에 따라 사용을 기피하기도 합니다. 다행히도 PostCSS, Autoprefixer와 같은 도구를 프로젝트에 사용하면, 오래된 브라우저에서도 Grid를 사용할 수 있습니다.

IE(Internet Explorer)에서 CSS Grid를 활용하기 위한 환경을 구성해봅시다.

브라우저 호환

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

2016. 07 ~ 2018. 06 대한민국 브라우저 버전 별 점유율

브라우저 이용 현황

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

• koreanhtml5.kr

• internettrend.co.kr

다운로드

CSS Grid ProjectKit for IE

개발 환경

ProjectKit을 구동하기 위한 개발 환경 구성을 위해 사용자의 운영체제에 설치 되어 있어야 할 것은 다음과 같습니다.

• Node.js

• yarn

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"
  ],
};

PostCSS Gap Properties 설정

그리드 거터 문법이 grid-gap 에서 gap 으로 변경 됨에 따라 자동 변환 처리 합니다.

module.exports = {
  // 컴파일 과정에서 gap, column-gap, row-gap 속성을 보존할지 유무 설정
  preserve: true
};

CSS Nano 설정

CSS 코드를 최적화(압축) 할 때 주석을 모두 제거하도록 설정합니다.

module.exports = {
  preset: [
    "default",
    // 기본 설정 덮어쓰기
    {
      // 주석 제거 설정
      discardComments: { removeAll: true }
    }
  ]
};