Front-end 개발

📝 본문웹 레이아웃을 짜다 보면 float, position, inline-block 등으로 한계를 느낀 적 있으신가요?이제는 Flexbox와 CSS Grid로 쉽고 강력하게 레이아웃을 설계할 수 있습니다.이번 글에서는 Flexbox와 Grid의 차이점, 사용법, 실제 예제를 통해 완전히 정복할 수 있도록 정리해드립니다!🧱 Flexbox vs Grid 한눈에 비교항목FlexboxGrid주 용도일차원(가로 or 세로) 레이아웃이차원(가로+세로) 레이아웃정렬 방향주축(Main axis) / 교차축(Cross axis)행(Row)과 열(Column) 모두 지정 가능적합한 구조요소 정렬 중심전체 페이지 or 복잡한 레이아웃사용 난이도쉬움상대적으로 복잡하지만 강력함반응형 지원우수우수 🔹 Flexbox 완전 ..

안녕하세요! 오늘은 CSS Grid Layout에 대해 알아보겠습니다.그리드는 웹 레이아웃을 만들 때 매우 강력하고 유연한 도구입니다.기존의 float, position, flexbox로 어렵게 만들던 복잡한 레이아웃을, Grid를 사용하면 간단하고 명확하게 만들 수 있어요.CSS Grid란?CSS Grid Layout은 2차원 레이아웃 시스템입니다.즉, **행(row)**과 **열(column)**을 기준으로 요소를 배치할 수 있어 복잡한 구조도 쉽게 구현 가능합니다.flex는 1차원(가로 or 세로), grid는 2차원(가로 + 세로) 배치가 가능!기본 문법.container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3열 */ grid-..