📐
CSS 레이아웃 마스터하기
Flexbox와 CSS Grid를 사용해서 2단, 3단, 센터 정렬 레이아웃을 만드는 방법을 배워보세요.
1Flexbox 기초
Flexbox는 1차원 레이아웃 시스템입니다. 요소를 가로 또는 세로로 배치하고, 정렬과 간격을 쉽게 제어합니다.
미리보기HTMLCSS
HTML
<div class="flex-demo">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>CSS
.flex-demo {
display: flex;
gap: 16px;
}
.box {
width: 80px;
height: 80px;
background: #0066ff;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: 600;
}display: flex만 넣으면 자식 요소가 자동으로 가로 배치됩니다.
2CSS Grid로 그리드 레이아웃
CSS Grid는 2차원 레이아웃 시스템입니다. 행과 열을 동시에 제어할 수 있어서, 복잡한 레이아웃에 적합합니다.
미리보기HTMLCSS
HTML
<div class="grid-demo">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>CSS
.grid-demo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.item {
padding: 24px;
background: #f3f4f6;
border-radius: 8px;
text-align: center;
font-weight: 600;
font-size: 18px;
}repeat(3, 1fr)은 동일한 너비의 3열을 만듭니다. fr은 남은 공간을 비율로 나눕니다.
3완벽한 센터 정렬
CSS에서 요소를 정확히 가운데 놓는 것은 오래된 과제입니다. Flexbox를 사용하면 2줄이면 됩니다.
미리보기HTMLCSS
HTML
<div class="center-demo">
<div class="centered-box">가운데!</div>
</div>CSS
.center-demo {
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
background: #f9fafb;
border: 2px dashed #d1d5db;
border-radius: 12px;
}
.centered-box {
padding: 16px 32px;
background: #111;
color: white;
border-radius: 8px;
font-weight: 600;
}display: flex + align-items: center + justify-content: center = 완벽한 가운데 정렬. 이것만 기억하세요!