grid
- CSS의 레이아웃 배치 기능 중 하나로 flex(단방향)와는 다르게 두 방향 레이아웃을 설정함
- 컨테이너에 display: grid; 를 적용해야 사용 가능
※ 길이에 대한 단위를 px이 아닌 fr도 사용 가능한데 fr은 상대적인 비율을 의미 => ex) 1fr 1fr 1fr = 1:1:1
grid-template-columns
- 그리드 열의 배치(가로) 설정
ex) grid-template-columns: 100px 200px 300px; => 각 그리드의 열(가로) 길이를 100,200,300px로 지정
grid-template-rows
- 그리드 행의 배치(세로) 설정
row-gap
- 그리드 셀 간의 행(세로) 간격 설정
column-gap
- 그리드 셀 간의 열(가로) 간격 설정
grid-template-areas
- 각 영역에 이름을 붙이고, 그 이름을 이용하여 배치하는 속성
- grid-template-areas에서 정의한 속성명들은 각 아이템 요소들에 grid-area 속성으로 지정
<head>
<style>
body {
font-size: 2rem;
font-weight: bold;
}
header,
main,
aside,
footer {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: black;
color: white;
}
aside {
background-color: #ff9d00;
}
main {
background-color: aquamarine;
}
footer {
background-color: black;
color: white;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 100px auto 50px;
grid-template-areas: "header header" "main side" "footer footer";
row-gap: 10px;
column-gap: 30px;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
aside {
grid-area: side;
}
footer {
grid-area: footer;
}
</style>
<title>Document</title>
</head>
<body>
<header>header</header>
<main>main</main>
<aside>side</aside>
<footer>footer</footer>
</body>grid-auto-flow
- 아이템이 자동 배치되는 흐름을 결정하는 속성
- row, column, dense(중간에 빈 셀 X), row dense, column dense
align-items
- 아이템들을 수직 방향으로 정렬
- start, center, end, stretch
justify-items
- 아이템들을 수평 방향으로 정렬
- start, center, end, stretch
align-content
- 아이템들을 모두 통째로 세로 정렬
- start, center, end, stretch, space-between, space-around, space-evenly
justify-content
- 아이템들을 모두 통째로 가로 정렬
- start, center, end, stretch, space-between, space-around, space-evenly
align-self
- 개별 아이템의 세로 정렬
- start, center, end, stretch
justify-self
- 개별 아이템의 가로 정렬
- start, center, end, stretch
order
- grid 요소들의 순서를 설정
z-index
- position의 z-index와 동일
'블록체인 기술사업 교육 > CSS' 카테고리의 다른 글
| 블록체인 기술사업 교육 23일차 (0) | 2023.05.04 |
|---|---|
| 블록체인 기술사업 교육 22일차 (CSS) (0) | 2023.05.03 |
| 블록체인 기술사업 교육 21일차 (0) | 2023.05.02 |
| 블록체인 기술사업 교육 20일차 (0) | 2023.04.28 |
댓글