CSS Flexbox를 활용한 반응형 레이아웃 만들기

웹 개발의 세계에서 반응형 디자인은 필수적입니다. 오늘은 CSS Flexbox를 사용하여 간단하면서도 효과적인 반응형 레이아웃을 만드는 방법을 배워보겠습니다. Flexbox는 웹 페이지의 요소들을 유연하게 배치할 수 있게 해주는 강력한 도구입니다. 복잡한 코드 없이도 멋진 레이아웃을 만들 수 있죠.

Flexbox 기본

Flexbox를 사용하기 전에, 우리는 먼저 컨테이너에 display: flex; 속성을 적용해야 합니다. 이것은 해당 컨테이너의 자식 요소들이 Flexbox의 규칙을 따르게 만듭니다.

.container {
  display: flex;
}

주 축과 교차 축

Flexbox에서는 두 가지 주요 축이 있습니다: 주 축(main axis)과 교차 축(cross axis). 주 축은 Flex 항목들이 놓이는 방향을 결정하고, 교차 축은 주 축에 수직인 방향입니다. flex-direction 속성을 사용하여 이를 설정할 수 있습니다.

.container {
  display: flex;
  flex-direction: row; /* 기본값. 항목들이 수평 방향으로 놓임 */
}

반응형 레이아웃 만들기

이제 Flexbox를 사용하여 간단한 반응형 레이아웃을 만들어보겠습니다. 우리의 목표는 화면 크기에 따라 항목들이 자동으로 조정되도록 하는 것입니다.

.container {
  display: flex;
  flex-wrap: wrap; /* 화면이 작아지면 항목들이 다음 줄로 넘어감 */
}

.item {
  flex: 1 1 200px; /* 항목이 확장 및 축소되며, 기본 크기는 200px */
}

이 코드는 컨테이너 내의 항목들이 화면 크기에 따라 유연하게 조정되도록 합니다. flex-wrap: wrap; 속성은 항목들이 충분한 공간이 없을 때 다음 줄로 넘어가게 해줍니다. flex: 1 1 200px;는 항목이 확장 및 축소될 수 있음을 의미하며, 기본 크기는 200px입니다.

마무리

CSS Flexbox를 사용하면 복잡한 계산 없이도 멋진 반응형 레이아웃을 쉽게 만들 수 있습니다. 오늘 배운 내용을 활용하여 다양한 프로젝트에 적용해보세요. 웹 개발에 있어서 Flexbox는 매우 유용한 도구이며, 이를 통해 사용자 경험을 크게 향상시킬 수 있습니다.