無제

🟢 Flex Container (플렉스 컨테이너) 자식 요소들을 정렬하고 배치하는 부모 요소. 🔹 display: flex (정렬의 시작) 요소를 Flex Container(플렉스 컨테이너)로 만드는 가장 기본적인 선언..container { display: flex; }display: flex;: 블록 요소. (줄 전체 차지) display: inline-flex;: 인라인 요소처럼 동작. (내용만큼 크기) 🔹 flex-direction (방향과 축)요소가 배치되는 방향과 주축(Main Axis), 교차축 (Cross Axis)을 결정..container { display: flex; flex-direction: column; }row: 가로 방향 배치. (왼쪽 → 오른쪽) (기본값)row..

🟢  Flexbox Layout ‘Flexible Box’의 줄임말로, 행(row) 또는 열(column) 방향의 한 축(1차원)을 기준으로 정렬하고 배치하는 레이아웃 방식. ◼️  특징 및 장점방향의 자유로움: 가로(행) 또는 세로(열) 중 원하는 한 방향으로 요소를 쉽게 나열한다. (1차원)유동적인 크기: 컨테이너의 크기에 맞춰 자식 요소들의 너비나 높이를 자동으로 늘리고 줄일 수 있다.간편한 정렬: 과거 float이나 inline-block으로 구현하기 힘들었던 '수직 중앙 정렬'이나 '균등 분할'을 단 한 줄의 코드로 해결한다.순서 변경: HTML 구조를 바꾸지 않고도 CSS 속성만으로 화면에 보이는 요소의 순서를 변경할 수 있다. ◼️  용어 설명주체(Entities)Flex Container..

🟢  Grid Layout (그리드 레이아웃) 행(row)과 열(column)을 동시에 다룰 수 있는 2차원 레이아웃 방식. 🔹 display: grid (정렬의 시작) 요소를 grid Container(플렉스 컨테이너)로 만드는 가장 기본적인 선언..container { display: grid;} 👉 fr (fraction) 비율 단위 🔥핵심🔥 사용 가능한 공간을 비율로 나누는 유연한 단위..container { /* 100px을 제외한 나머지 공간을 1:2로 나눔 */ grid-template-columns: 100px 1fr 2fr; grid-template-rows: 1fr 2fr; /* 1:2 비율 (전체를 3등분) */} fr 은 고정값이 아닌 비율 기반 단위. 1️⃣ Gr..