CSS 그리드(Grid) 인터넷 익스플로러 11 과 호환성 구현하기
그리드(Grid) 속성을 사용하는데 최대의 걸림돌은 인터넷 익스플로러입니다.
인터넷 익스플로러가 서서히 퇴출의 수순을 밟고 있지만, 여전히 웹 개발자/디자이너들은 그리드 사용을 주저합니다.
그리드의 경우 인터넷 익스플로러 11은 일부 속성을 제외하고 지원합니다.
그리고 지원하지 않는 속성도 벤더 프리픽스(Vendor Prefix)를 이용하면 어느정도 해결이 가능합니다.
그리드를 인터넷 익스플로러에서 호환되도록 하는 벤더 프리픽스는 조금 복잡합니다.
그렇다고 퇴출되고 있는 인터넷 익스플로러 지원을 위해 인터넷 익스플로러용 벤더 프리픽스 구문을 배우기도 애매합니다.
인터넷 익스플로러에서 지원하지 않는 그리드 속성은 다음 두 가지 입니다.
- grid-gap
- grid-template-areas
그리드 갭(여백) 속성은 기존에 블록 태그에 적용하는 방식대로 "margin" 속성을 사용하는 방법으로 대체를 할 수 있습니다.
그리고 인터넷 익스플로러 11 은 "<main>" 태그를 지원하지 않기 때문에 이 태그를 사용한 그리드 레이아웃 구현은 지원이 되지 않습니다. <div class="main"> 이나 <section class="main"> 과 같이 대체 태그를 사용해서 구현해야 합니다.
지원되지 않는 두 속성을 벤더 프리픽스로 대체하는 방법을 배울 필요는 없습니다.
대신 벤더 프리픽스를 사용해 호환되는 코드로 변환을 해주는 웹 서비스를 이용하는 것을 권장합니다.
Autoprefixer
지원되지 않는 그리드 속성 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를 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 를 완성할 수 있습니다.
