⭐ display: grid;
- grid를 쓰면 색칠하듯이 자유롭게 박스 배치 가능
- 직관적
[방법1] 내부박스 크기 조절을 통해 레이아웃 만들기
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css_grid.css" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<div class="grid-nav"></div>
<div class="grid-sidebar"></div>
<div class="grid-content"></div>
<!-- <div></div>
<div></div>
<div></div>
<div></div>
<div></div> -->
</div>
</body>
</html>
[CSS]
.grid-container {
display: grid;
/* 세로칸 개수, 사이즈 */
grid-template-columns: 100px 100px 100px 100px;
/* 가로칸 개수, 사이즈 */
grid-template-rows: 100px 100px 100px;
}
.grid-container div {
border: 1px solid black;
}
.grid-nav {
/* 세로선 1-5까지 차지해주세요 */
grid-column: 1 / 5;
}
.grid-sidebar {
grid-row: 2 / 4;
}
.grid-content {
grid-column: 2 / 5;
grid-row: 2 / 4;
}▶ 균등하게 나눌 때 fr단위로 폭 지정 가능 (fraction)-배수
- 1fr 1fr 1fr은 1배 (1:1:1)
- 2fr 1fr 1fr은 (2:1:1)
- height있어야됨.
▶grid-gap : 10px; →격자 간격
[방법2] 자식에 이름 쓰고 부모는 색칠하기
▶ 자식에 이름 쓰려면 gird-are: 이름;
▶더 직관적이고 쉽다.
✅ 변경
.grid-nav {
grid-area: 헤더;
/* grid-column: 1 / 5; */
}
.grid-sidebar {
grid-area: 사이드;
/* grid-row: 2 / 4; */
}
✅ grid-container에 추가
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"헤더 헤더 헤더 헤더"
"사이드 . . ."
"사이드 . . .";
[HTML]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css_grid.css" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<div class="grid-nav"></div>
<div class="grid-sidebar"></div>
<div class="grid-content"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
[CSS]
.grid-container {
display: grid;
/* 세로칸 개수, 사이즈 */
grid-template-columns: 100px 100px 100px 100px;
/* 가로칸 개수, 사이즈 */
grid-template-rows: 100px 100px 100px;
grid-template-areas:
"헤더 헤더 헤더 헤더"
"사이드 . . ."
"사이드 . . .";
}
.grid-container div {
border: 1px solid black;
}
.grid-nav {
grid-area: 헤더;
/* 세로선 1-5까지 차지해주세요
grid-column: 1 / 5; */
}
.grid-sidebar {
grid-area: 사이드;
/* grid-row: 2 / 4; */
}
.grid-content {
/* grid-column: 2 / 5;
grid-row: 2 / 4; */
}': ) Web > 웹 스터디' 카테고리의 다른 글
| [JS] Alert 박스 만들기 (1) | 2024.01.04 |
|---|---|
| [HTML, CSS] [실습] CSS Grid로 레이아웃 만들기 (grid-column, grid-row이용) (0) | 2023.12.15 |
| [HTML, CSS] [실습] transition & animation으로 navbar만들기 (0) | 2023.12.15 |
| [HTML, CSS] navbar에서 위쪽 여백 없애기 (0) | 2023.12.15 |
| [HTML, CSS] [실습] transform & animation으로 애니메이션 만들기 (0) | 2023.12.15 |
