grid-template-areas 에 관하여
오늘 시간에는 grid-template-areas 개념을 학습 한 후 이를 토대로 미니 프로젝트를 만들어 보는 시간을 가졌다.
grid-template-areas
grid-template-areas 는 layout을 짤 때 유용하다.
만들고자 하는 row 의 개수와 columns 의 개수를 만들어서 손쉽게 layout을 작성
아래의 코드는 html과 css 파일에 작성한 코드이고 4행 4열로 보통의 웹페이지 layout을
작성하였다.html code
<body>
<div class ="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>css code
.grid {
display: grid;
grid-template-columns: 100px repeat(2, 150px) 100px;
grid-template-rows: 100px repeat(2, 100px) 100px;
grid-template-areas:
"header header header header"
"content content content nav"
"content content content nav"
"footer footer footer footer";
}
.header{
background-color: paleturquoise;
grid-area: header;
}
.content{
background-color: #F6F6F6;
grid-area: content;
}
.nav{
background-color: #BAE1F0;
grid-area: nav;
}
.footer{
background-color: palegreen;
grid-area: footer;
}
grid-column-start grid-column-end
grid-row-start grid-row-end
위의 특성을 활용하면 grid-template-areas 보다 쉽게 layout 을 작성할 수 있다
grid-area로 설정한 영역을 stretching 하여 layout을 만드는 것이 특징이다
grid-column-start는 열의 시작 번호를 적는 란이다. 시작 번호는 1번이고 위 코드에서
4개의 칸을 만들어 주었기 때문에 끝나는 열의 번호는 최대 5이다. 행도 마찬가지이다.
따라서 위와 같은 그림의 layout을 만들어주기 위해서는 다음과 같이 작성해주면 위와 같은
레이아웃을 만들 수 있다.
.grid {
display: grid;
grid-template-columns: 100px repeat(2, 150px) 100px;
grid-template-rows: 100px repeat(2, 100px) 100px;
}
.header{
background-color: paleturquoise;
grid-column-start: 1;
grid-column-end: 5;
}
.content{
background-color: #F6F6F6;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.nav{
background-color: #BAE1F0;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 4;
}
.footer{
background-color: palegreen;
grid-row-start: 4;
grid-row-end: 5;
grid-column-start: 1;
grid-column-end: 5;
}This is mini project(2) which I made
위에서 배운 내용으 토대로 mini project(2)를 만들었다
해당 프로젝트를 진행하면서 던졌던 질문들
1. 전체적인 grid를 어떻게 구성할지 생각해보기
2. 각 그리드 안에 어떻게 다시 grid를 나눌지 생각해보기
3. 세부 그리드 안에 위치한 아이템을 어떻게 조정 할 지 생각 해보기