// 그리드, Grid
- flex가 선형 레이아웃이라면, grid는 평면 레이아웃이다.
- 비는 공간이 생겨도 괜찮다.
~ grid-template-rows: 행의 개수와 크기
~ grid-template-columns : 열의 개수와 크기
- Grid Container: Grid 전체 영역
- Grid Item: 내부 요소
- Grid Cell: Grid의 한 칸
- Grid Line: Grid Cell을 구분하는 각각의 선
- Grid Number: Grid Line 번호
- Grid Gap: Grid Cell 사이의 간격
- fr: 비율 단위 (1fr 2fr > 1:2)
~ grid-column-start + grid-column-end = (grid-column)
/grid-row-start + grid-row-end = (grid-row) : 셀병합
grid-column-start: 1;
grid-column-end: 4;
grid column: 1/4;
<!-- grid -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: grid;
}
.container .item:nth-child(1) { background-color: tomato; }
.container .item:nth-child(2) { background-color: orange; }
.container .item:nth-child(3) { background-color: gold; }
.container .item:nth-child(4) { background-color: greenyellow; }
.container .item:nth-child(5) { background-color: dodgerblue; }
.container .item:nth-child(6) { background-color: violet; }
.container {
/* 행과 열의 개수 + 크기 */
grid-template-rows: 100px 100px; /* 2행 */
grid-template-columns: 100px 100px 100px; /* 3열 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">가</div>
<div class="item">나</div>
<div class="item">다</div>
<div class="item">라</div>
<div class="item">마</div>
<div class="item">바</div>
</div>
</body>
</html>
<!-- grid -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
}
main {
/* border: 10px solid blackDD; */
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px 200px 1fr;
}
.menu {
background-color: tomato;
grid-row: 1/4;
text-align: center;
color: white;
}
.menu h1 {
font-variant: small-caps;
}
.menu ul {
list-style-type: none;
padding: 0px;
}
.menu div {
font-size: 12px;
}
.menu hr {
border: 0;
border-bottom: 1px dashed white;
}
.search {
background-color: gold;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid yellow;
width: 400px;
padding: 4px;
outline: none;
}
.search button {
border: 1px solid yellow;
width: 100px;
height: 26px;
background-color: rgba(255,255,0, .5);
}
.banner {
background-color: yellowgreen;
}
.banner img {
object-fit: cover;
width: 100%;
height: 100%;
}
.list {
background-color: royalblue;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
}
.list div {
background-color: cornflowerblue;
font-weight: bold;
}
.list div img {
display: block;
margin: 20px auto;
border: 5px solid white;
padding: 3px;
}
.list div div {
margin: 30px;
font-size: 14px;
color: #3d3d3d;
}
@media screen and (max-width: 768px) {
main {
grid-template-columns: 1fr;
grid-template-rows: 200px 50px 200px 1fr;
}
.menu {
grid-row: auto;
}
.menu ul{
display: flex;
justify-content: center;
margin: 0;
}
.menu li {
margin: 0 7px;
}
.menu hr {
display: none;
}
.menu div {
margin-top: 12px;
}
.list {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
</head>
<body>
<main>
<div class="menu">
<h1>Study</h1>
<ul>
<li>JDK</li>
<li>Java</li>
<li>Oracle</li>
<li>SQL</li>
<li>JDBC</li>
</ul>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
<hr>
<div>
©Copyright test.com 2023<br>All rights reserved.
</div>
</div>
<div class="search">
<input type="text">
<button>Search</button>
</div>
<div class="banner">
<img src="images/gimbal.jpg">
</div>
<div class="list">
<div>
<img src="images/rect_icon01.png">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ab rerum maiores at error voluptates doloremque voluptatibus fuga, commodi nostrum velit delectus aperiam perferendis quia porro, architecto distinctio? Ad, reiciendis?</div>
</div>
<div>
<img src="images/rect_icon02.png">
<div>A nulla eveniet deserunt velit. Fuga eveniet dicta cupiditate eligendi ipsa nesciunt placeat, amet, ratione consequuntur ea temporibus, quibusdam id vitae quod doloribus error obcaecati natus sequi odio assumenda itaque?</div>
</div>
<div>
<img src="images/rect_icon03.png">
<div>Assumenda, incidunt dignissimos maiores provident nesciunt doloribus possimus quis totam molestias ea. Architecto itaque enim tenetur illum repellendus sapiente sed, voluptate sint dicta. Nostrum, commodi ipsum enim non totam distinctio.</div>
</div>
<div>
<img src="images/rect_icon04.png">
<div>Odit, distinctio suscipit facilis eaque atque ratione nesciunt dolor quidem culpa sit maxime voluptas excepturi temporibus eveniet ad, consequuntur eum totam a voluptatum quo quos dolorem dolores corporis. Facere, aliquam?</div>
</div>
<div>
<img src="images/rect_icon05.png">
<div>Sit minima, dolorem nesciunt rem iure sint voluptatum dolor, hic nobis dicta corporis reprehenderit aspernatur? Quam, vitae sed quaerat ipsum minima non magnam, qui officia alias pariatur sint dolore quod.</div>
</div>
<div>
<img src="images/rect_icon06.png">
<div>Quia enim temporibus ullam, dicta quidem quos! Quo odio molestias sunt, similique neque labore quibusdam cupiditate, natus consequatur, placeat sapiente. Provident maxime, dignissimos quod ipsum mollitia quis eius suscipit quidem.</div>
</div>
</div>
</main>
</body>
</html>'클라이언트 > CSS' 카테고리의 다른 글
| CSS 속성 - z-index (0) | 2023.11.06 |
|---|---|
| CSS 속성 - Position (0) | 2023.11.06 |
| CSS 속성 - Float (0) | 2023.11.06 |
| CSS 속성 - Flex (0) | 2023.11.06 |
| CSS 속성 - 다단 구조 (0) | 2023.11.06 |
