grid에 관하여
mini_project(3)
GRID 복습
오늘 grid에 대해서 다시 복습했다. 어제와 비슷한 과제를 수행하였는데 어제 과제보다 쉬웠다. 주어진 내용이 좀 더 투박
해서였는지 모르겠다.
과제 분석
2행 2열의 표가 주어졌고 2행 2열 부분의 grid cell 부분이 다시 2행 2열로 나누어졌다. 그렇게 나누어진 각 cell에는
'Ostrich'라는 글자가 적혀 있고 행과 열이 가운데 정렬되어 있었다.
이를 구현하기 위해선 먼저 grid를 이용해 2행 2열을 만드는 것이 우선이다.
그 다음 2행2열 cell을 다시 2 X 2로 나눈다
정렬을 위해 display 'grid'로 정한 div 안에 4개의 div를 만들어 주었다. 그 이유는 display 'flex'를 적용시키기
위한 div가 필요했기 때문이었다.
같은 이유로 2행 2열의 grid cell 은 display: grid;를 적용시켜 주었고 텍스트의 정렬을 위해 그 안에 4개의 div를
만든 뒤 각 div에 display: flex;를 적용시켜 text를 가운데 정렬시켜 주었다.
각 cell의 색깔이나 폰트의 크기와 같은 세부적인 부분의 경우 4개의 div를 아우르는 자식 요소에 적용시킬 수 있는 특성
일 경우 부모요소에 적음으로써 자식 요소에 적용시키게끔 하였고 개별적으로 적용시켜야 하는 것은 각각의 element에 적
용시켜 완성하였다.
> 어제 오늘 grid를 통해 구획을 나누어 보니 layout에 대한 개념은 잡혔고 큰 틀에서의 layout은 만들 수 있는 자신감
이 생겼다.