3.3 Flexbox 기초

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

3.3 Flexbox 기초

Flexbox(Flexible Box Layout)는 우리가 웹 페이지의 요소들을 더 효율적으로 배치하고 정렬할 수 있도록 도와주는 CSS 레이아웃 모델입니다. 이 모델은 특히 1차원 레이아웃에 강점을 보이며, 요소들의 정렬, 방향, 크기 조절 등을 간편하게 처리할 수 있습니다.

Flexbox의 원리

Flexbox는 주축(main axis)과 교차축(cross axis) 개념을 기반으로 합니다. 요소들을 주축을 따라 배치하고, 교차축에 대해서는 그 정렬 방법을 다양하게 설정할 수 있습니다. 주축 방향은 flex-direction 속성을 사용하여 설정하며, 요소의 정렬은 justify-content, align-items 등을 통해 제어합니다.

이제 Flexbox의 기본 속성과 사용법을 알아보겠습니다.

예제 - Flexbox로 간단한 박스 배치하기

아래는 Flexbox를 사용하여 세 개의 박스를 수평으로 배치하는 간단한 예제입니다. 이 코드를 사용하여 Flexbox의 기본 작동 방식을 이해할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flexbox 예제</title>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

코드 css

.container {
    display: flex; /* Flexbox 레이아웃을 사용 */
    justify-content: center; /* 박스들을 수평 중앙 정렬 */
    align-items: center; /* 박스들을 수직 중앙 정렬 */
    height: 100vh; /* 화면 가로 세로 전체를 차지 */
}
.box {
    background-color: lightblue; /* 박스 배경색 설정 */
    width: 100px; /* 박스 너비 설정 */
    height: 100px; /* 박스 높이 설정 */
    margin: 10px; /* 박스 간격 설정 */
    display: flex; /* 박스 내부 요소를 Flexbox로 설정 */
    justify-content: center; /* 박스 내부 요소 중앙 정렬 */
    align-items: center; /* 박스 내부 요소 중앙 정렬 */
}

실습 - Flexbox를 이용한 카드 레이아웃 만들기

이 실습에서는 Flexbox를 사용하여 아이템 카드 레이아웃을 만들어 보겠습니다. 이렇게 만들면 웹사이트에서 제품이나 프로젝트 카드와 같은 내용을 정리할 수 있습니다.

HTML 파일 수정: 아래처럼 기본 카드 레이아웃을 만들어 보세요.

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

CSS 파일 수정: 아래의 스타일을 적용하여 카드를 배치해 보세요.

.card-container {
    display: flex; /* Flexbox 레이아웃 사용 */
    justify-content: space-around; /* 카드 간의 간격 설정 */
}
.card {
    background-color: lightcoral; /* 카드 배경색 설정 */
    width: 200px; /* 카드 너비 설정 */
    height: 300px; /* 카드 높이 설정 */
    margin: 10px; /* 카드 간격 설정 */
    display: flex; /* 카드 내용 중앙 정렬 */
    justify-content: center;
    align-items: center;
    font-size: 20px; /* 폰트 크기 설정 */
}

실습 결과

실습이 끝나면 각각의 카드가 수평으로 나열되어 보여야 합니다. 카드가 중앙에 배치되도록 설정하여 사용자가 쉽게 정보를 인지할 수 있도록 합니다.

발생할 수 있는 오류 및 해결 방법

카라름 (card) 정보가 정렬되지 않음: display: flex; 속성이 누락되었는지 확인하세요.
카드 크기 조정이 제대로 되지 않음: 각 카드의 width와 margin 속성을 조정하여 집합적으로 잘 보이도록 설정할 수 있습니다.

정리

Flexbox는 간단한 구조로 복잡한 레이아웃을 구성할 수 있는 아주 유용한 도구입니다. 다양한 속성을 조정하여 더욱 복잡한 레이아웃을 만들 수 있으며, 제공된 실습을 통해 그 기초를 다졌습니다.

다음 강의에서는 Flexbox의 고급 기능에 대해 알아보겠습니다.

3.3 Flexbox 기초

3.3 Flexbox 기초

Flexbox의 원리

예제 - Flexbox로 간단한 박스 배치하기

실습 - Flexbox를 이용한 카드 레이아웃 만들기

실습 결과

발생할 수 있는 오류 및 해결 방법

정리

댓글 0