CSS CSS Flexbox 플렉스 박스 레이아웃 기초설명
페이지 정보
조회 63회
본문
CSS Flexbox 플렉스 박스 레이아웃
Flexbox란 무엇인가?
1) 정의
Flexbox는 'Flexible Box(유연한 상자)'의 줄임말입니다.
요소들을 행(가로) 또는 열(세로) 방향으로 자유자재로 배치하고 정렬하는 1차원 레이아웃 모델입니다.
2) 핵심 역할 (반응형 메뉴 예시)
데스크탑 환경: 화면이 넓을 때는 메뉴 항목들을 가로로 넓게 벌려 배치합니다. (예:
justify-content: space-between)모바일 환경: 화면이 좁아지면 메뉴를 세로로 쌓거나 간격을 좁게 조정하여 화면에 최적화된 레이아웃을 만듭니다. (예:
flex-direction: column)
핵심 구조
Flex Container (부모): 정렬 규칙을 정하는 큰 바구니
Flex Items (자식): 바구니 안에 담긴 내용물
핵심 요약
중앙 정렬 공식: 부모에게
justify-content: center;와align-items: center;를 주면 무조건 가운데로 옵니다.간격 주기:
gap속성을 사용하면 자식들 사이에 일정한 간격을 쉽게 줄 수 있습니다.
플렉스박스(Flexbox)는 웹 페이지의 레이아웃을 효율적으로 배치하기 위해 사용합니다. 기존의 float이나 position 방식보다 훨씬 유연하게 요소를 정렬할 수 있는 것이 장점입니다.
주로 다음과 같은 상황에서 필수적으로 사용됩니다.
1. 수평 및 수직 중앙 정렬
과거에는 요소를 화면 정중앙에 배치하는 것이 까다로웠으나, Flexbox를 사용하면 justify-content: center;와 align-items: center; 두 줄만으로 간단히 해결할 수 있습니다.
2. 반응형 레이아웃 구현
화면 크기에 따라 요소의 너비나 높이를 자동으로 조절해야 할 때 유용합니다. 창이 좁아지면 항목을 다음 줄로 넘기거나(wrap), 남은 공간을 똑같이 나누어 채우는 동작이 매우 쉽습니다.
3. 요소 간의 균등 간격 배치
메뉴 바나 내비게이션 바를 만들 때 항목 사이의 간격을 일정하게 벌리거나(space-between, space-around), 양 끝 정렬을 할 때 가장 많이 쓰입니다.
4. 순서 변경 및 방향 전환
HTML 구조를 바꾸지 않고도 CSS만으로 요소의 배치 순서를 역순으로 바꾸거나(row-reverse, column-reverse), 가로 배치를 세로 배치로 즉시 변경할 수 있습니다.
정리하자면:
display 속성: 부모 요소를 플렉스 컨테이너로 선언할 때 사용합니다.
flex-direction: 가로 또는 세로 방향을 결정할 때 사용합니다.
justify-content: 주축(메인축) 기준 정렬이 필요할 때 사용합니다.
align-items: 교차축(수직축) 기준 정렬이 필요할 때 사용합니다.
<style> } body { display: flex; /* 플렉스 컨테이너 지정 */ justify-content: center; /* 주축 정렬 방법 - 중앙 정렬 */ align-items: center; /* 교차축 정렬 방법 - 중앙 정렬 */ } </style> |
Layer 방식 vs Flexbox 방식 비교
구분 | 레이어 방식 (과거) | Flexbox 방식 (현재) |
핵심 속성 |
|
|
중앙 정렬 | 요소의 가로/세로 길이를 알아야 정교한 계산 가능 | 자식 요소의 크기와 상관없이 무조건 중앙 배치 가능 |
반응형 | 화면이 변할 때마다 수치 재계산 필요 | 화면 크기가 변해도 유연하게 정렬 유지 |
- 이전글CSS Flexbox 플렉스 박스 / display / flex-direction / flex-wrap / align-content 26.02.26
- 다음글[용어] 뷰포트(Viewport) 26.02.27