https://appbrewery.github.io/gridgarden/#ko Grid Garden - A game for learning CSS grid layout appbrewery.github.io

이번에는 만든 Grid에 아이템을 어떻게 배치해야 하는지 그리고 원하는 영역에 어떻게 배치해야 하는지에 대해 알아보겠습니다. 그 전에 다시 한번 Grid를 사용하기 위한 기본적인 용어들을 정리해보겠습니다. 1. Grid를 적용할 컨텐츠들을 전체적으로 담는 영역을 Grid 컨테이너라고 합니다. 2. 컨테이너 내부에 존재하는 컨텐츠들을 Grid 아이템이라고 합니다. 3. Grid를 생성하게 되면 안보이지만 아이템들을 배치하기 위한 격자선이 존재합니다. 이것을 트랙이라고 말합니다. 트랙에는 row트랙, column트랙이 있습니다. 각각 행과 열의 격자선을 뜻합니다. 4. row트랙과 column 트랙이 교차한 영역을 Grid 셀이라고 합니다. 이 Grid 셀에 컨텐츠들을 배치하게 됩니다. Grid 아이템을 G..

https://appbrewery.github.io/grid-sizing/ Grid Fundamentals appbrewery.github.io

Grid 로 레이아웃을 구성했다면 이제 해당 Grid의 Size를 지정해주는 CSS 옵션들에 대해 알아보고 적용해보겠습니다. Size를 지정해줄 때 px을 사용하여 고정적인 크기를 가지게 할 수도 있으며, rem 과 같은 크기 키워드를 적용해 줄 수 있습니다. grid-template index.html 1 2 3 4 style.css .grid-container{ display: grid; grid-template: 100px 200px / 400px 800px; } .grid-container > *{ border: 1px black solid; } 앞서 grid는 행과 열에 대한 크기와 수를 지정해줄 때 grid-template-rows, grid-template-columns 옵션을 사용해주었는데..

https://appbrewery.github.io/grid-vs-flexbox/ CSS Grid vs Flexbox appbrewery.github.io

display: flex 를 사용하면 같은 축에있는 아이템들에 한해 반응형 CSS를 적용시켜줄 수 있습니다. 하지만 여러 가변적인 크기를 가진 요소들이 복합적으로 조합되어 보여져야 될 경우에는 일반적으로 grid CSS옵션을 사용합니다. 이런식으로 복합적인 형태의 레이아웃들로 구성되야 한다면 grid를 사용하는 것이 좋습니다. Flex 와 Grid의 차이점 Flex 1차원적인 선을 따라 컨텐츠들을 정렬하는 도구라고 볼 수 있습니다. 보편적인 수평 flex 형식은 아이템들을 배치하고 페이지에서 어떻게 정렬할지 정의하는 데에 아주 쉽게 사용할 수 있습니다. Grid 2차원적인 형태로 컨텐츠들을 레이아웃 하는 도구라고 볼 수 있습니다. 위의 이미지처럼 오른쪽 사이드에 바를 추가할 수도 있듯이 여러 형태의 2차..