강의 내용
1. Flexbox 기초
Flexbox는 복잡한 레이아웃을 효율적으로 배치할 수 있는 CSS 레이아웃 모듈입니다.
Flex Container 속성
.flex-container {
display: flex;
/* 주축 방향 설정 */
flex-direction: row; /* row, row-reverse, column, column-reverse */
/* 줄 바꿈 설정 */
flex-wrap: nowrap; /* nowrap, wrap, wrap-reverse */
/* 주축 정렬 */
justify-content: flex-start; /* flex-start, center, flex-end, space-between, space-around, space-evenly */
/* 교차축 정렬 */
align-items: stretch; /* stretch, flex-start, center, flex-end, baseline */
/* 여러 줄일 때 교차축 정렬 */
align-content: stretch; /* stretch, flex-start, center, flex-end, space-between, space-around */
}Flex Item 속성
.flex-item {
/* 남은 공간 분배 비율 */
flex-grow: 0; /* 기본값 0 */
/* 공간 부족시 축소 비율 */
flex-shrink: 1; /* 기본값 1 */
/* 기본 크기 */
flex-basis: auto; /* auto, 0, 픽셀값, 퍼센트 등 */
/* 축약형 */
flex: 0 1 auto; /* grow shrink basis */
flex: 1; /* flex: 1 1 0과 같음 */
/* 개별 아이템 정렬 */
align-self: auto; /* auto, flex-start, center, flex-end, stretch, baseline */
/* 순서 변경 */
order: 0; /* 정수값, 기본값 0 */
}실용적인 Flexbox 예제
가로 중앙 정렬
.center-horizontal {
display: flex;
justify-content: center;
}세로 중앙 정렬
.center-vertical {
display: flex;
align-items: center;
min-height: 100vh;
}완전 중앙 정렬
.center-both {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}균등 분배
.equal-columns {
display: flex;
}
.equal-columns > * {
flex: 1;
}2. CSS Positioning
CSS positioning을 사용하여 요소의 위치를 정확하게 제어할 수 있습니다.
Static (기본값)
.static {
position: static;
/* top, right, bottom, left 속성이 무시됨 */
}일반적인 문서 흐름에 따라 배치됩니다.
Relative
.relative {
position: relative;
top: 10px; /* 원래 위치에서 아래로 10px */
left: 20px; /* 원래 위치에서 오른쪽으로 20px */
}원래 위치를 기준으로 상대적 위치 조정. 다른 요소들은 영향받지 않음.
Absolute
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* 부모 요소에 상대적 위치 설정 */
.parent {
position: relative;
}position이 static이 아닌 가장 가까운 조상 요소를 기준으로 위치 설정.
Fixed
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.fixed-button {
position: fixed;
bottom: 20px;
right: 20px;
}뷰포트를 기준으로 위치 고정. 스크롤해도 위치가 변하지 않음.
Sticky
.sticky-nav {
position: sticky;
top: 0;
background: white;
z-index: 100;
}스크롤에 따라 relative와 fixed 사이를 전환.
3. 실용적인 레이아웃 패턴
자주 사용되는 레이아웃 패턴들을 Flexbox로 구현해봅시다.
1. Holy Grail Layout
<div class="holy-grail">
<header>Header</header>
<div class="content-wrapper">
<nav>Navigation</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</div>.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrapper {
display: flex;
flex: 1;
}
nav {
flex-basis: 200px;
background: #f8f9fa;
}
main {
flex: 1;
padding: 20px;
}
aside {
flex-basis: 150px;
background: #e9ecef;
}2. Card Layout
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.card {
flex: 1 1 300px; /* grow shrink basis */
min-height: 200px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 20px;
}
/* 마지막 줄 카드들 왼쪽 정렬 */
.card:last-child {
margin-right: auto;
}3. 반응형 네비게이션
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 2rem;
}
.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
/* 모바일에서 햄버거 메뉴 */
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background-color: #333;
width: 100%;
text-align: center;
transition: 0.3s;
gap: 0;
}
.nav-menu.active {
left: 0;
}
.nav-toggle {
display: flex;
}
}4. 반응형 웹 디자인 개념
다양한 디바이스에 맞춰 레이아웃이 조정되는 반응형 웹의 기본 개념을 알아봅시다.
뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">기본 브레이크포인트
/* Mobile First 방식 */
.container {
width: 100%;
padding: 0 15px;
}
/* 태블릿 */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
/* 데스크톱 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
}
}
/* 큰 화면 */
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}Flexbox 반응형 패턴
.responsive-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.grid-item {
/* 모바일: 전체 너비 */
flex: 1 1 100%;
}
/* 태블릿: 2열 */
@media (min-width: 768px) {
.grid-item {
flex: 1 1 calc(50% - 0.5rem);
}
}
/* 데스크톱: 3열 */
@media (min-width: 1024px) {
.grid-item {
flex: 1 1 calc(33.333% - 0.67rem);
}
}