jonbeo 님의 블로그

Flexbox를 쓸 때 가장 먼저 설정해야 하는 속성이 있습니다.바로 flex-direction입니다.이 속성은 아이템들이 나열되는 기본 방향을 정해주는 역할을 합니다.그런데 이 방향 하나만 바꿨을 뿐인데, 전체 레이아웃이 완전히 달라져 보이는 경험, 해보신 적 있으시죠?이번 포스팅에서는 flex-direction의 기본 개념부터각 속성값이 실제로 어떻게 작동하는지 차근차근 살펴보겠습니다! ✅ 기본 문법.container { display: flex; flex-direction: row; /* 기본값 */} flex-direction은 Flexbox의 주축(main axis) 방향을 설정해주는 속성입니다.주축이 어디냐에 따라 justify-content, align-items 같은 정렬 방식도 달라져..

웹 레이아웃을 만들다 보면 display: flex와 display: grid,둘 중에 어떤 걸 써야 할지 고민될 때가 많죠?둘 다 정말 강력한 CSS 레이아웃 도구지만,방식이 완전히 다르고, 잘 쓰면 작업 효율이 확 달라져요.이번 글에서는 Flexbox와 CSS Grid의 차이점, 언제 어떤 상황에서 쓰면 좋은지 쉽게 정리해볼게요!✅ 둘 다 레이아웃 도구예요! 그런데 구조가 달라요항목FlexboxGrid정렬 방식1차원(한 줄 또는 한 열)2차원(행과 열 동시에)사용 목적콘텐츠 흐름대로 정렬정확한 영역 배치배치 기준아이템 순서 중심위치 중심 (그리드 영역 지정)대표 용도메뉴바, 버튼 정렬, 카드 나열 등전체 페이지 레이아웃, 포털형 구성 등 🧭 Flexbox가 잘 어울리는 상황은?Flexbox는 콘텐츠..