<번역> Flexbox and CSS Grid ???

keonhee Lee·2022년 6월 29일

Flexbox and CSS Grid ???

회사가 가지고있는 컨텐츠 를 나타내는 방법이 당신 또는 그 회사 에 대해 많은 것을 말해줄수 있습니다.

좋은 컨텐츠를 가지고 있으면서, 적합하고 정돈된 방법으로 사용자가 이해할 수 있도록 나타낼 줄 아는것은 매우 중요합니다.

그래서, 우리는 어떻게 컨텐츠를 어떠한 방식으로 보여줄지 선택할까요 ?

우리는 CSS 를 통해서 아름답고, 멋진 방식으로 컨텐츠를 보여줄 보여줄 수 있는 책임을 다 할 수 있을 것 입니다.

CSS 는 항상 그래왔듯이 웹 개발에서 가장 중요한 부분을 담당하고 있고, 브라우저의 시작점 (beginning) 에서 부터 CSS 를 통한 작업의 새로운 방법을 만들고, 개선해왔습니다. 몇 년 전까지만 해도 , float 이나 position, inline-block 와 같은 CSS 프로퍼티 만을 이용한 웹 페이지의 레이아웃을 만드는것은 아주 어려운 일 이었습니다.

이제, 우리는 더 이상 위와 같은 프로퍼티들에 의존하지 않고, 우리의 웹 페이지를 만들수 있고, 현재는 웹페이지에서 다른 경험들( 서비스 이용 시 의 경험 이라고 해석)을 구현하는 것이 더욱 간단해 졌습니다.

현재까지의 웹의 발전에서 중요시 되는 두가지 CSS layout system ( Flexbox, CSS grid ) 있습니다.

프로젝트 구상을 할때 어느 layout system이 나의 프로젝트에 적합 할까 를 이른 시기에 고민 하는것은 더 좋은 결과를 성취하고 CSS 작성을 잘 하기 위해 큰 도움을 줄 수 있습니다.

이 포스트에서는 언제 Flexbox 와 CSS Grid 를 적합하게 사용할지에 대해 알아볼 텐데, 아주 대답하기 어려운 질문은 아니지만, 미래에 유지보수/ 리팩토링 측면에서 비용이 절감될 수 있을 것 입니다.

시작하기에 앞서, 먼저 목적과, 실제로 어떻게 작용하는지 이해하는것이 필요합니다.

Flexbox

**Flexbox 는 **반응형 웹 페이지의 구현과 엘리먼트들의 배치에 도움을 줄 목표로 2009 년에 새로운 layout system 으로 소개되었고, 이후 점점 더 많은 관심을 받게 되었습니다.

결과론적으로 는 현재 모던 웹 페이지의 주된 layout system 으로 자리잡게 되었습니다.

Flexbox 1 차원 layout system으로 row axis 와 column axis 을 구현하는데 사용할 수 있습니다.

flexbox는 CSS 를 작성하는데 많은 양의 ( float , position ) properties 와 잡다한 요령( tricky hacks) 없이도 반응형 웹페이지를 디자인하고 구현하는데 비용적인 측면에서 이점을 줄 수 있습니다.

Flexbox의 사용을 시작하면서, 필요한 것이라고는 flex container 에 display : flex 프로퍼티 를 선언 해주기만 하면 됩니다.

이로, flex container 안에 속해 있는 모든 엘들은먼들은 flex-item 이 됩니다.

flex container 안의 flex-item 들이 취하는 main direction 은 row(행) 이 됩니다.

flex-direction: column 프로퍼티를 flex container에 부여 해 줌으로 flex-item 들이 나열되는 방향을 쉽게 column(열) 로 바꾸어 줄 수 있습니다.

Flexbox의 다양한 프로퍼티들 을 사용함으로 우리는 굉장한 것들을 만들수 있습니다.

엘리먼트들을 원하는 순서대로 배치할 수 있고, 엘리먼트 들을 역순으로 배치할 수도, 그리고 엘리먼트들이 늘어나야 하는지 줄어들어야 하는지를 결정 할 수도 있습니다. etc ...

예를 들어서는, 같은 너비와 높이를 가지는 세개의 자식 엘리먼트들을 가지는 div 가 있다고 생각해보자

<div id="container">
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
</div>

CSS 에서 우리는 엘리먼트들 의 순서를 지정하고, 나열하는데 Flexbox를 쓴다 :

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

#one,
#two, 
#three {
  width: 200px;
  height: 100%;
  background: red;
}

order 프로퍼티들 이용함으로써, 우리는 쉽게 엘리먼트들의 순서를 역순으로 배치할수 있습니다.

#two 라는 id 를 가진 엘리먼트의 순서를 변경하고 싶다면 이렇게 할 수 있을것이다 :

#two {
  order: 3;
}

이제 이 엘리먼트는 flex container에서 마지막 엘리먼트가 되었습니다.

이러한 것들은 아주 유용하게 flexbox 가 소개해주는 몇가지의 특징들로 엘리먼트들의 스타일을 바꾸거나, 나열하는데 매우 용이합니다.

이제 우리는 Flexbox 가 1차원 layout system 이란것을 알게 되었고,

짧게 어떻게 CSS grid 가 작용하는지 그리고 이 두 layout system 이 차이점을 알아봅시다.

CSS Grid

Flexbox가 1차원 시스템 이기에 강력한 layout system 이라면 ( rows 와 columns 을 작업(조정)할 수 있음을 의미한다) CSS Grid 는 현재 현존하는 가장 강력한 layout system 이라고 고려될수 있다.

CSS Grid 는 2 차원 layout system 인데 , rows(행) 과 columns(열) 을 같이 조정할수 있습니다. 즉, 우리가 과거로 돌아가 사용했던 잡다한 요령들을 부리지 않으면서도 더욱 복잡하고 정돈된 디자인 시스템을 구현(build) 할 수 있는 가능성을 열어준다고 할 수 있습니다.

grid container를 정의 하기 위해선 block element 에 display : grid 프로퍼티를 선언해주기만 하면 됩니다.

Grid가 생겼으니 이제 원하는 만큼의 rows(행) 와 columns(열) 들을 정의해주면 좋을 것 입니다.

rows 를 만들기 위해서 grid-template-rows 프로퍼티를 선언해주고, 아래와 같이 원하는만큼의 값을 입력해주면 된다.

grid-template-rows: 200px 200px;

columns를 만드는방법도 크게 다를것은 없는데, grid-template-colums 프로퍼티를 선언해 주면 됩니다.

grid-template-columns: 200px 200px;

그러나, 당신이 이미 이 두가지 (flexbox, CSS Grid) layout ststems들의 사용법을 알고 있다면,

‘그런데 어떤상황에 어떤 layout system 을 써야되는거야 ?‘ 라는 고민을 가졌을 텐데, 이게 우리가 이제 알아볼 것들 입니다.

이제 flexbox 와 CSS Grid 가 어떻게 쓰여지는지 큰 틀은 알게 되었고, 최선의 사용법 (best use case) 와 차이점에 대해 깊게 알아볼까 합니다.

CSS grid is for layout, Flexbox is for alignment

( CSS grid 는 레이아웃, Flexbox 는 배치를 할때 )

Flexbox 가 세상에 소개되었을 때로 돌아가보자, 우린 웹페이지 구현을 위한 최적의 layout system은 flexbox 일 것 이라고 생각했었지만, 그러지 않았습니다.

Flexbox 는 단연 개발자들이 더 유지보수 가능한, 반응형인 웹페이지를 구현할 수 있도록 도움을 주었지만,

더 복잡한 layout design 의 구현을 필요로 할 때 1차원 layout system가 가지는 특징(main idea)는 이에 상응되지 않았습니다.

이러한 상황에 CSS Grid 는 rows, columns 두가지를 모두 조정 하면서, 2차원 적인 더 복잡한 layout desgin 의 구현에 더욱 도움이 되었습니다.

우리는 두 가지 (flexbox, CSS Grid) 를 사용 목적에 맞는 차이점을 두면서 같이 사용하는것이 좋을것 입니다.

Layout을 위해서라면, CSS Grid를 elements 들의 배치(alignment) 를 위해서라면 Flexbox 를 사용하는것이 적합할 것 입니다.

이 두 가지 (flexbox, CSS Grid) 를 적재적소에 사용하기 위해서는 CSS Grid 와 Flexbox 의 기초적인 사용법을 알고 있어야 좋을것입니다.

어플리케이션의 엘리먼트들의 배치를 위해서라면 Flexbox를 사용하게 될 것이니까.

이러할 때 Flexbox 의 사용을 고려해보자 :

small design 을 구현할때 : 몇개의(few) rows 와 columns 을 가지고 있는 small layout design 을 구현할때에는 Flexbox 가 이상적일 것 입니다.
엘리먼트들을 배치할때 : 이러한 상황에는 Flexbox 를 사용하는것이 완벽할 것입니다. 우리가 해야할 것이라고는 display:flex 속성을 flex container 에 선언 해 주고, 우리가 원하는 flex-direction을 정의해주면 됩니다.
Content-first design 이 필요할때 : 웹페이지 구현을 하면서 정확히 content 가 어떻게 보일지 모르겠거나, content 들이 적합하게 들어맞기를 원할때는 Flexbox 가 가장 이상적일 것 입니다.

이러한 경우에는 CSS Grid 가 더욱 적합할수 있다 :

Complex한 design 을 구현할 때 : 종종의 Use cases 들에서 복잡한 디자인을 구현해야 할 때가 있는데, 이때 CSS Grid 가 진가를 발휘 합니다. 이 2차원 layout system은 복잡한 디자인을 구현하거나, 웹페이지의 유지/보수 측면에서 볼 때는 가장 유리하게 사용되며, 가장 적합하다고 볼수 있습니다.
Block 엘리먼트 사이에 빈 공간(gap)을 주고 싶을때 : Flebox가 가지고 있지 않는 CSS Grid 의 장점은, gap 프로퍼티 입니다. gap 프로퍼티를 정의해 줌으로 써, braekpoint 와 같은 작업을 할때 몇가지 부작용들을 초래할 수 있는 margin 프로퍼티를 사용하지 않고도, 매우 쉽게 rows 와 columns 사이에 빈 공간을 부여 해 줄 수 있습니다.
엘리먼트들을 겹칠(overlap) 때 : 쉽게 grid-column 과 grid-rows 프로퍼티를 사용해 엘리먼트들을 겹치게 할수 있습니다. 반면에, Flexbox는 margin , tansforms 또는 absolute 와 같은 속성들을 동시에 사용해줘야 합니다.
Layout-first design 을 구현할 때 : 이미 layout design 구조를 가지고 있고, rows 와 colums 를 조정 가능하고, 엘리먼트들의 포지션을 우리가 원하는 대로 변경할수 있을때, CSS Grid 와 이차원 layout 시스템을 통해 구현하는것이 더 쉬울 것 입니다.

CSS Grid 와 Flexbox 중 어떤 것을 사용할까 고민하고 있다면, 잊지말자

CSS grid is for layout, Flexbox is for alignment

여기 CSS Grid의 사용에 적한한 예시 한가지가 있는데, 간단한 어플리케이션을 구현한다고 상상해보자.

아직 손을대지 않은 ( barebones ) 어플리케이션은 이렇게 보일것이다.

header , aside menu , main block content, 그리고 footer 로 구성되어있는 layout이 있다.

이러한 layout 구성을 위해서는 엘리먼트들을 만들어 주기만 하면 된다.

<div id="container">
  <header>Header</header>
  <aside>Aside</aside>
  <main>Main</main>
  <footer>Footer</footer>
</div>

그리고 아래와 같이 display : grid 프로퍼티를 이용해 rows 와 columns 를 만들어주자 :

#container {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-template-rows: 80px 600px 80px;
  grid-template-columns: 0.5fr 1fr;
}

header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
}

aside {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: pink;
}

footer {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  background: yellow;
}

그렇다, float 이나 position 프로퍼티로 엘리먼트에 조정을 주지 않고, 많은 양의 flex containers 없이도 우리는 30줄 의 CSS 코드만으로 간단한 디자인을 구현할 수 있다.

멋지고(decent) 잘 구현된 웹 어플리케이션을 만들기 위해서 가장 현명한 결정은 두 가지 (Flexbox, CSS Grid) layout system 모두를 사용하는 것이다.

예로 든 것과 같은 강점을 보여주기 위해 두 가지 layout system을 모두 사용해 보자.

header 안에 세 div 를 만들어주고 row 방향으로 나열해 보자.

header 에 display :flex 프로퍼티를 선언해 주고, flex-direction : row 프로퍼티로 flex-items 를

row의 방향으로 나열할 수 있다.

 header {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: blue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 10px;
}

layout을 위한 CSS Grid , alignment 를 위한 Flexbox 의 사용으로 더 powerful한 웹 페이지가 되었다.

2 차원 layout system 이기 때문에, 주된 layout style로 CSS Grid 를 사용할 수 있으며, rows 와 colums 모두를 쉽게 조정할수 있다. 그리고 Flexbox, 1차원 layout system 의 사용으로, 더 간결한 layout style 과 rows 의 조정에 더욱 용이합니다.