본문 바로가기

HTML&CSS

CSS 그리드(Grid) 인터넷 익스플로러 11 과 호환성 구현하기

반응형

그리드(Grid) 속성을 사용하는데 최대의 걸림돌은 인터넷 익스플로러입니다.

인터넷 익스플로러가 서서히 퇴출의 수순을 밟고 있지만, 여전히 웹 개발자/디자이너들은 그리드 사용을 주저합니다.

 

그리드의 경우 인터넷 익스플로러 11은 일부 속성을 제외하고 지원합니다.

그리고 지원하지 않는 속성도 벤더 프리픽스(Vendor Prefix)를 이용하면 어느정도 해결이 가능합니다.

 

그리드를 인터넷 익스플로러에서 호환되도록 하는 벤더 프리픽스는 조금 복잡합니다.

그렇다고 퇴출되고 있는 인터넷 익스플로러 지원을 위해 인터넷 익스플로러용 벤더 프리픽스 구문을 배우기도 애매합니다.

 

인터넷 익스플로러에서 지원하지 않는 그리드 속성은 다음 두 가지 입니다.

 

  • grid-gap
  • grid-template-areas

그리드 갭(여백) 속성은 기존에 블록 태그에 적용하는 방식대로 "margin" 속성을 사용하는 방법으로 대체를 할 수 있습니다.

 

그리고 인터넷 익스플로러 11 은 "<main>" 태그를 지원하지 않기 때문에 이 태그를 사용한 그리드 레이아웃 구현은 지원이 되지 않습니다. <div class="main"> 이나 <section class="main"> 과 같이 대체 태그를 사용해서 구현해야 합니다.

 

지원되지 않는 두 속성을 벤더 프리픽스로 대체하는 방법을 배울 필요는 없습니다.

 

대신 벤더 프리픽스를 사용해 호환되는 코드로 변환을 해주는 웹 서비스를 이용하는 것을 권장합니다.

 

Autoprefixer

 

Autoprefixer CSS online

include comment with configuration to the result Select result Autoprefixer online — web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used by Twitter

autoprefixer.github.io

 

지원되지 않는 그리드 속성 2가지를 사용한 CSS 그리드 클래스를 복사해서 붙여넣으면 벤더 프리픽스가 적용된 CSS 코드를 표시해줍니다.

 

다음과 같은 그리드 CSS는

 

.grid{
    width: 600px;
    display: grid;
    grid-template-columns: auto 150px;
    grid-template-areas: "header header" "title sidebar" "main sidebar" "footer footer";
    gap: 10px 15px;
    margin: 0 auto;
}
.grid .header{grid-area: header;}
.grid .title{grid-area: title; height: 50px; margin: 0;}
.grid .main{grid-area: main; height: 300px;}
.grid .sidebar{grid-area: sidebar;}
.grid .footer{grid-area: footer;}

 

인터넷 익스플로러를 제외한 웹 브라우저에서는 다음과 같이 레이아웃이 적용되어 보이지만

 

정상 적용되어 보이는 그리드 CSS

 

인터넷 익스플로러에서는 다음과 같이 그리드 레이아웃이 깨져 보입니다.

 

인터넷 익스플로러 11에서 깨져 보이는 그리드 CSS

 

위의 그리드 CSS를 Autoprefixer 로 변환하면

다음과 같이 인터넷 익스플로러 11고 호환되는 그리드 속성으로 변환된 CSS가 표시됩니다.

 

.grid{
    width: 600px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: auto 15px 150px;
    grid-template-columns: auto 150px;
    -ms-grid-rows: auto 10px auto 10px auto 10px auto;
        grid-template-areas: "header header" "title sidebar" "main sidebar" "footer footer";
    gap: 10px 15px;
    margin: 0 auto;
}
.grid .header{-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 3;grid-area: header;}
.grid .title{-ms-grid-row: 3;-ms-grid-column: 1;grid-area: title; height: 50px; margin: 0;}
.grid .main{-ms-grid-row: 5;-ms-grid-column: 1;grid-area: main; height: 300px;}
.grid .sidebar{-ms-grid-row: 3;-ms-grid-row-span: 3;-ms-grid-column: 3;grid-area: sidebar;}
.grid .footer{-ms-grid-row: 7;-ms-grid-column: 1;-ms-grid-column-span: 3;grid-area: footer;}

 

복사해서 기존 그리드 CSS 를 대체하면 인터넷 익스플로러에서 지원되는 CSS 를 완성할 수 있습니다.

 

Autoprefixer 로 인터넷 익스플로러 11 과 호환되는 그리드 CSS 생성

 

 

 

관련글

CSS 그리드(Grid) - 1. 인라인블록(Inline-block), 플렉스박스(Flex), 그리드(Grid) 레이아웃
CSS 그리드(Grid) - 2. 그리드 기초와 속성
CSS 그리드(Grid) - 3. 열 구획 속성(Attribute)과 메서드(Method)
CSS 그리드(Grid) - 4. 그리드 영역 구획하기
CSS 그리드(Grid) 인터넷 익스플로러 11 과 호환성 구현하기

반응형

닫기