안녕하세요, 웹 디자인에 관심이 있으신 분들! 오늘은 CSS의 훌륭한 기능 중 하나인 ‘flexbox’에 대해 알아보려 합니다. flexbox는 웹 페이지의 레이아웃을 손쉽게 조정할 수 있게 도와주는 강력한 도구입니다. 이 포스트에서는 기본적인 flexbox 사용법에 대해 알아보겠습니다.

CSS를 배우기 위한 주제로, flexbox를 사용하는 방법에 대한 글을 작성해 보겠습니다. Flexbox는 modern CSS 레이아웃 기술 중 하나로, 복잡한 레이아웃을 쉽게 만드는 데 유용합니다.

CSS Flexbox 사용법

안녕하세요, 웹 디자인에 관심이 있으신 분들!

오늘은 CSS의 훌륭한 기능 중 하나인 ‘flexbox’에 대해 알아보려 합니다.

flexbox는 웹 페이지의 레이아웃을 손쉽게 조정할 수 있게 도와주는 강력한 도구입니다.

이 포스트에서는 기본적인 flexbox 사용법에 대해 알아보겠습니다.

Flexbox란?

Flexbox는 CSS3에 도입된 레이아웃 모듈로, ‘flex’는 ‘유연성’을 의미합니다.

이름에서 알 수 있듯이, flexbox를 사용하면 웹 페이지 내 요소들의 크기, 순서, 정렬을 유연하게 조절할 수 있습니다.

Flexbox 시작하기

Flexbox를 사용하려면 우선 부모 요소에 display: flex;를 선언해야 합니다.

이렇게 하면 해당 요소의 자식 요소들은 flex 아이템이 되어 flex 레이아웃에 따라 배치됩니다.

아래 예제를 살펴봅시다.

<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;
}

.flex-item {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

위 예제에서는 세 개의 아이템이 flex-container 내에 배치되어 있습니다. .flex-container에 display: flex;를 적용하면 아이템들이 가로로 나란히 정렬됩니다.

Flexbox로 아이템 정렬하기

Flexbox의 가장 큰 장점 중 하나는 쉽게 아이템을 가로, 세로 방향으로 정렬할 수 있다는 것입니다. justify-content 속성은 아이템들을 가로 방향으로 정렬하고, align-items 속성은 세로 방향으로 정렬합니다. 이 두 속성의 조합으로 원하는 레이아웃을 쉽게 만들 수 있습니다.

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

위 예제는 모든 아이템을 가로, 세로 방향으로 중앙에 배치합니다. 각 속성에는 다양한 값이 있어 다양한 정렬 방식을 선택할 수 있습니다.

마무리

이 글에서는 CSS flexbox의 기본적인 사용법에 대해 알아보았습니다. flexbox를 이해하고 잘 사용하면 웹 페이지의 레이아웃을 쉽게 구성하고, 반응형 웹 디자인을 구현하는 데 큰 도움이 될 것입니다.