＃알아야 할 개념 :
● 개념_ grid - area , grid-template-areas 사용법
순서1_ : 부모 Box 내 모든 요소들을 " grid-area : 이름 ; " 으로 각 요소의 이름 붙이기
순서2 _ : 요소에 전부 이름을 지정했다면, 부모 Box에
grid-template-areas =
"요소 1x1 이름 요소 1x2 이름2 ..."
"요소 2x1 이름 요소 2x2 이름2 ..."
..
"요소 nx1 이름1 요소 nx2 이름2 ..." ;
문법으로 속성값 대입한다.
○ Ex1 _
순서1 : 요소들 이름 지정
- red.Box 셀렉터 => grid-area : R; //요소이름을 R로 지정
- green.Box 셀렉터 => grid-area : G //요소이름을 G로 지정
- blue.Box 셀렉터 => grid.area : B //요소 이름을 B로 지정
순서2 : 부모 Box 셀렉터에 grid-template-areas 로 배치 시작
§ 배치 1 :
grid-tamplate-areas :
"R G"
"R B";
§ 배치 2 :
grid-tamplate-areas :
". G"
"R B";
§ 배치 3 :
//이건 왜그런지는 모르겠지만, grid-area 지정된 Box와 grid-template-areas 로 배치 했다면,
//지정된 Box들은 모두 있어야 되는 약속이 있나봄
grid-tamplate-areas :
"R G"
"R .";
※연습문제1 :
● 문제 조건 :
get-area와 get -template-areas로 출력해보기
● 해결 방법 :
과정1_ 필요한 요소 개수 계산
◆ white.div : 4개
red.div : 1개 , blue.div : 1개, yellow.div : 1개
과정2_ 각 요소에 grid-area 속성으로 이름 지정
과정3_ 부모 Box에 grid-template-areas : "";로 모든 요소 직접 배치
