CSS 가이드: div 태그를 가로로 나란 배치하는 쉬운 방법

CSS Flexbox는 웹 개발에서 레이아웃을 구성하는 강력한 도구입니다. 특히, 요소들을 가로로 나란히 배치하는 경우 매우 유용하게 활용할 수 있습니다.

1. 기본 설정

가장 먼저, Flexbox를 사용하려는 요소에 display: flex 속성을 설정해야 합니다.

.container {
  display: flex;
}

이렇게 하면 해당 요소는 Flex 컨테이너가 되고, 자식 요소들은 Flex 아이템으로 변합니다. Flex 아이템들은 기본적으로 가로 방향으로 배치됩니다.

2. 간격 조절

Flex 아이템 간의 간격을 조절하려면 justify-content 속성을 사용합니다.

.container {
  display: flex;
  justify-content: space-between; /* 아이템 사이에 동일한 간격을 추가 */
  /* 혹은 */
  justify-content: space-around; /* 아이템 좌우에 여백을 추가하고 아이템 사이에 동일한 간격을 추가 */
}

justify-content 속성에는 다양한 값을 설정할 수 있으며, 각 값은 아이템들의 배치 방식을 결정합니다.

space-between: 아이템 사이에 동일한 간격을 추가합니다.
space-around: 아이템 좌우에 여백을 추가하고 아이템 사이에 동일한 간격을 추가합니다.
flex-start: 아이템들을 컨테이너의 왼쪽 끝에 정렬합니다.
flex-end: 아이템들을 컨테이너의 오른쪽 끝에 정렬합니다.
center: 아이템들을 컨테이너의 가운데에 정렬합니다.

3. 정렬

align-items 속성을 사용하여 Flex 아이템들을 수직 방향으로 정렬할 수 있습니다.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 아이템들을 세로 가운데 정렬 */
}

align-items 속성에도 다양한 값을 설정할 수 있습니다.

flex-start: 아이템들을 컨테이너의 위쪽 끝에 정렬합니다.
flex-end: 아이템들을 컨테이너의 아래쪽 끝에 정렬합니다.
center: 아이템들을 컨테이너의 세로 가운데에 정렬합니다.
stretch: 아이템들을 컨테이너의 높이에 맞춰 늘립니다.

4. 추가적인 설정

Flexbox는 아이템들의 크기, 배치 방식 등을 다양한 속성을 통해 세밀하게 조정할 수 있습니다.

flex-direction: 아이템들의 배치 방향을 설정합니다. 기본값은 row이며, column으로 설정하면 아이템들을 세로로 배치할 수 있습니다.
align-content: 컨테이너 내 아이템들의 수직 정렬 방식을 설정합니다.
flex-wrap: 컨테이너 너비를 넘어서는 아이템들을 다음 줄로 이동시킬지 여부를 설정합니다.

5. 예시

다음은 Flexbox를 이용하여 가로로 나란히 배치된 버튼들을 만드는 예시입니다.

<div class="container">
  <button>버튼 1</button>
  <button>버튼 2</button>
  <button>버튼 3</button>
</div>

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

이 코드는 버튼들을 가로로 나란히 배치하고, 버튼 사이에 동일한 간격을 추가하며, 버튼들을 컨테이너의 세로 가운데에 정렬합니다.

6. 참고 자료

CSS Flexible Box Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
Flexbox Froggy: https://flexboxfroggy.com/

저작자표시