grid란
- CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다.
- 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다.
- 그리드 레이아웃은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다.
See the Pen Untitled by kebab000 (@kebab000) on CodePen.
- 위의 예제는 그리드를 이용해 레이아웃을 만든 것 입니다.
- 이제 코드를 보면서 설명을 해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃01 - grid</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-rows: 100px 100px 780px 100px;
grid-template-columns: 400px 800px;
}
#header {
background-color: #FFE0B2;
grid-area: header;
}
#nav {
background-color: #FFCC80;
grid-area: nav;
}
#aside {
background-color: #FFB74D;
grid-area: aside;
}
#section {
background-color: #FFA726;
grid-area: section;
}
#footer {
background-color: #FF9800;
grid-area: footer;
}
</style>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<aside id="aside"></aside>
<section id="section"></section>
<footer id="footer"></footer>
</div>
</body>
</html>- 일단 body에 부모요소인 wrap 하나와 그안에 각 박스를 구성할 요소들을 5개 만들어 주었습니다.
- 그 후 style에 wrap을 제외한 나머지 요소들에게 색과 gird-area: 이름; 을 넣어주면 준비는 끝났습니다.
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-rows: 100px 100px 780px 100px;
grid-template-columns: 400px 800px;
}- 가장 중요한 부분이 #wrap 부분을 보겠습니다.
- 먼저 전체의 넓이를 width로 정해주고 margin: 0 auto;를 넣어 기본 세팅을 해주었습니다.
- display: grid;를 넣어 그리드 형식으로 만들어 줍니다.
- grid-template-areas: 에 만들고 싶은 레이아웃의 모양을 넣어주면 됩니다.
- 저는 가로로 두칸 세로로 4칸을 만들었습니다.
- 쉽게 생각하자면 가로로 2칸 세로로 4칸짜리 표라고 생각하시면 될 것 같습니다.
- 그 후 grid-template-rows: 와grid-template-columns:를 사용해 각 칸의 높이와 넓이를 정해주는 것 입니다.
- grid-template-rows: 100px 100px 780px 100px;은 칸의 높이를 첫 줄100px,두번째 줄도 100px,세번째 줄은 780px, 네번째 줄은 100px을 주겠다는 의미이고
- grid-template-columns: 400px 800px; 은 왼쪽부터 넓이를 400px, 800px로 주겠다는 뜻입니다.
- 이렇게 grid를 이용한다면 다른 레이아웃 짜는 방법들보다 조금 더 직관적으로 레이아웃을 만들 수 있습니다.!
내용출처 : 김광수 | 조혜경 저 Responsive Web Publishing