4.1 Flexbox 레이아웃

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

4.1 Flexbox 레이아웃

Flexbox(Flexible Box Layout)는 최근 웹 디자인에서 매우 유용하게 사용되는 레이아웃 모델로, 요소들을 유연하고 효율적으로 배치하는 데 큰 도움을 줍니다. Flexbox를 사용하면 공간을 최적화하고 다양한 화면 크기에 따라 자동으로 조정되는 디자인을 쉽게 구현할 수 있습니다. 본 강의에서는 Flexbox의 기본 개념을 이해하고, 실제 프로젝트에서 어떻게 활용할 수 있는지 단계별로 알아보겠습니다.

Flexbox의 기본 원리

Flexbox는 컨테이너와 아이템 구조로 구성됩니다. 컨테이너에는 display: flex; 속성을 주어야 하며, 아이템은 기본적으로 한 줄에 나열됩니다. 기본적인 정렬을 위해 여러 CSS 속성을 사용할 수 있습니다. 아래는 Flexbox의 기본 속성과 그 사용 방법을 설명하는 예제입니다.

코드 css

/* Flexbox 컨테이너 설정 */
.container {
    display: flex;
    justify-content: center; /* 수평 정렬 */
    align-items: center; /* 수직 정렬 */
    flex-wrap: wrap; /* 아이템을 줄바꿈 */
}

/* Flexbox 아이템 설정 */
.item {
    flex: 1; /* 균등한 너비 */
    margin: 10px;
    padding: 20px;
    background-color: #f2f2f2;
    text-align: center;
    border: 1px solid #ccc;
}

위 예제에서 .container는 Flexbox 컨테이너로 설정되어 있으며, 내부의 모든 .item 요소들은 동일한 너비와 여백을 갖습니다. justify-content와 align-items 속성을 통해 아이템의 정렬을 쉽게 조절 가능합니다.

실습

다음 실습을 통해 Flexbox를 활용하여 간단한 레이아웃을 만들어보세요. HTML 구조는 다음과 같습니다.

코드 html

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

이 구조를 기반으로 Flexbox CSS를 적용하여 반응형 레이아웃을 만들어보세요. 다양한 뷰포트에서 위 구조가 어떻게 변하는지 확인하기 위해 Chrome DevTools의 Device Toolbar를 사용하여 테스트해보세요.

정리

Flexbox는 웹 개발에서 유연한 레이아웃을 제공하는 강력한 도구입니다. 기본 속성을 이해하고 실습을 통해 자신만의 레이아웃을 구현해보는 것이 중요합니다. 다음 시간에는 CSS Grid에 대해 알아보겠습니다.

4.1 Flexbox 레이아웃

4.1 Flexbox 레이아웃

Flexbox의 기본 원리

실습

정리

댓글 0