CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
      }
      .jb-item {
        padding: 20px;
        border: 1px solid #444444;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
      <div class="jb-item">Item 3</div>
      <div class="jb-item">Item 4</div>
    </div>
  </body>
</html>

하지만 IE에서는 다음과 같이 나옵니다.

이를 해결하기 위해서는 Vendor Prefix를 붙여야 하는데, 그것만으로도 잘 해결되지 않을 수 있습니다. 그렇다면 Autoprefixer CSS online을 사용해보세요.

CSS 코드를 왼쪽에 넣으면, 오른쪽에 코드가 출력되고...

그 코드를 사용하면 IE에서도 원하는 결과를 얻을 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 20px 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: 1fr 20px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
      }
      .jb-container > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
      }
      .jb-container > *:nth-child(3) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
      }
      .jb-container > *:nth-child(4) {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
      }
      .jb-item {
        padding: 20px;
        border: 1px solid #444444;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
      <div class="jb-item">Item 3</div>
      <div class="jb-item">Item 4</div>
    </div>
  </body>
</html>

하지만, 주의할 점이 있습니다. 코드 구성에 따라 제대로 작동하지 않을 수 있습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 20px;
      }
      .jb-item {
        padding: 20px;
        border: 1px solid #444444;
      }
    </style>
  </head>
  <body>
    <div class="jb-container">
      <div class="jb-item">Item 1</div>
      <div class="jb-item">Item 2</div>
    </div>
  </body>
</html>

위의 CSS 코드를 변환하면 다음과 같이 나오는데...

.jb-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
}

IE에서 이상하게 나옵니다.

다음처럼 코드를 짜면 제대로 나오구요.

.jb-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.jb-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.jb-container > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.jb-container > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

따라서 수정된 CSS 코드를 바로 사용하지 말고, 제대로 작동하는지 테스트를 먼저 하는 게 좋습니다.

Related Posts

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 변수 사용하기

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS / CSS로 드롭다운(Dropdown) 메뉴 만들기

CSS만으로 만든 드롭다운 메뉴입니다. Ipsum, Dolor에 마우스를 올리면 하위 메뉴가 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS Tips | Dropdown Menu</title> <style> .dropdown > ul > li { ...

CSS / list-style-position / 목록의 마커 위치 정하는 속성

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

CSS / text-shadow / 글자에 그림자 효과를 주는 속성

개요 text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 ...

CSS / 표(table) 꾸미기 / 반응형 표 만들기

CSS / 표(table) 꾸미기 / 반응형 표 만들기

데이터를 잘 정리해서 보여줄 때 표를 이용합니다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋습니다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생합니다. 다음은 가로 크기가 100%인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / 마우스 오버 효과 /  이미지 확대

CSS / 마우스 오버 효과 / 이미지 확대

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 우선 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

CSS / text-indent / 들여쓰기, 내어쓰기 만드는 속성

text-indent 들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 기본값은 0입니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> p { font-size: 20px; ...

CSS / Flex / 정가운데 배치하기

CSS / Flex / 정가운데 배치하기

justify-content, align-items 속성을 이용하여 안쪽 요소를 바깥쪽 요소의 정가운데에 배치할 수 있습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS 강좌