웹사이트를 디자인하면서 가장 기본적이면서도 중요한 요소 중 하나는 레이아웃입니다. 웹 페이지의 레이아웃은 사용자의 첫 인상을 결정짓고 정보의 흐름을 제어하며 사용자 경험(UX)을 크게 좌우합니다. 이런 중요한 레이아웃을 효과적으로 구성하기 위한 도구 중 하나가 CSS Flexbox입니다. 이 글에서는 Flexbox의 등장 배경과 기본개념 및 주의점 그리고 장점과 단점에 대해서 알아보겠습니다.
Flexbox의 등장 배경
HTML과 CSS가 처음 개발되었을 때, 웹사이트는 주로 문서 중심적이었습니다. 따라서 레이아웃 도구들은 문서의 선형적인 흐름을 중심으로 설계되었습니다. 그러나 웹이 발전하면서 웹사이트는 더욱 복잡하고 동적인 형태를 취하게 되면서 레이아웃 도구들의 한계가 드러나기 시작했습니다. 이런 상황에서 CSS3에서 도입된 Flexbox는 레이아웃 구성의 어려움에 많은 해결책이 되었습니다.
Flexbox의 기본 개념
Flexbox는 CSS3에서 도입된 레이아웃 모델로 컨테이너 내의 아이템들을 유연하게 배치할 수 있게 해줍니다.
Flexbox를 이해하는 데 가장 중요한 개념은 다음과 같습니다.
- Flex 컨테이너: Flexbox 레이아웃을 적용할 부모 요소를 의미합니다. Flex 컨테이너에 display: flex; 또는 display: inline-flex;를 적용하면, 그 안의 모든 자식 요소들은 자동으로 Flex 아이템이 됩니다.
- Flex 아이템: Flex 컨테이너의 자식 요소들을 의미합니다. Flex 아이템들은 Flex 컨테이너의 방향, 정렬, 순서 등에 따라 유연하게 배치됩니다.
- 주 축(Main Axis)과 교차 축(Cross Axis): Flex 아이템들이 배치되는 방향을 결정하는 축입니다. 주 축은 flex-direction 속성에 따라 결정되며, 교차 축은 주 축에 수직입니다.
Flexbox의 주요 속성들
Flexbox의 레이아웃은 주로 Flex 컨테이너와 Flex 아이템에 적용되는 속성들로 구성됩니다. 이들 속성을 이해하면, Flexbox를 통해 다양한 레이아웃을 구성할 수 있습니다.
Flex 컨테이너에 적용되는 주요 속성들은 다음과 같습니다.
Flex 컨테이너 속성: flex-direction, flex-wrap, justify-content, align-items, align-content flex-direction: Flex 아이템들이 배치되는 주 축을 설정합니다. row (기본값), row-reverse, column, column-reverse 중 하나를 설정할 수 있습니다.
- flex-wrap: Flex 아이템들이 여러 줄로 나눠질지, 아니면 한 줄에 모두 배치 될지를 설정합니다. nowrap (기본값), wrap, wrap-reverse 중 하나를 설정할 수 있습니다.
- justify-content: 주 축을 따라 Flex 아이템들을 어떻게 정렬할지를 설정합니다. flex-start (기본값), flex-end, center, space-between, space-around 중 하나를 설정할 수 있습니다.
- align-items: 교차 축을 따라 Flex 아이템들을 어떻게 정렬할지를 설정합니다. stretch (기본값), flex-start, flex-end, center, baseline 중 하나를 설정할 수 있습니다.
- align-content: 여러 줄의 Flex 아이템들을 교차 축을 따라 어떻게 정렬할지를 설정합니다. 이 속성은 flex-wrap이 nowrap이 아닐 때만 적용됩니다.
Flex 아이템에 적용되는 주요 속성들은 다음과 같습니다.
Flex 아이템 속성: order, flex-grow, flex-shrink, flex-basis, align-self order: Flex 아이템의 배치 순서를 설정합니다. 기본값은 0입니다.
- flex-grow: Flex 아이템의 증가 비율을 설정합니다. 기본값은 0입니다.
- flex-shrink: Flex 아이템의 감소 비율을 설정합니다. 기본값은 1입니다.
- flex-basis: Flex 아이템의 기본 크기를 설정합니다. 기본값은 auto입니다.
- align-self: Flex 아이템의 교차 축 정렬 방식을 설정합니다. 이 속성은 align-items를 무시하고 개별 아이템에만 적용됩니다.
결론
Flexbox는 많은 장점을 가지고 있지만 동시에 주의해야 할 점들도 있습니다. Flexbox의 장점으로는 유연성, 브라우저 창의 크기에 따라 자동으로 아이템들이 재배치 되는 반응형 레이아웃 구성의 용이성, 수직 중앙 정렬의 간편함 등이 있습니다. 반면, 단점으로는 IE10 이하 버전 등 일부 오래된 브라우저에서의 지원 문제, 복잡한 그리드 레이아웃 구성의 어려움 등이 있지만 이런 것들을 고려하여 잘 조합해서 사용하면 페이지 레이아웃을 구성하는 부분에 있어서의 어려움을 크게 해결 할 수 있을 것입니다.