반응형
grid
CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.
CSS Grid 레이아웃은 Flexbox보다 더 복잡한 레이아웃을 구현할 수 있는 방법입니다. CSS Grid를 사용하면 2차원 레이아웃을 만들 수 있으며, Flexbox보다 더 다양한 배치와 정렬을 할 수 있습니다.
CSS Grid 레이아웃에서 사용되는 주요 속성은 다음과 같습니다.
- display: grid: Grid 컨테이너를 정의합니다.
- grid-template-rows: Grid 컨테이너에서 각 행의 높이를 정의합니다.
- grid-template-columns: Grid 컨테이너에서 각 열의 너비를 정의합니다.
- grid-template-areas: Grid 컨테이너에서 각 셀의 위치를 정의합니다.
- grid-row-gap: 각 행 사이의 간격을 정의합니다.
- grid-column-gap: 각 열 사이의 간격을 정의합니다.
- grid-gap: grid-row-gap과 grid-column-gap을 동시에 정의합니다.
- grid-auto-rows: Grid 컨테이너에서 새로운 행의 높이를 정의합니다.
- grid-auto-columns: Grid 컨테이너에서 새로운 열의 너비를 정의합니다.
- grid-auto-flow: Grid 컨테이너에서 새로운 아이템이 추가될 때 그리드의 배치 방식을 정의합니다.
- grid-row-start: Grid 아이템의 시작 행을 지정합니다.
- grid-row-end: Grid 아이템의 끝 행을 지정합니다.
- grid-column-start: Grid 아이템의 시작 열을 지정합니다.
- grid-column-end: Grid 아이템의 끝 열을 지정합니다.
- grid-area: Grid 아이템의 위치와 크기를 지정합니다.
속성이 너무 많아요!!
display: grid
display: grid;는 CSS Grid 레이아웃을 만들기 위해 필요한 가장 기본적인 속성입니다. 이 속성은 요소를 Grid 컨테이너로 정의합니다.
Grid 컨테이너는 Grid 아이템을 포함하는 박스이며, Grid 레이아웃을 사용하여 Grid 아이템을 배치합니다.
Grid 아이템은 Grid 컨테이너 내에서 배치되는 개별 요소이며, Grid 레이아웃을 사용하여 위치를 지정할 수 있습니다.
<!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>레이아웃 - grid</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #E1F5FE;
}
#wrap {
width: 1200px;
display: grid;
margin: 0 auto;
grid-template-areas:
"header header"
"nav nav"
"section aside"
"section article"
"section article2"
"footer footer"
;
grid-template-columns: 300px 900px;
grid-template-rows: 100px 100px 260px 260px 260px 100px;
}
#header {
background-color: #B3E5FC;
grid-area: header;
}
#nav {
background-color: #81D4FA;
grid-area: nav;
}
#section {
background-color: #4FC3F7;
grid-area: section;
}
#aside {
background-color: #29B6F6;
grid-area: aside;
}
#article {
background-color: #03A9F4;
grid-area: article;
}
#article2 {
background-color: #039BE5;
grid-area: article2;
}
#footer {
background-color: #0288D1;
grid-area: footer;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header"></header>
<nav id="nav"></nav>
<section id="section"></section>
<aside id="aside"></aside>
<article id="article"></article>
<article2 id="article2"></article2>
<footer id="footer"></footer>
</div id="wrap">
</body>
</html>
이 사진은 grid로 만든 레이아웃 입니다.
aside쪽 일자로 세워진 하늘색 블럭은 사실 3단으로 분리되어있습니다.
3단으로 나뉘어진 레이아웃에 같은색을 주어 한 레이아웃처럼 보이게 표현했습니다!