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

작성: 2025년 10월 17일읽기: 약 3분

웹 개발을 배우는 여정에서, 멋진 웹사이트 레이아웃을 디자인하는 것은 매우 중요한 기술입니다. 오늘은 특히 주니어 개발자 여러분을 위해, 웹 페이지를 아름답게 만들어줄 Flexbox 레이아웃에 대해 알아보겠습니다. Flexbox는 웹 디자인을 더 쉽고, 유연하게 만들어주는 강력한 도구입니다. 복잡한 용어 없이, 실제 예제를 통해 Flexbox의 기본을 배워보겠습니다.

Flexbox의 기본

Flexbox는 컨테이너 내 아이템들의 레이아웃을 효율적으로 정렬하고, 분배하는 방법을 제공합니다. 이를 사용하기 위해서는 먼저 컨테이너에 display: flex; 속성을 적용해야 합니다.

.container {
  display: flex;
}

이렇게 하면, .container 안에 있는 모든 아이템들이 가로로 나란히 정렬됩니다.

주축과 교차축

Flexbox에서는 두 가지 중요한 축이 있습니다: 주축(main axis)과 교차축(cross axis). 기본적으로, 주축은 가로 방향이고, 교차축은 세로 방향입니다. 이 축들은 아이템들이 어떻게 정렬될지 결정합니다.

아이템 정렬하기

Flexbox의 강력한 기능 중 하나는 아이템들을 쉽게 정렬할 수 있다는 것입니다. 예를 들어, 아이템들을 주축을 따라 중앙에 정렬하고 싶다면, 다음과 같이 할 수 있습니다.

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

마찬가지로, 아이템들을 교차축을 따라 중앙에 정렬하고 싶다면, 다음과 같이 할 수 있습니다.

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

예제: 간단한 네비게이션 바 만들기

Flexbox를 사용하여 간단한 네비게이션 바를 만들어보겠습니다. 이 예제는 Flexbox의 기본적인 사용법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .nav {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    padding: 0;
  }
</style>
</head>
<body>

<ul class="nav">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

</body>
</html>

이 코드는 .nav 클래스가 적용된 <ul> 요소 안의 아이템들을 양 끝과 중앙에 고르게 분배합니다. 이는 justify-content: space-between; 속성 덕분입니다.

Flexbox를 사용하면, 복잡한 레이아웃도 간단하고, 유연하게 만들 수 있습니다. 오늘 배운 내용을 활용하여 다양한 웹 페이지 레이아웃을 시도해보세요. 웹 개발의 세계에는 끝없는 가능성이 있습니다! 🚀