[웹 디자인] 17일차: 플렉스박스를 이용한 반응형 레이아웃

플렉스박스란?

플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 아이템을 쉽게 정렬하고 배치할 수 있게 해줍니다. 플렉스박스는 반응형 디자인을 구현하는 데 매우 유용하며, 다양한 화면 크기와 기기에 맞게 레이아웃을 조정할 수 있습니다.

플렉스 컨테이너와 아이템

• 플렉스 컨테이너: display: flex를 설정한 요소입니다.
• 플렉스 아이템: 플렉스 컨테이너 안에 있는 모든 직계 자식 요소입니다.

예제:

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

.container {
  display: flex;
}

플렉스박스를 이용한 기본 레이아웃

주축 방향 설정 (flex-direction)

플렉스 컨테이너의 주축 방향을 설정합니다.

• row: 기본값, 가로 방향
• column: 세로 방향

예제:

.container {
  display: flex;
  flex-direction: row; /* 또는 column */
}

아이템 정렬 (justify-content)

플렉스 아이템을 주축을 따라 정렬합니다.

• flex-start: 주축의 시작 부분에 정렬 (기본값)
• flex-end: 주축의 끝 부분에 정렬
• center: 주축의 중앙에 정렬
• space-between: 아이템 사이에 동일한 간격을 배치
• space-around: 아이템 주위에 동일한 간격을 배치

예제:

.container {
  display: flex;
  justify-content: space-between; /* 또는 flex-start, flex-end, center, space-around */
}

아이템 정렬 (align-items)

플렉스 아이템을 교차축을 따라 정렬합니다.

• flex-start: 교차축의 시작 부분에 정렬
• flex-end: 교차축의 끝 부분에 정렬
• center: 교차축의 중앙에 정렬
• baseline: 아이템의 기준선에 정렬
• stretch: 아이템을 컨테이너의 높이에 맞게 늘림 (기본값)

예제:

.container {
  display: flex;
  align-items: center; /* 또는 flex-start, flex-end, baseline, stretch */
}

반응형 레이아웃 예제

2열 레이아웃

화면이 작아질 때 한 열로 변경되는 2열 레이아웃을 구현해보겠습니다.

HTML:

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

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 50%; /* 아이템이 50% 너비를 차지 */
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 600px) {
  .item {
    flex: 1 1 100%; /* 화면이 600px 이하일 때 아이템이 100% 너비를 차지 */
  }
}

네비게이션 바

반응형 네비게이션 바를 구현해보겠습니다.

HTML:

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
}

.navbar .logo {
  color: white;
  font-size: 24px;
}

.nav-links {
  display: flex;
  list-style: none;
}

.nav-links li {
  margin-left: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

@media (max-width: 768px) {
  .nav-links {
    display: none; /* 작은 화면에서는 네비게이션 링크 숨기기 */
  }
}

카드 레이아웃

반응형 카드 레이아웃을 구현해보겠습니다.

HTML:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card {
  flex: 1 1 calc(33.333% - 10px); /* 카드가 3열로 배치되도록 설정 */
  background-color: lightgrey;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 10px); /* 화면이 768px 이하일 때 카드가 2열로 배치 */
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%; /* 화면이 480px 이하일 때 카드가 1열로 배치 */
  }
}

결론

플렉스박스를 사용하면 반응형 레이아웃을 쉽게 구현할 수 있습니다. 플렉스 컨테이너와 아이템의 다양한 속성을 활용하여 다양한 화면 크기와 기기에 맞는 레이아웃을 만들 수 있습니다. 이번 글에서는 플렉스박스를 이용한 반응형 레이아웃의 기본 개념과 예제를 다루었습니다.

다음 글에서는 그리드 레이아웃을 이용한 반응형 디자인에 대해 알아보겠습니다.

다음 글에서 만나요!