Flexbox와 Grid
Flexbox와 Grid
리엑트 컴포넌트들을 배치하기 위해 가장 편하고, 직관적인 방법이라고 생각했습니다.
Flexbox
플렉스 박스의 구조는 기본적으로 다음과 같습니다.
<div class="flex container" display="flex">
<div class="item1"/>
<div class="item2"/>
...
</div>
플렉스 박스 컨테이너 안에 플렉스 박스 요소들이 있는 구조이고, 플렉스 박스 안에 있는 요소들의 위치를 원하는 대로 배치하는 것이 핵심기능입니다.
요소들을 배치하는 방법은 크게 두가지 입니다.
- 플렉스 박스 컨테이너 조작: 이 방법은 요소들을 한꺼번에 다루는 방법입니다.
- 플렉스 박스 컨테이너 안의 요소를 조작: 이 방법은 요소 하나하나를 개별적으로 조작하는 방법입니다. 플렉스 박스 조작방법은 귀여운 개구리 게임으로 재밌게 익힐 수 있습니다. 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
를 통해 설정하고 각각의 공간에 원하는 컴포넌트를 넣을 수 있습니다. 이외에도 간격과 각각의 셀에 대한 커스터마이징이 가능합니다.
Author And Source
이 문제에 관하여(Flexbox와 Grid), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cramming/Flexbox와-Grid저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)