Flexbox와 Grid

Flexbox와 Grid

리엑트 컴포넌트들을 배치하기 위해 가장 편하고, 직관적인 방법이라고 생각했습니다.

Flexbox

플렉스 박스의 구조는 기본적으로 다음과 같습니다.

<div class="flex container" display="flex">
  <div class="item1"/>
  <div class="item2"/>
  ...
</div>

플렉스 박스 컨테이너 안에 플렉스 박스 요소들이 있는 구조이고, 플렉스 박스 안에 있는 요소들의 위치를 원하는 대로 배치하는 것이 핵심기능입니다.
요소들을 배치하는 방법은 크게 두가지 입니다.

1. 플렉스 박스 컨테이너 조작: 이 방법은 요소들을 한꺼번에 다루는 방법입니다.
2. 플렉스 박스 컨테이너 안의 요소를 조작: 이 방법은 요소 하나하나를 개별적으로 조작하는 방법입니다. 플렉스 박스 조작방법은 귀여운 개구리 게임으로 재밌게 익힐 수 있습니다. https://flexboxfroggy.com/#ko

Grid

그리드는 플렉스 박스와 마찬가지로 그리드 컨테이너 안에 그리드 아이템들이 있는 구조입니다.

<div class="grid container" display="grid">
  <div class="item1"/>
  <div class="item2"/>
  ...
</div>

또한 플렉스 박스와 마찬가지로 조작 방법이 컨테이너와 각 요소들을 조작하는 두 가지 방법이 있습니다.
메인축 또는 수직인 축을 기준으로 1차원적인 정렬을 하는 플렉스 박스와는 달리, 그리드는 row와 column이라는 가상의 공간을 grid-template-rows와 grid-template-columns를 통해 설정하고 각각의 공간에 원하는 컴포넌트를 넣을 수 있습니다. 이외에도 간격과 각각의 셀에 대한 커스터마이징이 가능합니다.