“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
grid는 flex와 float와 다르게 테이블을 만들듯이 사용하는 속성입니다.
세로 열과 가로 행을 기준을 요소를 정렬 할 수잇스빈다. 하지만 테이블과 달리 css그리드는 다양 한 레이아웃을 훨씬 더 쉽게 구현할 수있습니다. 자식요소를 일일이 위치를 지정해 준 것 처럼, 실제로 겹치게 층을 지면서 자리를 잡도로 ㄱ각 요소를 위치를 지정해 줄수도 잇습니다.
float와 grid에 대해 궁금하시다면?? ⬇️⬇️⬇️⬇️⬇️
레이아웃 : float에 대해 알아봅시다!
블록구조의 태그들은 기본적으로 세로로 배치가 되지만 float를 이용하여 가로로 배치할 수있습니다. 레이아웃을 완성할때 필수적인 속성으로 지정하고 해제하는 방법도 있습니다. 1. float float는
jo0132.tistory.com
레이아웃02 : flex에 대해 알아봅시다!
사이트의 레이아웃을 구성할 때 기본적으로 수직 구조로 이루어져있습니다. 레이아웃을 구성 할때 기본적으로 블록 구조를 사용하게 되는데 이러한 구조들은 수직으로 쌓이는 특성이기 때문입
jo0132.tistory.com
grid-column-start 와 grid-column-end 그리고 grid-row-start 와 grid-row-end을 이용한 예제
<!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 layout</title>
<style>
#wrap {
display: grid;
grid-template-columns: 33% 34% 33%;
grid-template-rows: 100px 100px 100px;
margin: 2px; padding: 10px; font-size: 20px;
}
.grid1 {
grid-column-start: 1; grid-column-end: 3;
background: #579;
}
.grid2 {
grid-column-start: 3; grid-column-end: 4;
background: #68a;
}
.grid3 {
grid-column-start: 1; grid-column-end: 2;
grid-row-start: 2; grid-row-end: 4;
background: #79b
}
.grid4 {
grid-column-start: 2; grid-column-end: 4;
background: #8ac;
}
.grid5 {
grid-column-start: 2; grid-column-end: 3;
background: #9bd;
}
.grid6 {
grid-column-start: 3; grid-column-end: 4;
background: #ace;
}
</style>
</head>
<body>
<div id="wrap">
<div class="grid1">11111</div>
<div class="grid2">22222</div>
<div class="grid3">33333</div>
<div class="grid4">44444</div>
<div class="grid5">55555</div>
<div class="grid6">66666</div>
</div>
</body>
</html>
그리드는 경계선을 가지고 기준을 잡습니다.
1번째 칸은 grid-column-start : 1로 시작하여 grid-column-end : 3으로 끝나는 것으로 볼 수있습니다.
경계선에 번호를 보면 1로 시작해서 3으로 끝나는 걸로 생각할 수 있습니다.
만약 아래로 내려가는 블록이 있다면
column을 먼저 지정한 후 row을 지정하여 설정합니다.
이는 3번 칸을 보면 알수 있는데
column이 1에서2로 끝나고 row가 2에서 시작하여 4로 끝나는 것으로 되어있습니다. 그렇게 위와 같은 모습이 만들어진다고 볼 수 있습니다.
grid-template-areas을 이용한 예제
<!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>레이아웃1 - grid</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #FFF3E0;
}
#wrap {
width: 1200px;
margin: 0 auto;
display: grid;
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;
}
#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>
</head>
<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>
grid-template-areas을 이용한 예제는 구역을 나누어 가로 2줄 세로 4줄로 나누어 지정합니다.
위에서의 예제와 다른것은 보기가 쉽고 지저하기가 쉽다는 점에서 장점이라고 생각합니다.
밑에 코드와 이미지를 보면 나누어진 구역에 이름을 주어 그 칸을 그 이름을 가지고 있는 블록이 그 자리를 차지하는 모습을 볼 수있습니다. 밑에 코드에 지정말고 도 사이즈도 따로 적어줘야하지만
위에 코드와 비교해보면 훨씬 편한 것 같습니다.
grid-template-areas:
"header header"
"nav nav"
"aside section"
"footer footer"
;
grid-template-columns: 400px 800px;
grid-template-rows: 100px 100px 780px 100px;