[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기

[CSS 4강] 이제 노가다는 끝! Flexbox로 반응형 레이아웃 마스터하기

"복잡한 배치를 단 몇 줄로 해결하는 마법 같은 기술을 배워봅시다."

안녕하세요! 지난 시간에는 글자를 예쁘게 꾸미는 법을 배웠습니다. 오늘은 웹 디자인의 가장 큰 고민인 '요소 배치(Layout)'를 가장 쉽고 강력하게 해결해주는 Flexbox를 알아보겠습니다.

1. Flexbox란 무엇인가요?

Flexbox는 Flexible Box의 줄임말로, 요소들을 가로 또는 세로로 자유롭게 정렬하고 공간을 배분하기 위해 만들어진 레이아웃 모델입니다.

✅ 부모(Flex Container): 정렬을 명령하는 박스 (display: flex; 적용)

✅ 자식(Flex Item): 정렬되는 대상들

2. 꼭 알아야 할 3가지 핵심 속성

부모 요소에 아래 속성들을 추가하는 것만으로 정렬이 완성됩니다.

• ↔️ justify-content: 메인축(가로) 정렬 (flex-start, center, flex-end, space-between)
• ↕️ align-items: 교차축(세로) 정렬 (flex-start, center, flex-end, stretch)
• 🔄 flex-direction: 정렬 방향 설정 (row: 가로, column: 세로)

3. 가로 메뉴바와 카드 배치 (실습)

아래 코드를 통해 메뉴바를 정중앙에 배치하거나, 카드들을 균일한 간격으로 벌리는 방법을 확인해 보세요.

/* 가로 내비게이션 바 정렬 */ .nav-container { display: flex; justify-content: space-between; /* 요소 사이 간격을 동일하게 */ align-items: center; /* 세로 중앙 정렬 */ background-color: #333; padding: 10px 20px; } /* 카드 리스트 정렬 */ .card-list { display: flex; flex-wrap: wrap; /* 공간이 부족하면 다음 줄로 넘김 */ justify-content: center; /* 가운데 정렬 */ gap: 20px; /* 요소 사이의 간격 */ } .card-item { flex: 1; /* 사용 가능한 공간을 동일하게 나눠 가짐 */ min-width: 200px; padding: 20px; border: 1px solid #ddd; }

레이아웃의 신세계를 경험하셨나요?

Flexbox만 자유자재로 다뤄도 웬만한 웹사이트의 레이아웃은 모두 만들 수 있습니다.

드디어 마지막! 다음 5강에서는 '완성형 포트폴리오 디자인' 실습으로 CSS 과정을 마무리할게요!