주니어 개발자를 위한 Flexbox 레이아웃 디자인 🎨

작성: 2025년 09월 03일읽기: 약 3분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 웹 페이지를 아름답게 디자인하는 데 필수적인 Flexbox 레이아웃에 대해 알아보겠습니다. Flexbox는 웹 개발에서 가장 유용한 CSS 기능 중 하나로, 요소들을 유연하게 배치할 수 있게 해줍니다. 복잡한 용어는 잠시 잊고, 실제 예제를 통해 Flexbox의 마법을 경험해 보겠습니다!

Flexbox의 기본

Flexbox 레이아웃은 주로 컨테이너 내의 아이템들을 수평 또는 수직으로 정렬할 때 사용됩니다. 이를 위해 먼저 컨테이너를 Flex 컨테이너로 지정해야 합니다.

.container {
  display: flex;
}

이 간단한 코드는 .container 안의 모든 아이템들을 수평선상에 나란히 배치합니다. 하지만 Flexbox의 진정한 힘은 옵션들을 조합할 때 발휘됩니다.

주축과 교차축

Flexbox에서는 두 가지 축이 있습니다: 주축(main axis)과 교차축(cross axis). 기본적으로 주축은 수평(왼쪽에서 오른쪽), 교차축은 수직(위에서 아래)입니다. 이 축들은 아이템들이 어떻게 정렬되는지 결정합니다.

정렬 옵션

justify-content

justify-content 속성은 주축을 따라 아이템들을 어떻게 정렬할지 결정합니다. 예를 들어, 아이템들을 컨테이너 중앙에 배치하고 싶다면 다음과 같이 설정합니다.

.container {
  display: flex;
  justify-content: center;
}

align-items

align-items 속성은 교차축을 따라 아이템들을 어떻게 정렬할지 결정합니다. 모든 아이템을 중앙에 정렬하고 싶다면 다음과 같이 설정합니다.

.container {
  display: flex;
  align-items: center;
}

flex-direction

flex-direction 속성은 주축의 방향을 결정합니다. 예를 들어, 아이템들을 수직으로 정렬하고 싶다면 다음과 같이 설정합니다.

.container {
  display: flex;
  flex-direction: column;
}

실제 예제

이제 간단한 Flexbox 레이아웃을 만들어 보겠습니다. 아래는 3개의 박스를 가운데 정렬하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 10px;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

</body>
</html>

이 코드는 브라우저 창의 가운데에 세 개의 skyblue 박스를 정렬합니다. height: 100vh;는 컨테이너가 전체 뷰포트 높이를 차지하도록 설정합니다.

Flexbox를 사용하면 이처럼 간단하게 아름다운 레이아웃을 디자인할 수 있습니다. 여러분도 이 기술을 활용하여 멋진 웹 페이지를 만들어 보세요!