본문 바로가기
CSS

CSS 플렉스박스 심화: 복잡한 레이아웃을 손쉽게 만드는 방법

by puBlog 2024. 10. 6.
반응형

**CSS 플렉스박스(Flexbox)**는 한 차원(수평 또는 수직)에서 요소들을 유연하게 배치하고 정렬할 수 있는 강력한 레이아웃 도구입니다. 기본적인 사용법 외에도 플렉스박스는 복잡한 레이아웃을 쉽게 만들 수 있는 다양한 기능을 제공합니다. 이번 포스팅에서는 플렉스박스의 심화 개념을 배우고, 다양한 레이아웃을 손쉽게 구성하는 방법을 알아보겠습니다.

1. 플렉스 컨테이너와 플렉스 아이템 복습

1-1. 플렉스 컨테이너

플렉스박스를 적용하기 위해서는 부모 요소에 display: flex; 속성을 사용해 플렉스 컨테이너로 설정해야 합니다. 컨테이너 안에 있는 자식 요소들은 플렉스 아이템이 됩니다.

.container {
    display: flex;
}

1-2. 플렉스 아이템

플렉스 아이템은 기본적으로 한 줄에 나란히 배치되며, 여러 가지 속성을 사용해 유연하게 크기와 배치를 조정할 수 있습니다.

2. 축 정렬 속성 이해하기

플렉스박스는 주축(main axis)과 교차 축(cross axis)을 사용하여 요소들을 배치합니다. 주축은 기본적으로 가로 방향이지만, flex-direction 속성을 사용해 세로 방향으로 변경할 수 있습니다.

2-1. flex-direction 속성

flex-direction 속성은 주축의 방향을 결정합니다.

  • row: 가로 방향(기본값).
  • row-reverse: 가로 방향 반대로 배치.
  • column: 세로 방향.
  • column-reverse: 세로 방향 반대로 배치.
.container {
    display: flex;
    flex-direction: column; /* 세로 방향으로 정렬 */
}

2-2. justify-content: 주축 정렬

justify-content 속성은 주축을 따라 아이템을 어떻게 정렬할지를 결정합니다.

  • flex-start: 아이템을 시작점에 정렬.
  • flex-end: 아이템을 끝점에 정렬.
  • center: 중앙에 정렬.
  • space-between: 아이템 사이에 동일한 간격을 배치.
  • space-around: 아이템 주위에 동일한 간격을 배치.
.container {
    display: flex;
    justify-content: space-between;
}

2-3. align-items: 교차 축 정렬

align-items 속성은 교차 축을 따라 아이템을 어떻게 정렬할지를 결정합니다.

  • flex-start: 교차 축의 시작점에 정렬.
  • flex-end: 교차 축의 끝점에 정렬.
  • center: 교차 축의 중앙에 정렬.
  • stretch: 아이템을 교차 축 전체에 걸쳐 늘림(기본값).
.container {
    display: flex;
    align-items: center;
}

3. 여러 줄 레이아웃: flex-wrap

flex-wrap 속성을 사용하면 플렉스 아이템이 한 줄을 넘어갈 때 자동으로 새로운 줄로 넘어가도록 할 수 있습니다. 이 속성은 반응형 웹 디자인에서 유용하게 사용됩니다.

3-1. 기본 사용법

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

예시: 여러 줄 레이아웃 구현

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 여러 줄 예시</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .item {
            width: 150px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

설명:

  • flex-wrap: wrap;을 사용하여 여러 줄로 아이템이 배치되도록 설정했습니다.
  • gap 속성을 사용해 아이템 간의 간격을 추가할 수 있습니다.

4. 플렉스 아이템의 크기 제어: flex-grow, flex-shrink, flex-basis

플렉스박스는 각 아이템의 크기를 유연하게 제어할 수 있습니다. flex-grow, flex-shrink, flex-basis 속성을 사용하면 아이템의 크기가 화면 크기나 다른 아이템에 따라 조정됩니다.

4-1. flex-grow: 아이템 크기 확장

flex-grow 속성은 가용 공간이 있을 때 아이템이 얼마나 확장될지를 결정합니다.

.item {
    flex-grow: 1; /* 모든 아이템이 동일한 비율로 확장 */
}

4-2. flex-shrink: 아이템 크기 축소

flex-shrink 속성은 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정합니다.

.item {
    flex-shrink: 2; /* 아이템이 더 많이 축소 */
}

4-3. flex-basis: 기본 크기 설정

flex-basis는 아이템의 기본 크기를 설정합니다. 이 속성은 아이템의 초기 크기를 지정하며, 필요에 따라 flex-grow나 flex-shrink가 적용됩니다.

.item {
    flex-basis: 200px; /* 기본 크기를 200px로 설정 */
}

예시: 크기 조절을 위한 flex-grow와 flex-basis 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex-grow 및 flex-basis 예시</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            background-color: lightcoral;
            padding: 20px;
            flex-grow: 1; /* 모든 아이템이 동일하게 확장 */
            flex-basis: 150px; /* 기본 크기 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

설명:

  • **flex-grow**와 **flex-basis**를 사용해 아이템이 기본 크기에서 확장되도록 설정했습니다.

5. 반응형 플렉스 레이아웃 구현

플렉스박스를 사용하면 반응형 레이아웃을 쉽게 구현할 수 있습니다. 미디어 쿼리를 사용해 화면 크기에 따라 레이아웃이 동적으로 변화하도록 설정할 수 있습니다.

예시: 반응형 플렉스 레이아웃

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 플렉스 레이아웃</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .item {
            background-color: lightgreen;
            flex-basis: 100%; /* 모바일에서 1열 */
            padding: 20px;
            text-align: center;
        }

        @media (min-width: 600px) {
            .item {
                flex-basis: 48%; /* 태블릿에서 2열 */
            }
        }

        @media (min-width: 1024px) {
            .item {
                flex-basis: 30%; /* 데스크탑에서 3열 */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>
 

설명:

  • flex-basis: 100%: 모바일에서는 모든 아이템이 한 줄을 차지합니다.
  • 미디어 쿼리를 사용하여 600px 이상에서는 아이템이 2열로, 1024px 이상에서는 3열로 배치됩니다.

결론

이번 포스팅에서는 CSS 플렉스박스 심화 개념을 통해 여러 줄 레이아웃, 아이템 크기 조정, 반응형 레이아웃 등을 구현하는 방법을 배웠습니다. 플렉스박스는 한 방향에서의 레이아웃을 매우 유연하고 효율적으로 처리할 수 있는 도구이며, 이를 잘 활용하면 복잡한 레이아웃도 쉽게 구현할 수 있습니다.

다음 포스팅에서는 **CSS 그리드 레이아웃(Grid Layout)**에 대해 알아보겠습니다. 그리드는 2차원 레이아웃을 구성하는 데 매우 유용하므로, 플렉스박스와 함께 사용하면 더욱 강력한 웹 페이지 레이아웃을 만들 수 있습니다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS' 카테고리의 다른 글

CSS 그리드 레이아웃: 복잡한 2차원 배치를 간편하게 구현하는 방법  (0) 2024.10.07
CSS 호버(:hover) 효과: 버튼 변형과 색상 변화로 인터랙티브한 UI 만들기  (4) 2024.10.07
CSS 배경과 그라디언트 : background  (0) 2024.10.06
CSS 변환(Transform): 요소를 자유롭게 변형하는 방법  (0) 2024.10.05
CSS 애니메이션과 트랜지션: 웹 페이지에 생동감을 더하는 방법  (1) 2024.10.03

관련글

티스토리툴바