10.1 미디어 쿼리와의 조합
CSS Grid Layout은 복잡하고 반응형인 레이아웃을 만들 수 있는 멋진 도구를 제공합니다. CSS Grid와 미디어 쿼리를 조합하면 다양한 화면 크기와 장치에 적응하는 레이아웃을 만들 수 있습니다. 이제 CSS Grid와 함께 미디어 쿼리를 사용해 유연하고 반응적인 웹 페이지를 만드는 방법을 알아봅시다.
미디어 쿼리의 주요 개념
미디어 쿼리는 화면 너비, 화면 높이, 화면 방향 등 장치의 특성에 따라 다른 CSS 스타일을 적용할 수 있게 해줍니다. CSS Grid와의 조합을 통해 화면 크기에 따라 요소의 구조와 위치를 변경할 수 있습니다.
미디어 쿼리 문법:
@media (조건) {
/* 조건이 충족될 때 적용되는 스타일 */
}
여기서 «조건»은 스타일이 적용될 조건을 의미합니다. 보통 max-width나 min-width와 같은 화면 너비와 관련된 조건이 주로 사용됩니다.
10.2 열의 수 변경하기
완전한 구현 예제 (화면 너비에 따른 열의 수 변경):
CSS
/* 모든 화면에 대한 기본 스타일 */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 너비가 600px 이상인 화면에서 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 두 개의 열 */
}
}
/* 너비가 900px 이상인 화면에서 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* 세 개의 열 */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<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="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 class="grid-item">요소 6</div>
</div>
</body>
</html>
코드 설명:
- 기본 스타일: 모든 화면에 대해 하나의 열을 가진 Grid 컨테이너를 만듭니다.
- 너비가 600px 이상인 화면에 대한 미디어 쿼리: 두 개의 열로 레이아웃을 변경합니다.
- 너비가 900px 이상인 화면에 대한 미디어 쿼리: 세 개의 열로 레이아웃을 변경합니다.
10.3 화면 너비에 따른 의존성
완전한 구현 예제 (화면 너비에 따른 요소의 배치 변경):
CSS
/* 모든 화면에 대한 기본 스타일 */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
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;
}
/* 너비가 600px 이상인 화면에서 */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* 너비가 900px 이상인 화면에서 */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<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="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
코드 설명:
- 기본 스타일: 모든 화면에 대해 네 개의 행과 하나의 열을 가진 Grid 컨테이너를 만듭니다.
- 너비가 600px 이상인 화면에 대한 미디어 쿼리: 두 개의 열로 레이아웃을 변경하고 영역의 배치를 변경합니다: 헤더가 두 개의 열을 차지하고 메인 컨텐츠와 사이드바가 각각 한 열을 차지하며, 푸터가 두 개의 열을 차지합니다.
- 너비가 900px 이상인 화면에 대한 미디어 쿼리: 세 개의 열로 레이아웃을 변경하고 영역의 배치를 변경합니다: 헤더가 세 개의 열을 차지하고 메인 컨텐츠와 사이드바가 각각 한 열과 두 열을 차지하며, 푸터가 세 개의 열을 차지합니다.
10.4 요소 크기 변경
완전한 구현 예제 (화면 너비에 따른 요소 크기 변경):
CSS
/* 모든 화면에 대한 기본 스타일 */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* 너비가 600px 이상인 화면에서 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* 너비가 900px 이상인 화면에서 */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<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="grid-item item1">요소 1</div>
<div class="grid-item item2">요소 2</div>
<div class="grid-item item3">요소 3</div>
<div class="grid-item item4">요소 4</div>
<div class="grid-item item5">요소 5</div>
<div class="grid-item item6">요소 6</div>
</div>
</body>
</html>
코드 설명:
- 기본 스타일: 모든 화면에 대해 두 개의 열과 높이가
100px인 자동 행을 가진 Grid 컨테이너를 만듭니다. - 너비가 600px 이상인 화면에 대한 미디어 쿼리: 세 개의 열로 레이아웃을 변경하고 행의 높이를
150px로 증가시킵니다. - 너비가 900px 이상인 화면에 대한 미디어 쿼리: 네 개의 열로 레이아웃을 변경하고 행의 높이를
200px로 증가시킵니다.
GO TO FULL VERSION