Web Layout (flex와 grid)

웹 사이트의 이용이 활발해지고, 기기가 다양해지는 만큼 기기에 따른 화면의 크기도 다양하게 변화해 왔다.

다양한 기기에 대응하기 위해 웹 서비스를 유연하게 만드는 것은 선택이 아닌 필수가 되었고, 이러한 유연한 대응을 할 수 있게 도와준 것이 flex와 grid라는 CSS 속성들이다.

 

❓ Flex ❓

1차원적인 부분만을 고려하여, 수평과 수직 영역 중 하나의 방향으로만 설정이 가능하다.

 

Flex를 이용한 정렬을 이해하기 위해서는 가장 쉬운 예시로 "꼬치"를 생각해볼 수 있다.

꼬치 축의 방향대로 가로 정렬을 하거나, 꼬치를 뜯어먹는 방향인 세로 방향으로 정렬이 가능한 것을 생각하면 Flex에 대한 이해가 높아질 것이다.

 

Flex는 Flex Container 안에 있는 flex item들의 크기와 간격을 자동으로 조절해주기에 중앙 정렬이나 균등하게 설정하기 좋아, 반응형 웹 디자인에 적합하며, 단순 레이아웃을 구성할 때 주로 사용하게 된다.

 

Flex의 가장 큰 특징이라고 한다면, 방향을 설정한다는 것이다.

Flex Container에 방향을 설정하고, 그 안에 flex item을 동일한 방향을 기준으로 적은 코드를 사용해서 간결하게 설정이 가능하다.

 

이 Flex에 대해서 조금이라도 공부를 해보고자 했던 사람이라면 아래와 같은 사이트들을 많이 접해봤을 것이다.

 

https://studiomeal.com/archives/197

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

 

처음 CSS를 공부해본 사람이라면 이해가 어려울 수 있지만, flex를 익히는 순간 어떠한 Container 속에 정렬이 필요한 item들을 정렬하고자 할 때 flex를 가장 유용하게 사용할 것이다.

 

이러한 CSS는 무엇보다도 직접 코드를 쳐보고 눈으로 변화를 확인하면서 익혀야 빠르다.

아래 사이트에서 직접 코드를 쳐서, 개구리들의 움직임을 눈으로 확인하며 Flex에 대한 이해를 높혀갈 수 있다.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

Flex 예시

 

Flex를 공부하고나면 위에 사진처럼 이제 점점 눈에 보이게 된다. 어느 것이 Flex container이고, 어느 게 item이고 어떤 방식으로 정렬이 되어 있는지.

 

그렇다면 이제 Flex 말고도 Grid라는 속성은 어떤 속성인지 알아볼 필요가 있다.

 

❓ Grid ❓

2차원적인 부분도 고려하여, 수평과 수직에 관계없이 동시에 레이아웃을 나눌 수 있다.

 

위에서 Flex는 "꼬치"에 비유를 했다면, Grid는 "신문"에 비유할 수 있다.

신문을 보면 각 부분처럼 공간이 나누어져 있는 걸 볼 수 있는데, 이런 공간을 나누는 데 사용하는 거라고 생각하면 된다.

 

카드 형식으로 되어 있는 신문 형식의 레이아웃을 쉽게 만들 수 있고, 각 카드 간의 여백을 쉽게 조절 가능하다.

 

Flex는 행 또는 열이라면 Grid는 행과 열로 이루어진 격자 모양의 레이아웃이라고 할 수 있다.

 

위에서 Flex는 간격과 크기들을 자동적으로 조절한다고 했는데, Grid는 px 단위, fr 단위, repeat() 함수 등을 사용으로 정확하게 값을 지정하여 레이아웃 구성이 가능하고, 각 아이템들의 크기도 설정 가능하다.

 

여기서 fr 단위란, fraction의 줄임말로 '분수'라는 뜻을 가지며, 이 단위를 사용하면 Grid 내부의 레이아웃 분할을 자동으로 계산해서 적용 가능하다.

 

이 밖에도 Flex와 다른 점이라면, 방향을 설정하지 않는다는 것이다. 그렇기에 Flex보다 어렵고 복잡한 레이아웃을 작성하는데 매우 적합하다.

 

Grid 예시

 

위에 사진에서 보이는 것처럼 헤더, 사이드바, 컨테이너, 푸터 등으로 이루어진 일반적인 웹 페이지의 전체적인 레이아웃을 짤 때 매우 유용한 속성이다. 

 

https://studiomeal.com/archives/533

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

 

Grid도 Flex와 마찬가지로 너무 잘 설명 되어 있고, 직접 눈으로 변화를 확인할 수 있다.

Flex보다는 더 복잡하여 이해하는 데 시간이 걸릴 수 있다. 하지만 Flex와 마찬가지로 이해하고 나면 레이아웃을 구성할 때 매우 유용하게 사용할 수 있는 속성이다.

 

https://cssgridgarden.com/#ko

Grid Garden

 

Flex처럼 Grid도 공부하기에 유용한 사이트가 있다. 개인적으로 Grid에 대해서 이전에는 flex가 있는데 Grid를 굳이 쓸까? 하는 생각이 있었지만, 굳이 써야만 한다는 것을 깨닫게 되었다.

 

Grid에서 레이아웃을 구성하는 거 외에도 유용하게 사용되는 Gap이라는 속성이 존재하는데, 이 gap하고 margin의 차이가 조금 궁금해졌다.

 

💡 gap과 margin의 차이 💡

Grid와 margin을 알기 전이라면 요소들간의 공백을 대부분 padding이나 margin으로 띄우려고 하는 경우가 많다.

하지만 모든 요소들의 여백을 margin과 padding으로 처리하기 위해선 한계가 있다. 200px 이상 떨어져 있는 경우, 정말 정말 낭비이다.

 

둘의 차이는 다음과 같다.

 

margin

margin은 인접한 요소의 존재와 상관없이 스타일이 적용되어, 불필요한 공간을 만든다.

 

gap

gap은 인접한 요소가 있을 때만 공간을 만들어 불필요한 공간을 만들지 않는다.

 

 

하나의 도메인에서 여러 개의 페이지를 만들다 보면, 최적화하는 것이 중요한 것은 없다. 그렇기에 이러한 하나하나의 불필요한 요소들을 줄이는 것이 중요하다. 또한 마진 상쇄와 같은 현상이 일어날 수 있기에 margin보다는 gap을 사용하는 것이 좋다.

 

이 마진 상쇄에 대해서도 나중에 더 찾아보도록 해야겠다.