Flex를 사용하면 적합한 레이아웃, Grid를 사용하면 적합한 레이아웃 Flexbox는 "Flexible Box"의 줄임말로, 웹 페이지의 요소들이 뷰포트의 크기에 따라 유연하게 크기와 위치를 조절하는 데 매우 유용합니다. Flexbox는 주로 1차원 레이아웃에 적합합니다. 즉, 행이나 열을 주 축으로 사용하여 요소들을 배치하는 데 이상적입니다. Flexbox를 사용하면 좋은 경우 - 1. 뷰포트에 따라 동적으로 크기와 순서가 변하는 요소들을 다룰 때 2. 요소들을 수평이나 수직으로 정렬하려 할 때 3. 여러 개의 요소를 동일한 공간에 넣고 싶을 때 (예: 네비게이션 바, 푸터) Grid는 웹 페이지의 요소들을 2차원 (행과 열)으로 배치할 수 있습니다. Grid는 복잡한 레이아웃을 만들 때 특히 유용..
Grid
명시적 속성 열(column)의 배치 : grid-template-columns : 1fr 1fr 1fr; 행(row)의 배치 : grid-template-rows : repeat(3, 1fr); - fr은 fraction(분수, 비율)의 약자로 숫자의 비율대로 트랙의 크기가 나눠진다. 1:1:1 비율인 3개의 column을 만든다. - repeat 함수 repeat(반복횟수, 반복값)을 의미한다. repeat(3, 1fr 4fr 2fr); 이런 식의 패턴도 가능하다. - minmax 함수 minmax(100px, 1fr); 의 의미는 최소한 100px, 최대는 1fr까지 늘어난다. - auto-fill, auto-fit repeat(auto-fill, minmax(20%, auto)); auto-fil..
