IE에서 CSS 그리드 사용하기: CSS 그리드와 Autoprefixer

1부에서는 많은 사람들이 인터넷 익스플로러(이하 IE)에서 CSS 그리드 구현에 대해 갖고 있는 오해를 몇 가지 풀어보았다. 이번 글은 그 지식을 바탕으로 시작한다.

이번에는 가장 큰 오해를 해결하고자 한다. 정말 IE에서 CSS 그리드를 사용하기 어려울까? 사실 지금 당장이라도 IE에서 CSS 그리드를 쉽게 구현할 수 있다. 엉망인 폴백^fallback 레이아웃을 만들 필요도 없다. 어렵지 않으니 함께 살펴보자.

IE용으로 엉망인 폴백 레이아웃을 별도로 만드는 방안으로는 클라이언트를 설득하기 힘들다. 인트라넷 이용자 중 90%가 IE를 사용하는 프로젝트라면 더욱 어렵다. IE 호환성을 원한다면 먼저 CSS 그리드가 가진 멋지고 대단한 기능들을 전부 사용할 수 없다는 사실 먼저 인정해야 한다. 그렇다고 실망할 필요는 없다. IE11이 CSS 그리드를 구현하는 모습과 특히 Autoprefixer의 도움을 받은 모습은 여러분을 놀라게 할 것이다.

더 깊이 들어가기 전에 말하자면 이 글은 일반적인 ‘CSS 그리드를 사용하는 방법’이 아니다. CSS 그리드를 이해하고 있지만 IE 때문에 사용하지 못하는 디자이너를 위한 글이다.

이번 글은 여러분이 최신 브라우저에서 CSS 그리드를 사용할 줄 안다는 가정 아래 시작한다. 아직 CSS 그리드 사용법을 모른다면 레이철 앤드루가 만든 CSS 그리드 튜토리얼 비디오 시청을 권한다. 그 뒤 브라우저 게임인 그리드 가든^{Grid Garden}을 몇 판 하면서 CSS 그리드에 대한 경험부터 하기를 바란다. 최신 브라우저에서 CSS 그리드를 사용하는 방법을 이해했다면 이 글로 돌아와 IE10과 11에서 똑같은 결과물을 만드는 법에 대해 알아보도록 하자.

Autoprefixer 설정하기

가장 먼저 Autoprefixer를 설치해야 한다. Autoprefixer는 자동으로 브라우저 전용 CSS 접두어를 입력해 웹 디자이너의 수고를 덜어준다. CSS를 위한 Babel로 생각하면 된다(CSS Tricks에 Autoprefixer의 제작자가 작성한 안내글이 있다).

Autoprefixer(혹은 다른 빌드 툴)을 사용한 경험이 없다면 먼저 컴퓨터에 Node를 설치하고 다음 가이드를 따라 기본적인 워크플로를 익히도록 하자. 가이드에서 Autoprefixer에 대한 부분은 여기서 읽을 수 있다. (어떤 빌드 도구를 선택할지 모르겠다면 Grunt보다는 Gulp를 권한다.)

이미 프로젝트에서 Autoprefixer를 사용 중이라면 다음 명령어를 입력해 최신 버전으로 업데이트하자.

npm i autoprefixer@latest -D

Autoprefixer 최신 버전이 가진 일부 기능들은 PostCSS 버전 5에서 지원하지 않는다. 그렇기에 PostCSS도 마찬가지로 버전 6 이상으로 업데이트해야 한다. Gulp를 사용한다면 gulp-postcss를 7.0.0 이상으로, Grunt를 사용할 경우 grunt-postcss를 0.9.0 이상으로 업데이트하자.

개발 환경을 모두 설정한 뒤에는 Autoprefixer의 grid 속성을 true로 변경해야 한다. 그리드 설정을 true로 두지 않으면 이제 보여줄 멋진 기능을 Autoprefixer에서 하나도 사용할 수 없다.

그리드 설정을 켜는 방법은 컴파일 방식에 따라 다르다. 만약 앞에서 링크한 가이드를 따랐다면 이런 코드를 봤을 것이다.

옵션에 grid:true를 입력해 그리드 프리픽스를 추가하자.

튜토리얼이 작성된 지 오래되어 글에서 사용한 브라우저 설정은 실제 필요한 양보다 더 많은 프리픽스를 작성하게 만든다. 대신 “>1%”를 이용해 브라우저의 지원이 끝날 때 Autoprefixer가 자동으로 프리픽스 작성을 멈추도록 할 수 있다. 이 설정은 caniuse.com에서 받은 브라우저 데이터를 활용한다.

지금까지 설명한 Autoprefixer의 권장 설정을 정리하면 아래와 같다.

이제부터 재밌는 부분이 시작된다!

Autoprefixer가 가진 새로운 초능력!

레이철 앤드루가 쓴 ‘IE에서 CSS 그리드 레이아웃을 사용해야 할까?’를 읽었는지 모르겠다. CSS 그리드를 설명하고 IE10, 11에서 그리드 지원에 대해 다룬 글이다. IE의 한계를 이해하는 데 많은 도움이 되는 글이니 한 번쯤 읽기를 권한다. 다만 Autoprefixer에 대한 설명이 상당히 오래됐다는 점만 염두에 두자.

레이철이 IE11의 CSS 그리드 지원에 관한 글을 쓴 시점에서 현재까지 Autoprefixer는 오랜 발전을 거쳐 많은 CSS 그리드 코드를 번역할 수 있게 됐다. 위 글에서 레이철이 작성한 표를 Autoprefixer 8.6.4 버전을 기반으로 새롭게 작성했다. 굵게 쓴 부분이 레이철이 쓴 원본과 다른 점이다.

CSS 그리드 속성	IE10 구현	Autoprefixer 지원 여부	비고
grid-template-columns	-ms-grid-columns	지원
grid-template-rows	-ms-grid-rows	지원
grid-template-areas	NA	지원	Autoprefixer는 이 속성을 그리드의 모습을 이해하는 데 사용할 뿐 다른 속성을 추가하지 않는다.
grid-template	NA	지원	grid-template-columns, grid-template-rows, grid-template-areas 세 속성의 단축 속성
grid-auto-columns	NA	미지원	IE는 자동 배치를 지원하지 않는다.
grid-auto-rows	NA	미지원	IE는 자동 배치를 지원하지 않는다.
grid-auto-flow	NA	미지원	IE는 자동 배치를 지원하지 않는다.
grid	NA	미지원	미지원 사유는 다음 깃허브 이슈에서 확인 가능하다.
grid-row-start	-ms-grid-row	지원1	Span 문법에 따라 grid-row-end가 필요하다.
grid-column-start	-ms-grid-column	지원1	Span 문법에 따라 grid-column-end가 필요하다.
grid-row-end	NA	지원1	grid-row-start가 필요하다.
grid-column-end	NA	지원1	grid-column-start가 필요하다.
grid-row	NA	지원1
grid-column	NA	지원1
grid-area	NA	지원2	Autoprefixer가 grid area를 행/열 좌표로 변환한다.
grid-row-gap	NA	지원3	IE에 여분의 행/열을 만든다.
grid-column-gap	NA	지원3	IE에 여분의 행/열을 만든다.
grid-gap	NA	지원3	IE에 여분의 행/열을 만든다.
NA	-ms-grid-column-span	지원	grid-column-end 와 grid-area가 변환된다.
NA	-ms-grid-row-span	지원	grid-column-end 와 grid-area가 변환된다.
align-self	-ms-grid-row-align	지원
justify-self	-ms-grid-column-align	지원

새로운 절친 grid-template-areas

새롭게 작성한 (그리고 더 희망적인) 표를 보면 Autoprefixer에 멋진 기능이 새로 생긴 걸 알 수 있다. 여기서 가장 중요한 점은 Autoprefixer가 grid-template-areas(와 확장을 통해 grid-template)를 지원한다는 것이다. Autoprefixer는 grid-template-areas를 지원하면서 웹 디자이너가 입력한 그리드의 모습을 완벽히 이해할 수 있게 됐다. 그 덕에 Autoprefixer는 (완벽하진 않지만) grid-gap도 지원하게 되었다.

Autoprefixer는 grid 단축 속성을 지원하지 않는다. 이는 의도적으로 결정한 사항으로 다음 깃허브 이슈에서 자세히 확인할 수 있다. grid 속성은 템플릿을 위한 단축 속성인 동시에 자동 배치에 대한 단축 속성이기도 하다. IE는 자동 배치를 지원하지 않으며 (IE가 할 수 있는) grid 속성의 모든 기능은 grid-template이 대신 할 수 있으니 지원하지 않기로 했다는 것이다.

아래는 레이철이 글을 쓴 시점에 IE가 지원하던 그리드 코드다.

이제 같은 코드를 이렇게 쓸 수 있다.

Autoprefixer는 위의 코드를 아래처럼 IE에 더욱 친화적인 코드로 변환한다.

미디어 쿼리로 grid-template과 grid-template-areas 속성을 변경하면 Autoprefixer가 직접 그리드 셀 좌표를 변경할 수 있다.

위의 소스가 아래에 있는 IE 지원 코드로 바뀐다.

미디어 쿼리를 여러 번 쓰는 건 지저분해 보여도 Autoprefixer에서 미디어 쿼리를 가장 쉽게 변환할 수 있는 방법이다. IE 그리드 셀 좌표는 그리드 템플릿과 같은 미디어 쿼리 안에서 선언될 수 없다. 만약 한 미디어 쿼리 안에 두 속성을 동시에 선언한다면 나올 결과는 두 가지다.

한 가지는 그리드 셀의 기본 위치가 미디어 쿼리에서 옮겨진 위치를 덮어 쓰게 된다. 이러면 미디어 쿼리는 IE에서 아무런 효과를 내지 못한다.

다른 한 가지는 Autoprefixer가 미디어 쿼리 안에 있는 모든 스타일을 (말 그대로 디자이너가 작성한 모든 스타일을) 미디어 쿼리 내에 다른 위치로 옮겨버린다. 이때 끔찍한 CSS 특수성 오류가 일어날 수 있다. 미디어 쿼리를 여러 개 쓰도록 결정한 배경은 현재는 닫힌 깃허브 이슈에서 확인할 수 있다.

Autoprefixer가 만병통치약은 아니다

슈퍼맨이 모든 사람을 구할 수 없는 것처럼 Autoprefixer도 마찬가지다. Autoprefixer는 IE에 그리드를 구현할 때 필요한 많은 일을 줄여주지만 모든 걸 해결해주지는 않는다. Autoprefixer는 코드를 IE가 알아듣게 변환할 뿐이다. IE에서 웹사이트가 엉망으로 나오지 않게 하려면 다음 사항을 기억하자.

Grid Gap에는 제약이 있다

이전 코드에서 보았듯 grid-gap은 미디어 쿼리를 통한 상속을 지원하지 않는다. 웹사이트에 grid-gap을 사용하고 싶다면 그리드 템플릿을 선언하는 모든 미디어 쿼리마다 grid-gap 코드를 작성해야 한다.

업데이트: grid-gap 미디어 쿼리 상속 버그는 Autoprefixer 9.1.1 버전에서 해결되었다. 현재는 기본 그리드 템플릿에 grid-gap을 사용하면 같은 설정을 모든 미디어 쿼리 속 그리드 템플릿으로 전달할 수 있다.

grid-gap을 사용함에 있어 문제점은 그뿐만이 아니다. Autoprefixer에서 grid-gap을 사용하려면 grid-template-areas와 grid-template-columns를 모두 선언해야 한다.

Autoprefixer는 grid-template-areas를 통해 그리드의 모양을 파악하는 방식으로 grid-gap을 지원한다. 그 후 grid-template-columns와 grid-template-rows 값을 인식해 각 행과 열 사이로 grid-gap 크기의 행, 열을 추가한다.

만약 grid-template-areas 없이 grid-gap을 사용한다면 Autoprefixer는 어느 셀이 어떤 그리드에 속하는지 알아낼 수 없다. 중요한 정보를 모른다면 IE는 필요로 하는 행, 열을 온전히 추가하지 못한다.

grid-template-areas에 대한 의문은 해결됐지만 grid-template-columns는 왜 필요한지는 알지 못했다. Autoprefixer로 변환한다면 이런 코드가 더 쉽지 않을까?

CSS 그리드가 행과 열의 값을 기본값을 auto로 설정하듯 Autoprefixer도 기본으로 -ms-grid-columns: auto 20px auto 20px auto; 같은 값을 넣을 수는 없을까? 행에는 기본값을 지정하면서 열에는 지정하지 않는 이유는 무엇일까?

1부에서 설명했지만 IE는 auto를 최신 브라우저와는 조금 다른 방식으로 처리한다. IE에서 열이 auto로 설정되면 크기는 max-content에 맞춰 줄어든다. 한편 최신 브라우저는 템플릿 선언에서 fr 단위를 사용하지 않으면 그리드 열을 1fr로 확장시킨다. 이 차이점 하나로 최신 브라우저와 IE는 매우 다른 그리드를 보여준다. 정확한 판단을 내리기 위험하다고 느낀 Autoprefixer 제작팀은 grid-gap을 사용하려면 grid-template-columns을 필수로 선언하도록 결정했다.

이 정도면 Autoprefixer가 왜 grid-template-columns 없이 grid-gap을 지원하지 않는지 충분히 설명했으리라 본다. auto가 IE에서 다르게 작용한다면 왜 Autoprefixer는 grid-gap을 사용할 때 사용자가 직접 grid-template-rows를 설정하도록 하지 않았을까? 직접 설정할 정도로 심각한 문제가 아닌 걸까?

그런 셈이다. display: grid;를 설정하면 너비는 컨테이너 전체 크기로 늘어난다. 한편 높이는 일반적으로 내용을 보여줄 수 있을 정도로 줄어든다. 물론 늘 그런 건 아니다. 그리드의 높이가 내용보다 커야 하는 데는 여러 이유가 있다. 그리드가 플렉스 아이템이고, 플렉스 컨테이너보다 작다면 이 역시 한 가지 이유가 될 수 있다. 다른 변화를 주지 않는 이상 대체적으로 그리드 컨테이너는 내용물과 높이가 같다.

보통 그리드의 높이는 내용물의 높이와 같으므로 IE와 최신 브라우저 모두 같은 방식으로 auto를 처리한다. 그리드의 높이가 내용보다 높을 경우에만 브라우저별 차이가 발생한다. Autoprefixer 개발팀이 내린 결정은 사용 편의성과 통일성 사이에서 가장 좋은 균형을 유지해준다. 개발팀은 grid-gap을 지원하기 위해 grid-template-rows의 기본값을 지원하고 grid-template-columns의 기본값은 미지원하는 최선의 선택을 내렸다.

자동 배치는 안 돼! 자동 배치는 안 돼! 자동 배치는 안 돼!

몇 번이고 반복할 수 있다. IE에서 CSS 그리드를 사용하려면 모든 걸 수동으로 배치해야 한다는 걸 명심하자. 자동 배치를 사용한 인스턴트는 IE에서 오류를 일으킨다. 셀 수를 정확히 알지 못하는 그리드를 만드는 방법에 대해선 3부에서 설명할 예정이다. 일단 IE에서 CSS 그리드를 지원하려면 행과 열에 속한 셀 수를 정확하게 알아야 한다는 점을 기억하자.

IE가 자동 배치를 지원하지 않는데 Autoprefixer가 그리드 영역을 제어할 수 있다는 건 축복과 같다. 모든 좌표를 웹 디자이너가 직접 계산할 필요 없이 각 셀에 이름을 부여하고 Autoprefixer에게 계산을 맡기면 된다. 미디어 쿼리를 사용할 때 그리드 템플릿을 다시 선언하면 Autoprefixer가 모든 좌표를 새로 계산해준다. 행이나 열을 따로 셀 필요는 없다. 정말 훌륭하다.

영역 이름은 모두 독특해야 한다

grid-template-areas를 활용하는 능력은 Autoprefixer가 가진 강력한 장점이기도 하지만 동시에 제약도 따른다. Autoprefixer는 DOM에 접근할 수 없다. 그래서 Autoprefixer를 사용해 그리드 내부에 셀을 배치하려면 영역 이름을 활용해야 한다. 이때 한 스타일 시트에 같은 영역 이름을 두 번 이상 사용한다면 오류가 발생한다.

간단한 예를 들어보자. 스타일 시트의 윗부분에 alpha 그리드가 grid-template-areas: “delta echo”란 속성을 가지고 있고, 밑에는 beta 그리드가 grid-template-areas: “echo delta” 속성을 가지고 있다. 만약 셀을 echo에 배치한다면 코드는 두 열 중 어디로 들어갈까?

최신 브라우저는 DOM에 접근할 수 있어 그리드 셀을 어떤 열에 배치해야 할지 정확히 안다. 셀이 alpha 그리드에 배치되어야 한다면 첫 번째 열로, beta 그리드에 들어가야 한다면 두 번째 열로 들어갈 것이다. 하지만 Autoprefixer는 CSS밖에 읽을 수 없다. 그래서 셀이 alpha 그리드로 갈지 beta 그리드로 갈지 알 수 없다. “echo” 영역에 셀을 둬야 한다는 정보만 갖고 있을 뿐이다. 이때 Autoprefixer는 스타일 시트 마지막에 있는 “echo”를 찾아 난제를 해결한다. Autoprefixer는 위 코드에서 마지막에 있는 beta 그리드의 “echo delta”를 선택한다. 그리드 셀을 두고 싶은 위치가 alpha 그리드였다면 최신 브라우저에서는 제대로 나오겠지만 IE에서는 엉뚱한 곳에서 출력된다.

그 말은 컴포넌트를 만들기 위해 특정한 영역 이름을 반복해 사용하지 못한다는 뜻이기도 하다. 두 개 이상 grid-template-areas에 같은 영역 이름을 사용하면 IE는 분명 망가진다. 스타일 시트 안에 모든 그리드 영역 이름은 서로 달라야 하고 그렇지 않으면 Autoprefixer는 미쳐 날뛰게 된다.

영역 이름을 각자 다르게 만들기에는 BEM 명명법을 적용하는 게 가장 쉽다.

행과 열이 많을 경우 BEM으로 명명된 이름은 복잡해진다. 약자를 사용해 이름을 줄일 수는 있지만, 영역 이름이 간단할 수록 오류가 생길 확률이 커진다는 걸 염두에 두자.

예외도 있다. 다른 미디어 쿼리 속에서 그리드 영역이 같은 요소를 가리키고 있다면 영역 이름은 중복될 수 있다. 이런 예외를 주지 않으면 스크린 크기에 따라 그리드 영역을 바꾸는 일은 불가능해진다. 각 그리드가 특정한 영역 이름을 가져야 하고 다른 그리드와 겹쳐서는 안 된다는 걸 잊지 않도록 하자.

Autoprefixer는 행, 열 스패닝을 일부 지원한다

IE의 CSS 그리드 구현에서 여러 열을 차지하게 만드는 속성은 두 개뿐이다. 하나는 IE에 차지할 행, 열의 수를 알려주는 -ms-grid-column/row-span이다. 다른 하나는 IE에게 어디서부터 수를 세야 하는지 알려주는 -ms-grid-column/row다.

최신 브라우저에선 더 많은 선택지가 있다.

Autoprefixer 전용 방식

Autoprefixer는 아래와 같은 다양한 방법을 지원하니 여러 셀을 늘리는 최신 기술이 부족할 때 편히 사용하자.

(IE와 비슷하게) 시작 줄과 확장 길이를 설정하는 방법

끝 줄을 설정하고 확장 길이를 역으로 설정하는 방법

시작 줄과 끝 줄을 이어서 설정하는 방법

grid-column/row-end를 사용해 확장 길이만 설정하는 방법. IE는 자동 배치를 지원하지 않으니 스타일 시트의 다른 위치에서 시작 줄을 설정해야 한다.

시작 줄만 설정하는 방법

Autoprefixer 미지원 방식 (경고!)

여기부터는 Autoprefixer가 한계에 부딪힌다. 아래 방법들은 최신 브라우저는 지원하지만 Autoprefixer가 지원하지 못한다. Autoprefixer가 스타일 시트만 볼 수 있기 때문에 셀이 어느 그리드에 속하는지 모르기 때문이다.

시작 줄을 설정하고 확장 길이를 그리드 끝에서 지정하는 방법

시작 줄과 끝 줄을 그리드 끝에서 지정하는 방법

단축어 문법을 사용해 확장 길이만 설정하는 방법(깃허브 이슈)

역방향 확장 길이 설정 (IE는 역방향으로 확장할 수 없음)

끝 줄만 설정하는 방법 (IE는 end를 이해하지 못하며 Autoprefixer는 시작 줄을 모름)

요약하자면 그리드의 끝에서부터 거꾸로 세는 걸 피하기만 한다면 괜찮다.

당분간 줄 이름은 사용하지 말자

최신 그리드의 멋진 능력 중에는 그리드 템플릿에서 줄 이름을 부여하는 기능도 있다. 이를 통해 줄에 번호 대신 이름을 부여하고 호출할 수 있다. Autoprefixer는 그리드 영역을 지원하므로 줄 이름 역시 지원할 거라 생각할지 모르겠다. 안타깝게도 그렇지 않다. (이 글을 작성하는 시점상 최신 버전인) Autoprefixer 8.6.4에선 줄 이름을 지원하지 않는다. 하지만 걱정말라! 그저 우선 순위가 높지 않을 뿐 (영원히) 지원 못한다는 얘기가 아니다. 그리드에서 줄 이름을 주로 사용하는 사람은 이 깃허브 이슈에 의견을 게시하도록 하자. 여러분의 불편 사항을 알린다면 우선 순위가 높아질 테니 말이다. 줄 이름을 지원하기 전까진 그리드 영역을 사용해야 한다.

후에 Autoprefixer가 줄 이름을 지원하게 된다면 스타일시트 내 모든 줄 이름도 서로 달라야 한다는 점을 명심하자. 그리드 영역과 마찬가지로 Autoprefixer는 어떤 줄 이름이 어느 그리드에 속하는지 알지 못하기 때문이다. Autoprefixer에 정보를 정확히 전달하려면 (미디어 쿼리를 제외하고) 스타일시트 속 모든 줄 이름을 다르게 만드는 방법 밖에 없다.

테스트를 잊지 말자!

위에 설명한 규칙만 지킨다면 웹사이트는 IE에서 잘 작동한다. 하지만 다르게 말하면 IE가 예측 불가능하다는 뜻이기도 하다. 얼마 전 세로로 놓인 플렉스 컨테이너를 그리드 아이템으로 만들자 IE11에서 버그가 발생했다. 열의 너비를 minmax(min-content, 350px)로 설정했지만 IE가 min-content를 max-content처럼 처리한 듯했다. 이 버그로 레이아웃은 완전히 박살났다. 코드를 minmax(0, 350px) 바꾸니 문제는 해결되었지만, IE의 그리드 구현이 완벽하지 않다는 걸 보여주는 사례다.

가끔 그리드 셀을 배치하는 일을 까먹을 수 있다. 최신 브라우저들은 (특히 파이어폭스가) 좋은 그리드 개발 도구를 지원하여 웹 디자이너가 최신 브라우저에 그리드를 만들 수 있도록 돕는다. 최신 브라우저는 자동 배치를 지원한다. 그 덕에 그리드를 만들 때 필요한 작업은 절반으로 줄어들며 그리드를 호출하기도 쉽다. 그렇게 작업을 하다가 잠시 쉬고 돌아오면 레이아웃이 보여주는 아름다운 모습에 그만 그리드 셀을 배치하지 않았다는 사실을 잊게 될 것이다. 물론 IE는 끔찍한 모습으로 남는다는 사실도 깨닫지 못한 채 다음 작업으로 넘어간다.

위에 언급한 오류 중 어느 것도 직접 IE11에서 확인하기 전까지는 알 수 없다. 최신 브라우저에서 멋진 그리드 레이아웃을 구현했다면 IE로도 열어 기대한 결과물이 나오는지 확인하자.

Autoprefixer 설정용 주석

Autoprefixer가 아무리 노력을 해도 도움보다 방해가 될 때가 있다. Autoprefixer가 코드를 변환하지 않는 게 도움이 되는 상황에서는 ‘설정용 주석’으로 Autoprefixer를 비활성화할 수 있다.

Autoprefixer: off

이 설정용 주석은 Autoprefixer가 CSS 블록 전체를 번역하지 않도록 한다. 이 주석을 선언하면 주석 앞뒤로 블록 내 어떤 스타일에도 접두어를 입력하지 않는다.

Autoprefixer: ignore next

다 때려부수기보다 하나씩 잘라내는 걸 선호하는 이들에겐 /* autoprefixer: ignore next */ 주석 사용을 권한다. ‘Ignore next’는 CSS 블록 전체를 생략하지 않고 바로 뒷줄만 건너뛴다.

전처리기용 주석

Sass(혹은 다른 CSS 전처리기)를 사용하는 경우 주석을 작성할 때 이중 슬래시(//)는 사용하지 않는 편이 좋다. Sass는 Autoprefixer가 변환하기 전 해당 주석을 없애기 때문이다.

복습 시간

아래는 위에서 설명한 IE11 CSS 그리드의 마스터가 되기 위해 기억해야 할 사항들이다.

• Autoprefixer 최신 버전을 사용한다. (npm i autoprefixer@latest -D)
• Autoprefixer 그리드 설정을 켠다.
• 모든 그리드 셀은 무조건 직접 배치한다. 자동 배치를 사용해선 안 된다.
• 그리드 셀을 배치할 때 grid-template-areas를 우선적으로 사용한다.
• 단축 속성으로는 (grid 말고) grid-template 사용한다.
• 미디어 쿼리에서 동일 요소를 가리키는 경우 말고는 중복된 영역 이름을 사용하지 않는다.
• grid-gap을 사용할 때는 grid-template-areas와 grid-template-columns 모두 선언해야 한다.
• 여러 열과 행을 확장시킬 때는 그리드 끝에서부터 거꾸로 세지 않는다. Autoprefixer는 이를 지원할 정도로 그리드를 잘 이해하지 못한다.
• 줄 이름은 당분간 사용하지 않는다. 사용하고 싶다면 이 깃허브 이슈에 엄지 버튼을 누르자.
• 문제 발생을 막기 위해 Autoprefixer가 스타일 시트 특정 영역을 번역하지 않도록 하려면 설정용 주석인 /* autoprefixer: off */와 /* autoprefixer: ignore next */를 사용한다.
• 테스트를 잊지 않는다.

 

1부에서 나온 사항

• IE는 잠재적 그리드를 지원한다.
• IE는 repeat을 지원한다.
• minmax(), min-content, max-content 모두 IE가 자체적으로 지원한다.
• fit-content()는 IE가 자체적으로 지원하지 않아 auto와 max-width로 우회할 수 있다.
• IE의 auto는 최신 브라우저의 auto와 다르다.

 

3부에서는 IE11에서 플렉스박스를 기반으로 반응형 그리드를 만드는 법에 대해 다룰 예정이다. 이 기법은 grid-gap 효과도 낼 수 있다.