CSS Flexbox 레이아웃의 기본 개념과 활용 방법

CSS Flexbox는 웹 페이지의 요소를 배치하는 강력하고 유연한 방법입니다. 이를 이해하고 활용하면 웹 개발에서 레이아웃을 다루는 것이 훨씬 쉬워집니다. 주니어 개발자 여러분, 복잡한 코드 없이도 멋진 레이아웃을 만들 수 있습니다. 시작해볼까요?

Flexbox 란 무엇인가요?

Flexbox는 'Flexible Box'의 줄임말로, 요소들을 효율적으로 정렬하고, 공간 분배를 쉽게 할 수 있게 해주는 레이아웃 모델입니다. 이는 한 방향(수평 또는 수직)으로의 레이아웃을 주로 다룹니다.

기본 용어

• Flex Container: Flex 아이템들을 감싸는 부모 요소입니다.
• Flex Item: Flex 컨테이너 내부의 자식 요소들입니다.

시작하기: Flex Container 설정하기

Flexbox를 사용하기 위해서는 먼저 Flex Container를 설정해야 합니다. 이는 간단한 CSS 선언을 통해 이루어집니다.

.flex-container {
  display: flex;
}

이 코드는 선택한 요소를 Flex Container로 만들며, 그 안의 자식 요소들이 Flex Item이 됩니다.

Flex Items 정렬하기

Flexbox의 진정한 힘은 Flex Items의 정렬과 공간 분배에 있습니다. 몇 가지 주요 속성으로 이를 쉽게 할 수 있습니다.

주 축과 교차 축

• justify-content: 주 축(기본적으로 수평)을 따라 Flex Items를 정렬합니다.
• align-items: 교차 축(기본적으로 수직)을 따라 Flex Items를 정렬합니다.

.flex-container {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center; /* 세로 가운데 정렬 */
}

Flex Items의 크기 조정

• flex-grow: Flex Item이 컨테이너 내에서 차지할 수 있는 공간의 양을 정의합니다.
• flex-shrink: Flex Item이 줄어들 수 있는 정도를 정의합니다.
• flex-basis: Flex Item의 기본 크기를 정의합니다.

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

이 코드는 각 Flex Item이 최소 100px의 크기를 가지며, 가능한 공간을 균등하게 분배받도록 합니다.

실습해보기

이제 여러분이 직접 Flexbox를 사용해보세요. 아래의 HTML과 CSS를 사용하여 시작해보는 것이 좋습니다.

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

.flex-container {
  display: flex;
  justify-content: space-around; /* 요소들 사이에 공간을 균등하게 배분 */
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox를 사용하면, 복잡한 레이아웃도 간단하게 만들 수 있습니다. 이 기초를 바탕으로 더 다양한 레이아웃에 도전해보세요. Happy coding!