Flexbox는 요소의 크기 및 위치를 유연하게 조절하기 위한 CSS 레이아웃 모듈입니다. 이번 포스트에서는 Flexbox를 이용하여 간단한 레이아웃을 구성하는 예제를 살펴보겠습니다.

HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. 예제에서는 div 요소를 사용하여 컨테이너를 생성하고, 그 안에 자식 요소로 아이템들을 정의합니다. 아래는 예제 HTML 코드입니다.

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

CSS 스타일 적용하기

다음으로, 이렇게 생성된 HTML에 Flexbox를 적용하기 위해 CSS 스타일을 추가해야 합니다. 아래는 예제 CSS 코드입니다.

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  margin: 10px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

위의 코드에서 .container 클래스에 display: flex;를 적용하여 컨테이너를 Flexbox 레이아웃으로 설정하였고, .item 클래스에 flex: 1;을 적용하여 아이템들이 동일한 너비의 공간을 차지하게 설정하였습니다. 그 외에도 여러 스타일 속성을 추가하여 원하는 디자인을 적용할 수 있습니다.

결과 확인하기

위의 코드를 HTML과 CSS에 적용한 후 웹 브라우저에서 결과를 확인해봅시다. Item 1, Item 2, Item 3라는 텍스트가 각각 동일한 너비의 공간을 차지하는 세 개의 아이템으로 나타날 것입니다. 아이템들은 컨테이너 내에서 justify-content: space-between; 스타일로 정렬되어 좌우로 균등하게 배치될 것입니다.

이처럼 Flexbox를 활용하면 효율적이고 유연한 웹 레이아웃을 구성할 수 있습니다.이번 예제는 Flexbox의 기초적인 사용법을 보여줬지만, 더 많은 옵션과 기능을 활용하여 더 복잡한 레이아웃을 구성할 수 있습니다.

#flexlayout #css #webdesign