← 목록

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

작성: 2024년 12월 19일읽기: 약 3분
GPTLLM

웹 개발을 배우는 여정에서 멋진 웹사이트를 디자인하는 것은 매우 중요합니다. 오늘은 웹 페이지를 아름답게 만들어 줄 Flexbox 레이아웃에 대해 알아볼 거예요. Flexbox는 웹 개발에서 가장 유용한 CSS 도구 중 하나로, 요소들을 쉽고 유연하게 배치할 수 있게 해줍니다. 복잡한 용어 없이 Flexbox의 기본을 알아보고, 간단한 코드 스니펫으로 실습해 볼게요!

Flexbox란 무엇인가요?

Flexbox는 'Flexible Box'의 줄임말로, 컨테이너 내의 아이템들을 다양한 방향과 정렬로 쉽게 배치할 수 있게 해주는 CSS 레이아웃 모델입니다. 이를 통해 중앙 정렬, 공간 분배, 동적 크기 조정 등을 손쉽게 할 수 있어요.

기본 사용법

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

.container {
  display: flex;
}

이제, 컨테이너 내 아이템들을 어떻게 배치할지 결정할 수 있습니다. 예를 들어, 아이템들을 가로로 나란히 배치하고 싶다면, 다음과 같이 할 수 있어요.

.container {
  display: flex;
  flex-direction: row;
}

아이템 정렬하기

Flexbox의 가장 큰 장점 중 하나는 아이템들을 쉽게 정렬할 수 있다는 것입니다. 가로축과 세로축을 기준으로 아이템들을 정렬할 수 있어요.

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

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

실습: 간단한 Flexbox 레이아웃 만들기

이제 간단한 예제를 통해 Flexbox 레이아웃을 만들어 볼게요. 아래 코드는 세 개의 박스를 가로로 나란히 배치하고, 가운데 정렬하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: skyblue;
  }
</style>
</head>
<body>

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

</body>
</html>

이 코드를 사용하면, 세 개의 box가 컨테이너 중앙에 가로로 정렬되어 표시됩니다. Flexbox를 사용하면 이처럼 간단하게 멋진 레이아웃을 만들 수 있어요.

Flexbox를 활용하면 웹 페이지의 다양한 요소를 유연하게 배치할 수 있습니다. 오늘 배운 내용을 실습해 보면서 Flexbox의 다양한 기능을 탐색해 보세요. 웹 개발 초보자 여러분의 멋진 웹사이트 만들기 여정에 Flexbox가 큰 도움이 되길 바랍니다! 🚀