2024.08.19, 20 (Day 14~15) - HTML/CSS [grid 그리드 레이아웃 II]

 

minmax()의 활용 
미디어쿼리에 독립적인 반응형 그리드 (auto-fill, auto-fit) 
그리드 아이템의 수동 배치 + 셀 병합 이해하기 
자동 배치 규칙 이해하기

 

---

◆ (day15/grid)

■  그리드 레이아웃

그리드 레이아웃 시스템은 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 작업이 이루어지며, 

자식 요소들에 추가적인 레이아웃 관련 작업이 최소화될 수 있게 설계 되었다.

그리드 컨테이너 (부모 요소) 집중식 레이아웃 관리: 그리드 컨테이너가 레이아웃의 중심이 된다. 

대부분의 레이아웃 정의와 조정이 그리드 컨테이너 (부모 요소) 수준에서 이루어진다.

자식 요소의 단순화: 개별 그리드 아이템(자식 요소)에 대한 직접적인 레이아웃 조작이 크게 줄어든다.
마크업 간소화: 레이아웃을 위한 추가적인 마크업 요소나 복잡한 중첩 구조가 필요 없어진다.

                        결과적으로 HTML 구조가 더 간결하게 구성 될 수 있다.
위와 같은 내용이 언제나 장점으로 발현되는 것은 아니다.

기존 방식대로, 개별 하위 아이템 위주로 레이아웃을 구성하는 것이 더욱 효과적일 때도 있다

 

부모와 직계자식으로 레이아웃 구성됨

 

 

 

▼ 요소에 고정너비이미지가 들어갈경우 (1fr)

자녀들 .frog에 min-width을 0으로 지정해줘서 최소너비를 제한한다 . 반대로 고정 높이 이미지가 들어갈 경우 .min-height 를 0으로 지정한다

 

■ minmax

CSS Grid 레이아웃의 가장 큰 특징은 레이아웃 관리의 중심이 부모 요소, 즉 그리드 컨테이너에 있다는 점이다.

이는 기존의 레이아웃 방식과 다른 새로운 접근이 필요한다.

◎ 기존 방식: 개별 요소마다 직접 크기, 간격을 지정하여 레이아웃 완성.
◎ 그리드 방식: 그리드 컨테이너(부모 요소)에서 대부분의 레이아웃 구조를 미리 정의.

 

이러한 접근 방식의 변화로 인해, 그리드 아이템(자식 요소)에 

직접적으로 min-width, max-width 등의 속성을 적용하는 것이 제한적이거나 불필요해질 수 있다.

minmax() 함수는 이러한 그리드 레이아웃의 특성을 고려하여 도입된 기능이다.

이 함수는 그리드 트랙(row 또는 column)의 최소 및 최대 크기를 지정할 수 있게 해준다.

 

- minmax() 함수의 주요 특징

▷ 트랙의 최소 크기와 최대 크기를 한 번에 지정

 

▷ fr 단위나 auto 키워드 등 그리드 전용 값 사용 가능

▷ 크기를 결정하는 다음 속성에서 사용 가능

     grid-template-columns
     grid-template-rows
     grid-auto-columns
     grid-auto-rows

 

 

■ minmax 사용 예시

▼   minmax(0 , 크기) 개념으로 min-width:0, min-height 으로 초기화해주는 기법 구현

       그리드 컨테이너에서 안정성 확보한다.

       

colums,rows 기준 min값(0)과 max값(1fr)

.frog에 min-width 0을 직접적으로 따로 지정하지 않아도 minmax 기법으로 적용됨

 

결국 min-width: 0 대용으로 사용한 예시이다

우리는 기존 Flexbox 레이아웃에서, Flex Item의 min-width가 내부 콘텐츠 크기 만큼으로 강제되는 점을 알고있다
내부 콘텐츠의 크기가 상위 요소에게 영향을 끼치지 않게 하기 위해 min-width: 0기법을 사용하는 사례도 알고있다.그리드 레이아웃에서도 해당 개념이 동일하게 나타나게 된다
이때 minmax() 함수를 활용하여 min-width: 0 또는 min-height: 0 기능을 수행 할 수 있게 할 수 있다.

 

▼ repeat 방식을 사용하여 단축속성 작성가능

    repeat() 함수는 그리드의 row(행)이나 column(열)을 반복적으로 생성할 때 사용한다.

 

 

 

---

◆ (day15/coffee)

그리드 방식으로 레이아웃만 구성해보기

 

 

 

 

  전체 뷰포트 기준으로 중앙으로 위치하고 가로기준으로도 중앙정렬 한다   즉 전체 그리드 컨테이너에서 가로 세로 중앙 정렬

 

 

rows 지정

 

 

▼ 창 크기 작아졌을때 좌우 패딩 확보하고 창 크기에 따라 변화가 있어야 하므로 minmax 지정하여 max-width로 변화

 

▼ 첫번째 열은 244px 고정하고 두번째 열은 min-width도 0으로 초기화, max-width 830px으로 하여

    상황에 따라 작아즐 수 있게 만든다. 즉 고정값이 아니게 변경

minmax 적용 후 화면 사이즈 조절 (max-width처럼 적용되어있다)

 

 

 

▼ 행 값도 마찬가지로 minmax 적용 해준다.

 

▼ 내부 콘텐츠가 컨테이너보다 많아지면 전체 높이가 자연스럽게 늘어나게 변경하기위해 min-hight vh값주고

min-heigh 100vh에 상하단 패딩이 포함되면 스크롤바가 생기니 

boderbox로 100vh에 상하단 패딩이 포함될 수 있게끔 조정해준다

이토록 minmax 적용함으로써 컨텐츠 양을 늘리면 유연하게 늘어난다.

 

 

 

---

◆ (day15/dosirac)

 

▼ 위 사진처럼 flex 박스나 그리드로 만들 수있다.

 

▼그리드 작업을 하기위해 .tong 에 column 개수 3개이고 rows 개수는 2개임을 확인한다

repeat 속성 값으로 변경할 경우 repeat(3,1fr); 안정성을 높이자면 minmix 적용한다 repeat(3,minmax(0,1fr));

 

▼ 미디어 쿼리를 적용하여 화면 작고 커질때의 변화를 고정시키기는 방법이 있는데 

원래는 repeat에 속성값이 반복 횟수와 트랙 크기이지만

 

굳이 반복횟수의 숫자를 작성하지 않아도 

auto-fill, auto-fit등의 키워드와 함께 사용한다면 트랙 크기에 따라 자동으로 반복 횟수가 결정 되게 할 수 있다.

 

즉 200px 기준에서 repeat의 숫자가 결정 + 남는 공간을 채워주는 1fr을 적용하였다.

 

auto-fill 키워드는 아이템의 갯수가 부족하여 하나의 row만 존재하는 상황일 때 의미가 있다.

최소 크기인 200px을 기준으로 사이즈를 결정하고, 나머지 공간을 같은 크기의 빈 셀로 채우게(fill) 된다. 
auto-fit은 빈 셀을 만들어 내지 않는다.

 

 

■ 셀 병합

▼ 이제 이 상태로 셀병합이 되어야한다. 

 

 

▼ fist-child를 사용하여 시작과 끝나는점을 열 번호로 통해서 결정 할 수있다 (셀병합)

 

 

 

---

◆ (day15/square-grid)

내부 그리드만 적용해보기

 

 

▼ 정사각형 만들고 내부에 그리드 적용해보기

 

 

 

▼ column 4개, rows 4개 확인 및 구성

 

 

 

 

■ 자동 배치 규칙 이해하기 

그리드 아이템은 미리 예약 되어있는 템플릿을 기준으로 자동 배치 된다. 

이 자동 배치 규칙은 grid-auto-flow속성을 통해 결정된다.

 

▼ grid-auto-flow속성과 값 이해하기

1. row (초기값)
grid-template-column에 지정된 칸을 모두 채움으로서 한 row가 가득차게 되면, 다음 row가 시작되는 배치이다. 

만약 grid-template-column이 지정된 바가 없다면 하나의 column에 여러 개의 row로 이루어지게 된다.

2. column
grid-template-row에 지정된 칸을 모두 채움으로서 한 column이 가득차게 되면, 다음 column이 시작되는 배치이다. 

만약 grid-template-rows가 지정된 바가 없다면 하나의 row에 여러 개의 column으로 이루어지게 된다.

3. dense
row dense 또는 column dense 로 표현 할 수 있다.

단순히 dense라고만 작성하게 되면 row dense를 의미한다.
dense는 마크업 작성 순서 기준 배치에 의해 생긴 빈 셀 공간을 최대한 채우는 방식이다.

 

 

▼ 만약 16by16 정사각형 유지 되던 중 하나가 추가될경우

이 사이즈는 grid-auto-rows로 결정된다.

 

▼ grid-auto-flow는 각각의 아이템이 추가되다가 더이상 추가 할 수없으므로 새로운 row 또는 column을 만든다

왼쪽이 속성값 column 오른쪽이 속성값 row

 

 

▼ 아이템을 column start 사용하여 한칸 옮겨보면

하나의 요소 6이 이동되었을때 자연스레 공간이 생기는데 7이 빈공간을 차지하면

마크업순서와 시각적인 결과가 달라지게 된다. 즉 마크업 순서가 적용 되는게 당연하다.

빈공간은 병합이나 다른 방법으로 채울 수있다. (이후에 설명)

 

▼ 속성 값을 1로 바꾸면 이렇게 셀이 난잡하게 바뀌는데

이러한 이유는 위에서 정답이 이미나왔다

그렇기에 브라우저가 알아서 마크업 순서에 유지되게 적용해준것

(grid-row-start의 기본값은 auto로 지정되어있는 상태에서 예시임)

"  마크업순서와 시각적인 결과가 달라지게 된다. 즉 마크업 순서가 적용 되는게 당연하다. "

 

▼ 만약 auto에서 속성값을 2로 정확한 위치를 주면 6번부터 먼저 배치하게 되고 나머지 빈공간을 채워준다

만약 column, row 모두 정확한 지점을 명시하였다면 해당 요소부터 위치 지정하고 나머지 요소들이 마크업 기준에서 배치한다

 

▼ column을 auto로 주고 row 속성값을 준다면 빈칸이 생기지 않고

cloumn auto는무조건 1로 계산되기때문에 3행1열로 간다

어지럽다

 

■ 마크업 작성 순서 기준 (grid-auto-flow: row 기준으로 명시)

자동 배치는 기본적으로 마크업 작성 순서를 기준으로 결정 된다.
만약 특정 그리드 아이템의 위치를 바꾸기 위해 grid-column 또는 grid-row 등과 같은 속성을 부여하게 된다면 

해당 요소는 가장 우선적으로 배치 고려 대상이 된다.

1. grid-column과 grid-row를 모두 명시적으로 (초기값 auto가 아닌 값으로) 지정 하였을 때
   정확한 좌표를 가지고 있으므로 해당 요소는 정확한 위치에 배치되며, 나머지 요소들은 빈 공간을 채우게 된다.

2. grid-row만 명시적인 값일 때 지정한 grid-row위치로 배치가 된다. 

반면 column위치는, grid-column: auto에 의해 가능한 한 가장 첫번째 column 위치 (1) 로 결정 되게 된다.

3. grid-column만 명시적인 값일 때 정해진 grid-column값으로 이동 되게 된다.

이때 마크업 순서로 배치되는 특성을 유지하려고 하기 때문에 grid-row: auto에 의해 row 위치가 변할 수 있다.

이때 빈 셀 공간이 생기는 상황이 발생한다.

 

이외에도 각 그리드 아이템의 다양한 특성에 따라 예기치 못한 빈 공간이 생길 수 있다.

grid-auto-flow: dense를 이용한다면 이러한 예외 상황에 대응이 가능하다.

 

이외에도 각 그리드 아이템의 다양한 특성에 따라 예기치 못한 빈 공간이 생길 수 있다.
grid-auto-flow: dense를 이용한다면 이러한 예외 상황에 대응이 가능하다.

 

▼ 병합은 아까 했던 방법으로 start와 end 방식으로 한다

 

▷ start end 단축속성 

 

 

▼ square-grid 예제에 실제 적용하기 (첫번째 방법:고정값 지정)

 

 

▼  square-grid 예제에 실제 적용하기 (두번째 방법:auto)

     시작점은 auto로 두고 span만 사용하여 적용하지만 불안요소는 딱 정확한 시작점이 정해진게 아니기에

    예외적인 상황이 오면 전체가 이동 할 수있는 변수가 있을 수도 있다.

 

▼  square-grid 예제에 실제 적용하기 (9와 10 병합)

 

 

▼ 이미지 적용 및 정리