CSS 애니메이션을 익혔다면, 이제 복잡한 레이아웃을 마스터할 차례입니다. Grid와 Flexbox를 적재적소에 활용하여 어떤 디자인도 구현하세요.
After learning CSS animations, it's time to master complex layouts. Use Grid and Flexbox appropriately to implement any design.
CSS Grid 심화 Advanced CSS Grid
/* 기본 Grid 컨테이너 */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* 명시적 영역 정의 */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* 명시적 영역 정의 */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* Basic Grid container */
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Explicit area definition */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
}
/* Explicit area definition */
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Flexbox 고급 패턴 Advanced Flexbox Patterns
/* 완벽한 센터링 */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* 균등 분배 */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* Flexbox로 카드 그리드 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px);
min-width: 280px;
}
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* 균등 분배 */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* Flexbox로 카드 그리드 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px);
min-width: 280px;
}
/* Perfect centering */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Even distribution */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* Card grid with Flexbox */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px);
min-width: 280px;
}
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Even distribution */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
/* Card grid with Flexbox */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px);
min-width: 280px;
}
반응형 레이아웃 Responsive Layout
/* 모바일 우선 반응형 */
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 태블릿 */
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 데스크톱 */
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* 태블릿 */
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 데스크톱 */
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
/* Mobile-first responsive */
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet */
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
/* Tablet */
@media (min-width: 768px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop */
@media (min-width: 1024px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
📊 Grid vs Flexbox 선택 기준 📊 When to Choose Grid vs Flexbox
- Grid: 2차원 레이아웃 (행 + 열), 전체 페이지 구조
- Grid: 2D layout (rows + columns), page structure
- Flexbox: 1차원 레이아웃 (행 또는 열), 컴포넌트 내부
- Flexbox: 1D layout (row or column), component internals
- 둘 다: Grid로 전체 구조, Flexbox로 내부 정렬
- Both: Grid for structure, Flexbox for alignment
💡 CSS 레이아웃 타자 연습 팁 💡 CSS Layout Typing Tips
grid-template-columns, justify-content, align-items 속성을
자주 타이핑해보세요. 레이아웃 코드는 반복이 핵심입니다.
Practice typing grid-template-columns, justify-content,
align-items often.
Repetition is key for layout code.