오늘의 질문
CSS FlexBox와 Grid의 차이점에 대해서 설명해주세요.
내 답변
레이아웃의 차이. Grid 의 경우 하나의 row 에 몇개를 넣을건지의 방식. flexbox 는 비율로 처리하는거로 이해함
제공된 답변
Flexbox 는 1차원 레이아웃
Grid는 2차원 레이아웃 속성
Flexbox 는 row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는데에 최적화 되어있음. 행이나 열 하나의 방향으로 정렬해야 할 때 유용하며, 복잡한 행과 열이 필요한 레이아웃에서는 한계가 존재.
Gird 는 행과 열을 모두 사용해 요소 배치가 가능.
사용목적의 차이
Flexbox 는 콘텐츠 중심으로 콘텐츠가 추가되거나 줄어들 때 유연하게 대처하기 좋음. 수평 혹은 수직 방향으로 콘텐츠를 정렬하고 간격을 조절하는 데 유용하며, 버튼 그룹, 내비게이션 바 등 한 줄의 콘텐츠가 주가 되는 구성에 적합
Grid는 레이아웃 중심으로 페이지를 구성하는 데 최적화. 카드레이아웃 갤러리 등과 같이 명확히 구분된 영역
기본 동작의 차이
Flexbox 에서는 주로 요소가 컨테이너의 크기나 위치에 맞춰 자동으로 정렬. justify-content와 align-items 속성을 사용해, 주 축 방향으로 요소들을 배치하고 여백을 조절할 수 있음.
Grid 의 경우 행과 열을 사전에 정의하고 그 격자에 요소를 배치. grid-template-rows, grid-template-columns와 같은 속성으로 행과 열의 크기를 정의하고, 각 요소의 위치를 세밀하게 설정 가능하다.
오늘 배운점
명확히 이해하고 있지 않은 Flexbox 에 대한점을 이해함. Grid 의 경우 자주 자주 사용해서 얼핏 이해했지만, 이렇게 명확히 설명하기는 쉽지않은듯. 해당 방식을 이용해 레이아웃을 배치해보는 실습도 진행해보자.
