9.1 grid-template-areas 속성
CSS Grid Layout은 이름 있는 영역 (grid areas)을 사용하여 복잡한 레이아웃을 만드는 데 큰 가능성을 제공합니다. 속성 grid-template-areas는 그리드에 사용할 수 있는 영역들을 설정할 수 있게 해주며, 요소를 쉽게 배치할 수 있게 해줘요. 이 속성은 개발자가 레이아웃을 시각적으로 조직하고 유지보수를 쉽게 할 수 있게 합니다.
grid-template-areas의 기본 개념
-
영역 정의:
- 속성
grid-template-areas를 통해 그리드의 다양한 영역에 이름을 지정할 수 있어요 - 각 영역 이름은 직사각형 셀 그룹을 나타냅니다
- 속성
-
이름 있는 영역 사용:
-
설정된 영역은 각 요소의
grid-area속성을 설정하여 요소 배치에 사용할 수 있어요
-
설정된 영역은 각 요소의
grid-template-areas의 문법:
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"
}
Grid 요소 문법:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
설명:
grid-template-areas의 각 줄은 그리드의 한 줄을 나타냅니다- 각 줄의 각 단어는 셀 또는 셀 그룹을 나타냅니다
- 빈 셀에는 점 (.)을 사용할 수 있습니다
9.2 grid-template-areas 사용 예제
전체 구현 예제:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
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 Areas 예제</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="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
코드 설명:
-
.grid-container:display: grid를 사용하여 Grid 컨테이너를 정의하고grid-template-areas로 레이아웃을 설정합니다. 여기서 레이아웃은 세 줄로 구성되며, 첫 번째 줄은 헤더, 두 번째 줄은 사이드바와 메인 콘텐츠, 세 번째 줄은 푸터입니다 -
.header,.sidebar,.main,.footer: 다양한 그리드 영역에 대한 스타일을 정의하고grid-template-areas에서 이름과 연결하기 위해grid-area속성을 사용합니다
9.3 빈 영역 관리
grid-template-areas는 빈 공간을 나타내기 위해 점 (.)을 사용하여 영역을 비워둘 수 있도록 해줍니다.
전체 구현 예제:
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
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 Areas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
코드 설명:
-
.grid-container: 헤더, 메인 콘텐츠, 푸터의 세 영역을 가진 Grid 컨테이너를 생성합니다. 중간 줄은 메인 콘텐츠 양쪽에 빈 영역을 포함합니다 -
.header,.main,.footer: 영역에 대한 스타일을 정의하고grid-template-areas의 영역 이름과 연결합니다
GO TO FULL VERSION