반응형
grid-template-columns
-
CSS Grid : Grid-template-columns, Grid-template-rows, Grid-template, Fraction 속성컴퓨터 알아가기/HTML CSS 2021. 5. 14. 19:30
Grid 격자에 대해 공부해 보도록 하겠습니다. 쉽게 표현하자면 하나의 큰 영역(container)안에 바둑판같은 격자(box)를 형성한다고 보면 되겠습니다. 우선 순위는 행 기준인데 행과 열을 지정함으로써 격자가 생기겠지요. 즉 container가 상위 영역이고 box가 하위 영역이어야하고 상위 영역을 Parent, 하위 영역을 Children이라고 영문은 되 있더라구요. Flexbox 처럼 display속성에 grid를 주면 상위 영역안으로 하위 영역이 배치가 되는 구조라고 보시면 됩니다. 다음 HTML과 CSS 그리고 이에 따른 브라우저의 모양을 기준으로 설명 드리겠습니다. (기준은 Codecademy가 메인이고 추가 여러 소스에서 공부하고 같이 내용을 담도록 하겠습니다. ) 위 예제에서 상위 영역..