방망이 깎는 코모
Flex와 Grid의 차이점 본문
Flex / Flexbox와 Grid 개념
Flex 또는 Flexbox
1차원 레이아웃을 위해 설계된 CSS 레이아웃 시스템이다. 한 번에 하나의 차원(행 또는 열)에서 아이템을 배치하는데 최적화되어 있으며, 정렬이나 공간 분배를 할 때 용이하다.
Grid
2차원 레이아웃을 위해 설계된 CSS 레이아웃 시스템으로, 한 번에 2개의 차원(행과 열)을 동시에 다룰 수 있다.
Flex와 Grid 비교
단일 차원에 대한 레이아웃에 효과적인 Flexbox는 주로 단순한 아이템 배열에 유용하다. 반면 Grid는 행과 열, 2차원의 레이아웃을 동시에 제어할 수 있기 때문에 픽셀 단위로 정확하고 복잡한 레이아웃을 구현할 수 있다. 아래 이미지는 CSS Grid 연습을 위해 만들었던 예제 중 하나다. 개인적으로 이만큼 '그리드-스러운' 매거진 스타일의 레이아웃이 아니라면, 익숙한 flex로 작업을 선호했다. 하지만 '반응형 디자인'에 대해 고민하기 시작하면서, fr단위와 미디어쿼리를 함께 사용함으로써 Grid를 사용했을 때 보다 사용자에게 더 유연하고 인상적인 페이지를 만들어 줄 수 있다는 것을 알게 되었다.
브라우저와의 호환성
그렇다고 Grid가 이점만 있는 것은 아니다. 비교적 새로운 기능인 Grid는 대부분의 현대 브라우저에서는 지원이 되지만 오래된 브라우저에서는 지원되지 않을 수 있다. 이러한 브라우저 호환성 문제로 flex를 사용해야만 하는 경우도 존재한다. 심지어 flex조차 지원하지 않는 구형 브라우저도 존재한다.
그래서 Flex와 Grid 중 어떤 것을 써야 할까?
결론부터 말하지만 '둘 다' 써야 한다. 브라우저 호환성 뿐만 아니라 Flex와 Grid는 함께 사용하여 웹 레이아웃을 설계할 경우, 보다 복잡하고 세밀한 웹 페이지/인터페이스등을 실현할 수 있다.
Flex와 Grid는 마치 근육과 골격의 관계와 같다. Grid는 건물의 골격처럼 전체적인 구조와 틀을 제공하고, Flex는 근육처럼 그 안의 요소들을 움직이고 조절하는 유연성을 제공한다. 따라서 함께 적절히 사용할 경우 견고하면서 동시에 유연한 웹 레이아웃을 구현할 수 있는 것이다.
마치며
다양한 미니 프로젝트를 하면서 Flexbox와 Grid의 사용법은 손에 익혔다. 다만 fr, em, rem과 같은 상대단위와 미디어쿼리를 이용한 반응형 디자인 구현은 아직 많이 낯설다. 데이터를 추가/삭제함에 따라 구조가 예상하지 못했던 방식으로 변경되어서 난감한 경우도 많다. 해당 부분은 추가로 연습해보면서 익숙해지도록 노력해야겠다.
참고 문헌
1. Cecilia Benitez, Flexbox VS CSS Grid : https://cecibenitezca.medium.com/flexbox-vs-css-grid-3f4ffabbb8e3
'개념정리' 카테고리의 다른 글
| 자바스크립트 Class를 활용한 모듈화 기법 (0) | 2024.01.04 |
|---|---|
| noreferrer, noopener, nofollow (1) | 2024.01.03 |
| 반응형 디자인 / 미디어 쿼리를 최소로 잡는 방법 (2) | 2023.12.28 |
| 애니메이션을 최적화 하는 방법 (2) | 2023.12.27 |
| 폰트를 Preoload하는 방법 (0) | 2023.12.25 |
