css
CSS - 그리드 레이아웃 (Grid Layout)
float 속성은 문서 내부에서 이미지 등을 띄워 출력하기 위해 만들어진 속성입니다. 그런데 이를 활용하다 보니 레이아웃에도 사용할 수 있어서 20년 넘게 사용되어 왔던 것입니다.
이를 실행하면, 다음과 같이 출력합니다.
다음은 결과 화면입니다.
실행하면 다음과 같이 출력됩니다.
다음은 결과 화면입니다.
참고로 grid-gap 속성으로 GutterWidth도 지정할 수 있습니다.
위 코드를 실행하면 다음의 결과를 얻을 수 있습니다.
위 소스 결과는 아래와 같습니다.
하지만 레이아웃 구성을 위해 만들어진 속성이 아니다 보니 처음 보면 납득하기 힘들고, 어떻게 활용해야 할지 잘 모르는 경우가 많습니다. 그래서 CSS3에서는 레이아웃을 구성할 때 사용할 수 있는 전용 속성을 추가했는데, 그게 바로 Flex 속성과 Grid 속성입니다.
Flex 속성과 Grid 속성은 엣지, 크롬 등 최신 브라우저와 호환이 잘되기 때문에 멋진 그리드 속성일 것입니다. 이제 그리드 속성이 어떤 느낌인지 살펴보도록 하겠습니다.
일단 CSS3 그리드 레이아웃을 사용하려면, 다른 요소를 감싸는 태그에 display: grid를 선언해야 합니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 그리드 시스템</title>
<style>
.container {
display: grid;
/* CSS3 그리드 레이아웃을 선언합니다. */
}
</style>
</head>
<body>
<div class="container">
<div class="cell-a">cell a</div>
<div class="cell-b">cell b</div>
<div class="cell-c">cell c</div>
<div class="cell-d">cell d</div>
</div>
</body>
</html>그리드 나누기
display 속성에 grid를 선언하였으면 grid-template-columns 속성을 지정하도록 합니다. Width는 각 200픽셀 크기로 2개 나누고 싶다면, 아래와 같이 입력합니다.
<style>
.container {
display: grid;
/* 세로로 200픽셀씩 자릅니다. */
grid-template-columns: 200px 200px;
}
[class *= cell] {
box-sizing: border-box;
border: 5px solid black;
border-radius: 10px;
padding: 20px;
/* 각각의 요소들이 눈에 보이도록 입력하였습니다. */
}
</style>
grid-template-columns 속성에는 비율의 단위로 fr 를 사용할 수 있습니다. grid-template-columns 속성에 지정된 fr 단위의 합을 기반으로 비율을 지정한다고 생각하세요. 예를 들어 2:1의 비율로 나누고 싶다면, 다음과 같이 입력합니다.
.container {
display: grid;
grid-template-columns: 2fr 1fr;
}
일부 요소의 크기를 픽셀 단위 등으로 고정할 수도 있습니다.
.container {
display: grid;
grid-template-columns: 300px 1fr;
}
CSS3의 그리드 시스템에는 grid-template-rows 라는 속성도 있습니다. 이는 가로로 자를 때 사용 합니다. 만약 다음과 같은 코드를 사용한다면, 가로로 나뉜 그리드의 높이가 1:2 비율로 지정됩니다.
.container {
display: grid;
grid-template-columns: 300px 300px;
grid-template-rows: 1fr 2fr;
}
이와 같은 방법으로 그리드를 나누는 것이 CSS3 그리드 레이아웃의 기본입니다.
단축 형태의 코드를 사용할 수도 있습니다. 예를 들면 위 코드를 아래와 같이 짧게 작성할 수도 있습니다.
순서는 <grid-template-rows>/<grid-templatecolumns> 입니다. 처음 보면 나눗셈으로 잘못 해석해버리는 경우가 있으므로, 기억해두는 것이 좋겠습니다.
.container {
display: grid;
grid-template: 300px 300px / 1fr 2fr;
}
.container {
display: grid;
grid-template-columns: 300px 300px;
grid-template-rows: 1fr 2fr;
/* GapWidth를 5픽셀로 지정합니다. */
grid-gap: 5px;
}
셀 배치하기
그리드 위에 배치되는 요소를 "셀(Sell)"이라고 부릅니다.
MS 워드 등을 사용해보면, "셀 병합"이라는 기능이 있습니다. 이처럼 CSS 그리드 레이아웃도 요소를 여러 셀에 걸쳐 출력할 수 있습니다. 어떤 식으로 사용되는지 이해하기 위해, 먼저 다음 그림을 살펴봅시다.
그리드를 구성하는 각각의 선에 숫자가 붙어 있습니다. 이 숫자를 기억하여 다음 코드를 살펴 봅시다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 그리드 시스템</title>
<style>
.container {
display: grid;
grid-template: 200px 200px 200px / 200px 200px 200px;
grid-gap: 10px;
}
[class *= cell] {
box-sizing: border-box;
border: 5px solid black;
border-radius: 10px;
padding: 10px;
}
.cell-a {
/* 행(가로)으로 1 ~ 4 번까지 차지합니다. */
grid-row-start: 1;
grid-row-end: 4;
/* 열(세로)로 1 ~ 3 번까지 차지합니다. */
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="container">
<div class="cell-a">cell a</div>
<div class="cell-b">cell b</div>
<div class="cell-c">cell c</div>
<div class="cell-d">cell d</div>
</div>
</body>
</html>
grid-column-start, grid-column-end 속성은 열(column: 세로줄)에서 어디부터 어디까지 차지하게 할 것인가 이고, grid-row-start, grid-row-end: 속성은 행(row: 가로줄)에서 어디부터 어디까지 차지하게 할 것인가를 지정하는 속성입니다.
CSS3 그리드 시스템은 다음과 같은 과정을 거쳐 요소를 배치한다고 생각하면 쉽습니다.
- grid-template-columns, grid-template-rows 속성으로 그리드를 나눕니다.
- grid-column-start, grid-column-end, grid-row-start, grid-row-end 속성이 적용된 요소의 크기를 지정합니다.
- 나머지 요소를 차례로 배치합니다.
따라서 . cell-a라는 요소가 먼저 화면에 배치되고, 나머지 요소들이 화면을 채우게 됩니다.
참고로 위 코드를 아래와 같이 짧게 작성할 수도 있습니다. 마찬가지로 처음 보면 나눗셈으로 잘못 해석 해버리는 경우가 있으므로 기억해 두는 것이 좋겠습니다.
.cell-b {
grio-row; 1 / 4;
grid-column: 1 / 3;
}
이때는 다음과 같은 형태를 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 그리드 시스템</title>
<style>
* {
/* 초기화 */
margin: 0;
padding: 0;
}
.container {
/* 너비 고정 and 중앙 정렬 */
width: 960px;
margin: 0 auto;
padding-top: 10px;
/* 그리드 구성하기 */
display: grid;
grid-template: 70px 1fr 70px / 200px 1fr;
grid-gap: 5px;
}
[class *= cell] {
box-sizing: border-box;
border: 5px solid black;
padding: 10px;
border-radius: 10px;
}
.cell-header {
grid-column: 1 / 3;
}
.cell-footer {
grid-column: 1 / 3;
}
</style>
</head>
<body>
<div class="container">
<div class="cell-header">
<h1>Header</h1>
</div>
<div class="cell-aide">
<h2>Aside</h2>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="cell-content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>n hac habitasse platea dictumst.</p>
</div>
<div class="cell-footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>문자열로 배치하기
grid-template-areas 속성과 grid-area 속성을 조합하면, 이전의 다른 방법과 완전히 다른 형태로 요소를 배치할 수 있습니다. 일단 설명보다 코드를 먼저 살펴보겠습니다.
이전의 grid-template-areas 속성과 grid-area 속성으로 구성하면 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 그리드 시스템</title>
<style>
* {
/* 초기화 */
margin: 0;
padding: 0;
}
.container {
/* 너비 고정 and 중앙 정렬 */
width: 960px;
margin: 0 auto;
/* 그리드 구성하기 */
display: grid;
grid-template: 70px 1fr 70px / 200px 1fr;
grid-gap: 5px;
/* 1. 원하는 형태를 문자열로 구성한 다음... */
grid-template-areas:
'header header'
'aside content'
'footer footer';
}
[class *= cell] {
box-sizing: border-box;
border: 5px solid black;
padding: 10px;
border-radius: 10px;
}
.cell-header { grid-area: header; }
.cell-aside { grid-area: aside; }
.cell-content { grid-area: content; }
.cell-footer { grid-area: footer; }
</style>
</head>
<body>
<div class="container">
<div class="cell-header">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div class="cell-aide">
<p>Lorem ipsum</p>
<p>dolor sit amet</p>
<p>Lorem ipsum</p>
<p>dolor sit amet</p>
</div>
<div class="cell-content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="cell-footer">
Lorem ipsum dolor sit amet
</div>
</div>
</body>
</html>
이외에도 셀에 이름을 붙이거나 하는 다양한 기능들이 있지만, 지금까지의 내용만으로도 충분히 활용할 수 있을 것입니다.
지금까지 살펴본 CSS3 그리드 레이아웃을 보고 "굉장히 편리하다"거나 "좀 어렵다"라고 생각할 수 있겠지만 여러 번 사용하다 보면 편리하다고 생각할 것입니다.
![[JS] Promise 조합하기](https://4.bp.blogspot.com/-O3EpVMWcoKw/WxY6-6I4--I/AAAAAAAAB2s/KzC0FqUQtkMdw7VzT6oOR_8vbZO6EJc-ACK4BGAYYCw/w180/nth.png)
){kind=link}
0 댓글