1. grid Layout
반응형 웹 페이지를 쉽게 구현 가능하다. 2가지 레이아웃은 상황에 따라 혼용하여 사용하므로, 적절한 곳에 이용하기.
| flex Layout | 1차원 구조에 유리하다. 2차원 구조를 만들기 위해서 여러번 중첩시켜야 한다. 비교적 작은 단위 레이아웃에 적합하다. 변경 가능성이 있는 경우에 유리하다. |
| grid Layout | 2차원 구조에 유리하다. 큰 규모 그리고 확실한 경우에 유리하다. 효율적으로 반응형 디자인 구현이 가능하다. 하지만 모든 브라우저에서 지원되지 않는다. << can I use? 에서 확인 가능하다. 위치 자유도가 높은 편이다. |
그리드는 그리드 라인과 그리드 아이템으로 나눌 수 있는데, 그리드 라인은 그리드 숫자와 밀접한 관련성이 있다. 나중에 그리드 아이템을 병합하는 경우에 grid-row 또는 grid-column을 이용하는데, 그 때 유용하게 사용 가능하다.
2. 행 또는 열의 개수 및 크기 지정하기
- grid-template-rows : 그리드 행과 개수 및 크기 지정하기.
- grid-template-columns : 그리드 열과 개수 및 크기 지정하기.
이 경우 많이 사용하는 단위와 함수가 있다.
- fr : 분수를 의미한다. 1fr 2fr 2fr 1fr은 1:2:2:1의 비율을 나타낸다.
- repeat(반복 횟수, 비율) : 반복하는 함수를 의미한다. repeat(4, 1fr)은 1fr:1fr:1fr:1fr을 나타낸다.
- grid-gap : 그리드 아이템 사이에 공간 만들어준다.
3. 행 또는 열을 사용자 지정 통합하기
- grid-row : 시작점 / 종료점을 의미한다. 행 방향으로 통합하는 것을 의미한다.
- grid-column : 시작점 / 종료점을 의미한다. 열 방향으로 통합하는 것을 의미한다.
이 때 그리드 숫자를 이용하여 통합한다. 숫자 대신 span을 이용하여 몇 칸을 차지하는지 표현할 수 있다.
위의 방법을 이용하여 원하는 레이아웃을 만들 수 있다.
4. html 코드
<!DOCTYPE html>
<html lang="ko">
<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>Grid</title>
<link rel="stylesheet" href="./grid__class.css" />
</head>
<body>
<div class="grid__container">
<div class="item item1">item 1</div>
<div class="item item2">item 2</div>
<div class="item item3">item 3</div>
<div class="item item4">item 4</div>
<div class="item item5">item 5</div>
</div>
<div class="container">
<div class="item header">header</div>
<div class="item__container">
<div class="item menu">menu</div>
<div class="item items">items</div>
</div>
</div>
</body>
</html>5. css 코드
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.grid__container {
border: 1px solid black;
height: 500px;
display: grid;
grid-template-columns: 2fr repeat(2, 1fr);
/* 2fr 1fr 1fr */
grid-template-rows: 2fr 3fr;
}
.item {
border: 1px solid black;
}
.item1 {
background-color: aquamarine;
grid-column: 1/3;
}
.item4 {
background-color: cadetblue;
grid-column: 2/3;
}
.item2 {
background-color: chartreuse;
}
.item3 {
background-color: deeppink;
}
.container {
margin-top: 50px;
display: grid;
}
.header {
background-color: coral;
height: 100px;
}
.item__container {
display: grid;
height: 300px;
grid-template-columns: repeat(4, 1fr);
}
.menu {
background-color: yellow;
}
.items {
background-color: violet;
grid-column: 2/5;
}'web > html css' 카테고리의 다른 글
| [패스트캠퍼스] 국비지원 3일차 학습일지 (0) | 2023.05.07 |
|---|---|
| [css] 반응형 Layout (0) | 2023.03.20 |
| [css] html 요소에 애니메이션 주기 (0) | 2023.03.19 |
| [css] position (0) | 2023.03.19 |
| [css] 배경과 색상 (0) | 2023.03.10 |