sliver__

안녕하세요! 이번 포스팅에서는 Flexbox를 실습하며 아이템 정렬과 간격 주는 방법을 좀 더 깊이 배워보겠습니다. 1. 기본 정렬 복습justify-content: 주 축(main axis, 기본 가로) 방향 정렬center → 가로 중앙flex-start → 왼쪽 정렬 (기본값)space-between 등 다양한 옵션 존재align-items: 교차 축(cross axis, 기본 세로) 방향 정렬center → 세로 중앙flex-start → 위쪽 정렬stretch → 컨테이너 높이에 맞춰 늘이기 (기본값).container { display: flex; justify-content: flex-start; /* 수평 정렬 */ align-items: center; /* 수직 중..

Flexbox는 **일차원 레이아웃(one-dimensional layout)**을 위해 설계된 관련 CSS 속성들의 집합으로, 컨테이너 내부의 빈 공간을 자식 요소들이 자동으로 분배하도록 돕습니다.원래 핵심 목표는 개발자가 일일이 너비나 마진을 계산하지 않아도 되도록, 브라우저가 컨테이너 안의 빈 공간을 자식 요소들에 알아서 나눠주게 하는 것이었습니다.또한 Flexbox는 **가로·세로 정렬(horizontal & vertical alignment)**을 매우 간단하게 처리할 수 있는데, 이는 기존 CSS에서는 까다로웠던 수직 중앙 정렬이나 동일 높이 컬럼(equal-height columns) 문제를 손쉽게 해결해 줍니다.결과적으로 구식 float 기반 레이아웃을 대체하고, 더 간결하고 유지보수하기 ..

안녕하세요 여러분! 이번 포스팅에서는 Flexbox를 실습하며 기본 개념을 익히는 방법을 알아보겠습니다. 이미 강의에서 여러 차례 언급했던 Flexbox를 드디어 코드에 적용해볼 차례인데요, 복잡한 프로젝트 환경이 아니라 간단한 형태로 따로 떼어놓고 실습해볼 거예요.Flex 컨테이너와 아이템 이해하기1. Flexbox 적용컨테이너 설정이 한 줄만으로도 자식 요소들이 가로로 나란히 배치됩니다..container { display: flex;}용어 정리Flex Container: display: flex를 준 부모 요소Flex Items: 컨테이너 내부의 자식 요소들2. 기본 레이아웃각 아이템은 자신의 콘텐츠 크기만큼 너비를 차지높이는 기본적으로 컨테이너 내 가장 큰 아이템 기준(Stretch)컨테이너 배..