웹 개발 초보자를 위한 Flexbox 레이아웃 디자인 🎨

작성: 2025년 05월 11일읽기: 약 3분

웹 개발을 배우는 여정에서 멋진 레이아웃을 디자인하는 것은 매우 중요합니다. 오늘은 웹 페이지를 아름답게 만드는 데 도움이 되는 Flexbox에 대해 알아보겠습니다. Flexbox는 웹 개발에서 레이아웃을 쉽게 만들 수 있는 강력한 도구입니다. 복잡한 용어 없이 Flexbox의 기본을 배워봅시다!

Flexbox란 무엇인가요?

Flexbox는 CSS3의 일부로, 컨테이너 내 항목의 레이아웃을 효율적으로 설계할 수 있게 해주는 레이아웃 모델입니다. 이를 사용하면 항목을 수평 또는 수직으로 쉽게 정렬할 수 있으며, 항목 사이의 간격도 쉽게 조절할 수 있습니다.

Flexbox 사용하기

Flexbox를 사용하기 위해서는 먼저 컨테이너에 display: flex; 속성을 적용해야 합니다. 이렇게 하면 해당 컨테이너의 자식 요소들이 Flexbox의 영향을 받게 됩니다.

.container {
  display: flex;
}

항목 정렬하기

Flexbox의 가장 큰 장점 중 하나는 항목을 쉽게 정렬할 수 있다는 것입니다. 예를 들어, 항목들을 중앙에 정렬하고 싶다면 다음과 같이 할 수 있습니다.

.container {
  display: flex;
  justify-content: center; /* 가로 방향으로 중앙 정렬 */
  align-items: center; /* 세로 방향으로 중앙 정렬 */
}

항목의 크기 조절하기

Flexbox를 사용하면 항목의 크기도 쉽게 조절할 수 있습니다. flex 속성을 사용하여 항목이 차지하는 공간의 비율을 정할 수 있습니다.

.item1 {
  flex: 1; /* 다른 항목과 같은 비율로 공간 차지 */
}

.item2 {
  flex: 2; /* 다른 항목보다 두 배 더 많은 공간 차지 */
}

실습해보기

이제 간단한 Flexbox 레이아웃을 만들어봅시다. 아래는 세 개의 항목을 가진 컨테이너를 만드는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: space-around; /* 항목 사이에 공간 동일하게 배분 */
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px; /* 텍스트를 상자 중앙에 위치 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

</body>
</html>

이 예제를 통해 기본적인 Flexbox 레이아웃을 만드는 방법을 배웠습니다. Flexbox를 활용하면 웹 페이지의 레이아웃을 더욱 쉽고 효율적으로 디자인할 수 있습니다. 계속 연습하면서 여러분만의 멋진 웹 페이지를 만들어보세요!