지난 게시물에서는 flex box에 대해 알아봤는데요, flex box 역시 간편한 속성이지만 격자 무늬를 만들기 어려운 단점이 존재합니다 https://www.day-na.com/product/list.html?cate_no=60 이런 식으로의 게시판, 쇼핑몰을 꾸미기 어렵기 때문에 Grid 라는 속성을 사용하게 됩니다. 그렇다면 Grid의 기본 문법에 대해 알아보겠습니다~!! 목차 1. grid는 부모 컴포넌트에서만 선언해야한다. 2. grid-template 사용하기 3. gap 사용하기 4. auto란? 5. grid-template-areas 사용하기 6.grid-column/grid-row 사용하기 -span 사용하기 7.fr 사용하기 1. grid는 부모 컴포넌트에서만 선언해야한다. /* A..

(그냥 나 혼자서 보려고 정리한 거...) FlexBox는 css의 display 요소 중 하나이다. 이는 기존의 display 요소들이 가지는 단점을 보완하기 위해 생겼다! 그럼 먼저 display 속성에 들어가는 기존 요소에 대해 살펴보자 - block: 너비와 높이를 가지며 사진과 같이 margin이 존재하는 단점이 있다 ㅠㅠ 또한, element가 한 줄을 차지하여, 옆에 다른 element가 올 수 없어 아래로 배치된다. // App.js import "./App.css"; function App() { return ( ); } export default App; /* App.css */ .wrapper { display: block; height: 500px; width: 500px; back..