CSS 입문 자료구조

CSS 플렉스박스 기초

CSS 플렉스박스 기초 — 초급

플렉스박스 기초

1. 도입 (왜 배워야 하는가)

플렉스박스(Flexbox)는 CSS 레이아웃을 유연하고 강력하게 관리할 수 있는 모듈입니다. 웹사이트를 개발할 때 다양한 화면 크기와 해상도에서 디자인을 일관되게 유지하는 것이 중요합니다. 플렉스박스를 사용하면 요소들의 크기와 배치를 쉽게 조정할 수 있어, 반응형 웹 디자인을 구현하는 데 큰 도움이 됩니다. 만약 플렉스박스를 모른다면, 요소들을 수동으로 위치시키거나 복잡한 수치 계산을 하게 되어 유지보수와 확장성이 떨어지는 코드를 작성하게 될 것입니다.

2. 핵심 개념 설명

플렉스박스는 '유연한 박스 모델'로, 주축(main axis)과 교차축(cross axis)을 기준으로 요소들을 배치합니다.

주축: 기본적으로 가로 방향입니다. 요소들이 배치되는 방향입니다.
교차축: 주축과 수직인 방향으로, 기본적으로 세로 방향입니다.

용어	설명
Flex Container	플렉스 아이템을 포함하는 부모 요소
Flex Item	플렉스 컨테이너 안에 있는 자식 요소
justify-content	주축 방향 정렬 방식
align-items	교차축 방향 정렬 방식

3. 기본 코드 예제

아래는 플렉스박스를 사용한 기본적인 레이아웃 예제입니다.

.container {
    display: flex; / 플렉스 컨테이너로 설정 /
    justify-content: space-between; / 주축에서 요소 간격을 균등하게 배치 /
    align-items: center; / 교차축에서 중앙 정렬 /
}

.item {
    background-color: lightblue; / 배경색 설정 /
    padding: 10px; / 내부 여백 추가 /
    margin: 5px; / 외부 여백 추가 /
}

실행 결과:

3개의 아이템이 수평으로 나란히 배치되고, 각 아이템 사이에 동일한 간격이 생깁니다.

코드 한 줄씩 동작 설명:

display: flex;: 해당 요소를 플렉스 컨테이너로 설정하여 자식 요소를 플렉스 아이템으로 만듭니다.
justify-content: space-between;: 주축(가로 방향)에서 아이템들이 양 끝에 배치되고, 중간에 균등한 간격을 둡니다.
align-items: center;: 교차축(세로 방향)에서 아이템들이 중앙에 정렬됩니다.
.item 클래스는 각 아이템의 스타일을 정의하며, 배경색, 패딩, 마진을 설정합니다.

4. 실전 활용 예제

패턴 1: 네비게이션 바

쇼핑몰 웹사이트에서 상단 네비게이션 바를 구현할 때 플렉스박스를 사용하여 메뉴를 정렬할 수 있습니다.

.navbar {
    display: flex; / 플렉스 컨테이너로 설정 /
    justify-content: space-around; / 메뉴 아이템 사이에 균등한 간격 /
    background-color: #333; / 네비게이션 바 배경색 /
}

.nav-item {
    color: white; / 글자색 설정 /
    padding: 15px; / 내부 여백 /
}

패턴 2: 카드 레이아웃

포트폴리오 사이트에서 여러 개의 카드(프로젝트)를 나열할 때 유용합니다.

.card-container {
    display: flex; / 플렉스 컨테이너로 설정 /
    flex-wrap: wrap; / 아이템을 여러 줄로 감싸기 /
    justify-content: space-between; / 아이템 간격 조정 /
}

.card {
    background-color: lightgray; / 카드 배경색 /
    width: 30%; / 카드 너비를 30%로 설정 /
    margin: 10px; / 카드 간격 조정 /
}

5. 흔한 실수와 주의사항

실수 1: display 속성을 빼먹음

잘못된 코드:

.container {
    justify-content: center; / display: flex; 를 빼먹음 /
}

올바른 코드:

.container {
    display: flex; / 플렉스 컨테이너로 설정 /
    justify-content: center; / 주축에서 중앙 정렬 /
}

실수 2: flex-wrap 속성을 설정하지 않음

잘못된 코드:

.card-container {
    display: flex;
    justify-content: space-between; / 아이템이 한 줄에만 배치됨 /
}

올바른 코드:

.card-container {
    display: flex;
    flex-wrap: wrap; / 아이템이 여러 줄로 감싸지게 설정 /
    justify-content: space-between;
}

6. 정리

플렉스박스는 유연한 레이아웃을 제공하여 반응형 웹 디자인에 유용하다.
주축과 교차축 개념을 이해하면 요소 배치가 쉬워진다.
justify-content와 align-items 속성을 활용하여 정렬을 쉽게 조정할 수 있다.

다음에 학습하면 좋은 주제

CSS Grid: 복잡한 레이아웃을 구성할 때 유용한 그리드 시스템
미디어 쿼리: 반응형 웹 디자인을 위한 화면 크기별 스타일 적용 방법

학습