CSS 그리드(Grid)는 웹 페이지의 복잡한 레이아웃을 손쉽게 구현할 수 있는 강력한 도구입니다. 이 글에서는 CSS 그리드의 기본 개념부터 실전에서 바로 사용할 수 있는 예제까지 상세히 설명하며, 그리드 기반 레이아웃 설계 방법을 소개합니다.
1. CSS 그리드란?
CSS 그리드는 행(row)과 열(column)로 구성된 2차원 레이아웃 시스템입니다. 플렉스박스(Flexbox)가 1차원 레이아웃(가로 또는 세로 정렬)에 초점이 맞춰져 있다면, 그리드는 가로와 세로를 동시에 다룰 수 있어 복잡한 레이아웃 설계에 적합합니다.
CSS Grid로 할 수 있는 작업:
• 대칭적인 카드 레이아웃
• 헤더, 본문, 푸터를 포함한 페이지 레이아웃
• 빈틈없는 갤러리 디자인
2. CSS 그리드 기본 개념
2-1. Grid Container와 Grid Item
• Grid Container: display: grid;를 설정한 부모 요소.
• Grid Item: Grid Container 안에 포함된 자식 요소.
.container {
display: grid;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
3. CSS Grid 주요 속성
3-1. grid-template-columns / grid-template-rows
그리드의 열(column)과 행(row)의 크기를 정의합니다.
• 열을 3등분:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 열 3개, 동일한 너비 */
}
• 행을 지정된 크기로 설정:
.container {
display: grid;
grid-template-rows: 100px 200px; /* 첫 번째 행은 100px, 두 번째 행은 200px */
}
3-2. grid-gap / gap
그리드 아이템 간의 간격을 설정합니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px; /* 아이템 간 20px 간격 */
}
3-3. grid-column / grid-row
그리드 아이템이 차지할 열(column)과 행(row)의 범위를 정의합니다.
.item {
grid-column: 1 / 3; /* 1열부터 3열까지 차지 */
grid-row: 2 / 4; /* 2행부터 4행까지 차지 */
}
3-4. justify-items / align-items
그리드 아이템의 가로 및 세로 정렬 방식을 지정합니다.
• justify-items: 가로 정렬 (start, center, end, stretch)
• align-items: 세로 정렬 (start, center, end, stretch)
.container {
display: grid;
justify-items: center;
align-items: center;
}
3-5. grid-area
그리드 아이템을 특정 위치에 배치합니다.
.item {
grid-area: 2 / 1 / 4 / 3; /* 2행 1열에서 시작, 4행 3열까지 차지 */
}
구문: grid-area: [start-row] / [start-column] / [end-row] / [end-column];
4. CSS Grid 실전 예제
4-1. HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
4-2. CSS
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr; /* 두 열, 첫 번째는 1 비율, 두 번째는 3 비율 */
grid-template-rows: 100px 1fr 50px; /* 세 행: 고정 크기와 비율 */
gap: 10px; /* 그리드 간격 */
height: 100vh;
}
.header {
grid-column: 1 / 3; /* 두 열을 차지 */
background-color: #007bff;
color: white;
text-align: center;
line-height: 100px;
}
.sidebar {
grid-column: 1 / 2; /* 첫 번째 열 */
grid-row: 2 / 3; /* 두 번째 행 */
background-color: #f4f4f4;
padding: 20px;
}
.content {
grid-column: 2 / 3; /* 두 번째 열 */
grid-row: 2 / 3; /* 두 번째 행 */
background-color: #fff;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.footer {
grid-column: 1 / 3; /* 두 열을 차지 */
background-color: #333;
color: white;
text-align: center;
line-height: 50px;
}
결과: 헤더, 사이드바, 본문, 푸터가 완벽하게 배치된 반응형 레이아웃이 생성됩니다.
5. CSS Grid 활용 팁
1. 반응형 디자인:
minmax()와 auto-fit을 사용해 화면 크기에 따라 유연한 레이아웃을 만드세요.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2. grid-area로 이름 지정:
영역 이름을 설정해 더 직관적으로 레이아웃을 설계하세요.
.grid-container {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header {
grid-area: header;
}
3. 디버깅 툴 활용:
브라우저 개발자 도구에서 Grid Inspector를 사용하면 그리드 레이아웃을 시각적으로 확인할 수 있습니다.
CSS Grid는 강력한 2차원 레이아웃 도구로, 간결하고 효율적으로 복잡한 웹 페이지 디자인을 구현할 수 있습니다. 이 글의 예제를 따라 실습하며 그리드 속성을 익히고, 자신만의 커스터마이즈된 레이아웃을 설계해 보세요.
다음 글에서는 CSS 반응형 웹 디자인의 기초를 다룰 예정입니다.
'HTML' 카테고리의 다른 글
| HTML 시맨틱 태그 완벽 가이드: SEO와 웹 접근성을 향상시키는 방법 (0) | 2024.12.08 |
|---|---|
| HTML 멀티미디어 태그 완벽 가이드: 오디오와 비디오를 추가하는 방법 (0) | 2024.12.08 |
| HTML 폼 태그 완벽 가이드: 사용자 입력을 처리하는 방법 (0) | 2024.12.07 |
| HTML 레이아웃 태그 완벽 정리: 웹 페이지 구조의 기본 (0) | 2024.12.06 |
| HTML 기본 태그 완벽 가이드: 꼭 알아야 할 기초 태그 (0) | 2024.12.05 |