grid 설명
지난주에 그리드에대한 대략적인 설명을 해주셨는데, 오늘은 플렉스와 비교한 활용법에 대한
수업을 받을 수 있었다. 사용에 익숙해지면 매우 편리할 거같고, 특히 반응형을 크게 고려하지 않아도되서,
여러가지로 이용할 수 있을것 같다.
그리드가 플렉스보다 더 최신 문법
익스플로러는 지원하지 않는다.
그리드 트랙: 행 또는 열
그리드 셀: 한 칸
그리드 라인: 셀 구분 선(1번부터 시작한다. 자바스트립트와 헷갈리지 말자)
Px, %,fr,repeat등으로 표현가능
fr-fraction: 분수
/* grid-template-columns: 200px 500px 200px; */
/* grid-template-columns: 1fr 2.5fr 1fr; */
/* grid-template-columns: 25% 50% 25%; */
grid-template-columns: repeat(3, 1fr);
column이 각각의 비율대로 생겨나는것을 볼 수있다.
<방법 1>
Grid-template-area 로 지정하는 법
.container {
border: 10px solid black;
display: grid;
gap: 10px;
grid-template-areas: 'header header header '
'section section aside'
'footer footer footer';
}
좀 더빠르게 구성할 수 있는 방법이다.
하지만 현업에서는 2번 방법을 좀 더 많이 쓴다고 한다.
그리고 일단은 레이아웃을 잡을 수 있는 진짜 빠른 방법이다.
<방법2>
행과 열의 영역을 지정해주는 법
이방법을 더 많이 사용한다고 함
.header {
border: 10px solid tomato;
grid-row: 1/2;
grid-column: 1/4;
}
.section {
border: 10px solid blue;
grid-row: 2/3;
grid-column: 1/3;
}
.aside {
border: 10px solid darkred;
grid-row: 2/3;
grid-column: 3/4
}
.footer {
border: 10px solid deeppink;
grid-row: 3/4;
grid-column: 1/4;
}
결과는 똑같은 내용이다.
맨앞의 라인이 1이라는 점을 기억해야 한다.
이번주에는 지난주에 클론코딩 했던 mdn페이지를 grid로 다시 구성해보기로 했다.
지난 번에 header-nav-section-article-footer로 구분했는데, 그에 맞춰서 나누어 진행할 예정이다.
내일은 특강이 있는날!! 오늘까지 배운거 싹 정리하고, 내일 새로운 마음으로 특강가야지~😋