2.1 display: grid 속성
CSS Grid Layout는 행과 열을 사용해서 복잡한 웹페이지 레이아웃을 만들 수 있는 강력한 레이아웃 시스템이야. CSS Grid를 사용할 때 기본적인 첫 단계는 Grid 컨테이너를 만드는 거야. 아래에서 display: grid 속성을 사용해 Grid 컨테이너를 만들고 그 기본적인 부분들을 관리하는 방법을 알아보자.
Grid 컨테이너 기본 개념
display: grid 속성
display: grid 속성은 요소를 Grid 컨테이너로 정의해줘. 이는 모든 CSS Grid 기능을 요소 배치에 활용할 수 있게 해주는 기본적인 단계야.
예시:
CSS
.grid-container {
display: grid;
}
Grid 컨테이너의 주요 요소들
display: grid 속성으로 Grid 컨테이너를 정의한 후, 이 컨테이너의 모든 자식 요소들은 자동으로 grid-요소가 돼. 이는 컨테이너 내에서 그들의 배치와 정렬을 관리할 수 있게 해줘.
예시:
CSS
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 컨테이너 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">요소 1</div>
<div class="grid-item">요소 2</div>
<div class="grid-item">요소 3</div>
</div>
</body>
</html>
코드 설명:
.grid-container:display: grid속성으로 요소를 Grid 컨테이너로 정의해줘. 또한 컨테이너 테두리를 추가해서 시각적으로 강조해줘..grid-item: Grid 컨테이너 내부 요소들을 위한 기본 스타일을 정의해줘. 배경색, 텍스트 색상, 패딩, 테두리, 텍스트 정렬 등이 포함돼.
2.2 중첩된 Grid 컨테이너
CSS Grid의 장점 중 하나는 중첩된 Grid 컨테이너를 만들 수 있다는 거야. 이를 통해 하나의 grid-요소가 자신의 자식 요소들을 위한 grid-컨테이너가 되어서 복잡한 레이아웃을 만들 수 있어.
예시:
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>중첩된 Grid 컨테이너</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">요소 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">중첩 요소 1</div>
<div class="nested-grid-item">중첩 요소 2</div>
</div>
</div>
<div class="grid-item">요소 3</div>
</div>
</body>
</html>
코드 설명:
-
.nested-grid-container:display: grid속성으로 중첩된 Grid 컨테이너를 정의해줘. 또한 요소들 간의 간격(gap: 5px)과 내부 패딩(padding: 10px)을 추가해줘. -
.nested-grid-item: 중첩된 Grid 컨테이너 내부 요소들을 위한 기본 스타일을 정의해줘. 배경색, 패딩, 테두리 등이 포함돼.
2.3 Grid 컨테이너 행위 관리
display: grid 속성은 Grid 컨테이너의 행위를 관리하기 위한 추가 속성들을 사용할 수 있게 해줘. 예를 들면, grid-auto-flow 속성은 요소 자동 배치를 관리해.
예시:
CSS
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>auto-flow가 있는 Grid 컨테이너</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">요소 1</div>
<div class="grid-item">요소 2</div>
<div class="grid-item">요소 3</div>
<div class="grid-item">요소 4</div>
<div class="grid-item">>요소 5</div>
</div>
</body>
</html>
2.4 Grid 컨테이너 내에서 Flexbox 사용
어떤 경우에는 grid-요소 내에서 Flexbox를 사용하는 것이 더 복잡한 레이아웃을 만드는 데 도움이 될 수 있어. 이는 두 기술의 장점을 결합한 것이야.
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 컨테이너 내의 Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex 요소 1</div>
<div class="flex-item">Flex 요소 2</div>
</div>
<div class="grid-item">요소 2</div>
<div class="grid-item">요소 3</div>
</div>
</body>
</html>
코드 설명:
.flex-container:display: flex속성으로 grid-요소를 flex-컨테이너로 정의해줘..flex-item: flex-컨테이너 내 요소들을 위한 기본 스타일을 정의해줘. 배경색, 패딩, 유연성(flex: 1) 등이 포함돼.
GO TO FULL VERSION