[css layout]Flexbox와 Grid 어떤 레이아웃을 사용할까?

 

0. 들어가며...

 

CSS 의 Flexbox와 grid는

웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서)

비교적 최신 기술이다. 

(flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.)

 

flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로

둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고,

이에 대해서는 정답은 없다고 생각한다.

 

 

혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면,

제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다.

(내가 도움을 많이 받은 사이트이다.)

 

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

---

 

1. flexbox와 grid 무엇을 사용할까?

 

 

<기술의 등장>

 

• flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다.
• grid layout은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있다.

위 두 문장은 MDN에 써있는 글을 그대로 가져온 것이다. 

 

flexbox, grid layout을 포함해서, 모든 기술은 도입되기 전에 어떠한 필요성에 의해  아이디어가 생기고 그런 아이디어들을 시도해보고, 보완함으로써 많은 사람들이 사용하게 되고, 그렇게 많은 사람들(개발자들)이 사용하게 되면, 흔히 말하는 표준기술이란 것이 된다고 생각한다. 

 

현재 글을쓰는 시점인 2023년 5월 17일에는 이미 flex와 grid를 이용해 만든 웹 사이트들은 쉽게 볼 수 있다. 

 

위와같이 글을 구성한 이유는
모든 기술에 등장한 이유가 있다면(이 글을 읽는 당신도 동의한다면),
그 이유에 맞게 기술을 이용하면 더 알맞게? 유용하게 사용할 수 있지 않을까? 라는 생각이 들었기 때문이다.

 

 

 

둘을 한눈에 비교할 수있게 표를 만들어 봤다.

기술이름	Flexbox	grid
방향	1차원(수평 또는 수직)	2차원 (수평 또는 수직)
레이아웃	컨테이너 또는 콘텐츠	컨테이너
사용성	유연하고 다양한 레이아웃을 만드는 데 사용	더 복잡한 레이아웃을 만드는데 적합 but, 사용하기 더 복잡할 수 있음.
지원	모든 주요 브라우저에서 지원	모든 주요 브라우저에서 지원

 

 

 

 

 

---

3. 나의 결론

 

 

 

flex로 만들던지, grid로 만들던지 방법만 다를뿐 어떠한 사이트도 만들 수 있다고 생각한다. 

 

 

 

사이트에 따라 다르겠지만, 예를들어 네이버로 예를들어, 위와같이 레이아웃을 생각해봤다. 

전체적인 레이아웃은 grid로 잡고( 빨간 네모 부분)
grid안의 item들은 flex로 배치해주면(보라 네모 부분)

기술이 등장한 이유에 맞게 잘 사용하는 것이지 않을까? 라는 말로 나만의 결론을 내려고한다. 

추가로, grid 안의 item이라도 grid로 배치하는것이 더 낫겟다라고 생각한다면, 그렇게 할 것 같다. (반대인 경우도)

 

 

---

 

마무리.

2023년 5월 17일 현재시점에서, flexbox와 grid는 프론트엔드 개발자라면 당연히 알아야만 하는 기술이라고 생각한다.

flexbox에 대해서는 나름 자신있게 쓸 수 있다고 생각하지만, grid 사용에 대해서는 아직 미숙하다.

일단 인지하고 있으니깐, 사용하도록 다짐해 보겠다.

 

 

 

---

<reference site>

 

https://yamoo9.gitbook.io/css-grid/css-grid-history

CSS Grid 기술 개발 이야기 - CSS Grid Layout Guidebook

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

https://d2.naver.com/helloworld/8540176