그리드 레이아웃 시스템 이해하기 minmax()의 활용 auto-fit, auto-fill 그리드 기법의 변화 예시
◆ (day14/grid)
<!DOCTYPEhtml>
<html>
<head>
<title>Grid</title>
<style>
body{
background-color: brown;
}
.playground{
border:10px solid maroon;
width:980px;
margin:0 auto;
border-radius:20px;
background-color: skyblue;
padding:10px;
}
.frog{
background-color: mediumseagreen;
color: lime;
font-size:40px;
border:6px solid green;
border-radius:10px;
}
</style>
</head>
<body>
<divclass="playground">
<divclass="frog">Frog</div>
</div>
</body>
</html>
또 다시 등장한 frog..
■ CSS Grid
그리드 레이아웃은 격자 형태의 템플릿을 미리 설정하여,
하위 요소들이 이 템플릿에 맞춰 자유롭게 배치되도록 하는 레이아웃 기법이다
격자의 형태는 부모 요소에서 정의되며,
격자의 개수와 크기가 통합적으로 설정되어 모든 하위 요소에 일괄적으로 적용된다.
◎ 2차원 레이아웃: 행과 열을 모두 동기화 되어 있음. ◎ 격자 기반: 부모 요소에서 정의된 격자(행과 열) 위에 하위 요소 배치 ◎ 자유도 높은 정렬 기능: 행/열 간격, 정렬 등을 간단하게 조정 가능
▷ 그리드 레이아웃의 주요 속성 - 그리드 컨테이너 속성 display: grid; - 그리드 컨테이너를 설정 grid-template-columns - 열의 개수와 너비를 정의 grid-template-rows - 행의 개수와 높이를 정의 grid-auto-flow - 그리드 아이템이 자동으로 배치되는 방식을 결정 (row, column 등). gap - 그리드 셀 간의 간격을 설정 (예: row-gap, column-gap).
- 그리드 컨테이너 정렬 속성 justify-content - 그리드 아이템 집합의 수평 정렬 방식을 설정. align-content - 그리드 아이템 집합의 수직 정렬 방식을 설정. justify-items - 그리드 아이템의 수평 정렬 방식을 설정. align-items - 그리드 아이템의 수직 정렬 방식을 설정.
- 그리드 아이템 속성 grid-column - 아이템이 차지할 열의 위치와 개수를 지정. grid-row - 아이템이 차지할 행의 위치와 개수를 지정.
▼ 그리드 행과열의 초기값은 none 이다.
틀을 만든다 (행과 열)
▼ 그리드의 width 개념(열)과 heigth 개념(행)의 초기값은 auto 이다.
▷ div가 추가가된다면 아무런 템플릿 행과 열이 지정된 것이 없기에 일반적으로 div 추가만 되어있는 것 을 볼 수있다.
▼ 한번 그리드의 시스템을 보기위해 열을 늘려보자면
auto auto가 왼쪽에하나 오른쪽에 하나 총 두개의 열을 만들었다
flex 관점에서 auto는 grow로 볼 수있다.
▼ auto라는 개념 자체가 내부 콘텐츠 크기 만큼이다.
stretch 늘어나는 부분이 있기에 grow랑 곂치는 부분이 있다고 볼 수있다.
▼ 만약 auto를 또 추가하면 3열로 늘어난다
재미있는 사실은 그리드 시스템은 내용이 추가되면 stretch 늘어나는 부분이 행 끼리 똑같이 늘어난다.
▼ 값을 auto 에서 fr단위로 적용해보면 stretch 없이 비율이 딱 맞게 적용 되는 것을 볼 수있다.
auto : column 기준에서 내부 콘텐츠 너비 + stretch (가득채움) fr : 그리드 컨테이너 너비 기준에서 내부 컨텐츠 관계없이 비율로 측정한다.
▼ auto rows (행)의 크기를 적용하여 늘릴 수 있다.
▼ 만약 높이 크기를 400px 고정 값을 주면 하위에있는 모든 아이템들이 당연히 크기가 400px만큼 늘어나는데
