실버라인의 잡다한 정보

📌 Flexbox(Flexible Box)란?Flexbox는 CSS의 레이아웃 모델 중 하나로, 아이템들을 효율적으로 정렬하고 배치할 수 있도록 도와주는 기술입니다. 기존의 float, inline-block을 사용할 때보다 더 쉽게 가로/세로 정렬을 조정할 수 있습니다.🎯 Flexbox의 주요 특징✅ 수직 정렬과 가로 정렬을 쉽게 조정 가능✅ 컨테이너 크기에 따라 아이템 크기 자동 조정✅ 반응형 레이아웃을 간편하게 구현 가능🏗️ 1. Flexbox의 기본 개념Flexbox는 크게 두 가지 요소로 구성됩니다.용어설명Flex Container (부모 요소)display: flex;를 적용한 요소Flex Items (자식 요소)Flex 컨테이너 내부에 있는 요소들✅ 기본 예제.container { d..

Flexbox에서 align-items, align-content, align-self는 컨테이너 내부의 아이템을 정렬하는 데 사용되지만, 각각 적용되는 대상과 동작 방식이 다릅니다.1. align-items▶ 컨테이너 내부의 모든 아이템을 정렬대상: flex 컨테이너 내의 모든 아이템작동 방식: 교차 축(cross-axis, 기본값: 수직 방향)에서 모든 아이템을 동일하게 정렬📌 예제 .container { display: flex; align-items: center; /* 모든 아이템을 수직 중앙 정렬 */}✔ align-items 속성값값설명stretch(기본값) 아이템 높이를 컨테이너에 맞게 늘림flex-start아이템을 교차 축의 시작 부분에 정렬flex-end아이템을 교차 축의 끝 부분..