멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day

📖 오늘 학습 내용

1. flex

2. grid

1. flex

1). flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성이다. 왼쪽 상단 첫 번째 이미지에서 "Good job" 아이템은 grow:1, "A" 아이템은 grow:1, "Hello world" 아이템은 grow:2 이다.
2). flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성이다. 줄어든 화면이 100px 이고, 각 flex 아이템에 flex-shrink: 1;, flex-shrink: 3; 이라면 shrink 1은 25px 만큼 줄어들고 shrink 3은 75px 만큼 줄어든다.
3). flex-basis 는 flex 아이템의 크기를 정한다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈다. 맨 오른쪽에 있는 사진처럼 flex-grow: 0;이라면 해당 flex 아이템의 전체 너비로 정해진다.
4) 축약

flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */

2. grid

🕵️‍♀️ grid란?
웹페이지를 체스판처럼 격자로 나눠 그리드 아이템들을 배치하는 속성이다.
flex처럼 grid도 그리드 컨테이너에 display:grid를 사용하여 자식인 grid 아이템 위치를 컨트롤할 수 있다.

grid-template-columns: 25% 25% 25% 25%;
grid-template-columns: repeat(4, 25%);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);

위 소스코드는 부모인 grid 컨테이너에 사용한 속성이다.
grid-template-columns 와 grid-template-row를 사용하여 행열 격자 사이즈와 개수를 정한다.
grid-template-columns: 25% 25% 25% 25%; 는 부모 너비의 25% 씩 4개의 열이 만들어진다.
grid-template-columns: repeat(4, 25%); 는 결과적으로 위에 25% 25% 25% 25%와 동일하다.
grid-template-columns: repeat(4, 1fr); 는 4개씩 1fr 비율로 열 격자가 만들어진다.

---

위에는 grid container에 적용하는 속성이었다면, 아래는 grid item에 적용하는 속성이있다.

grid-column: 2/3;
grid-row: 3/4;
grid-area: 1 / 2 / 3 / 4;

이미지를 보면서 첫 번째 소스코드부터 살펴 보도록 하자!
grid-column: 2/3;은 사진속 2번 item 위치.
grid-column: 2/4;라면 사진속 2번부터 3번 item 위치.
grid-row: 3/4;은 맨 왼쪽하단 item 위치.
grid-area: 1 / 2 / 3 / 4; 은 row-start / column-start / row-end / column-end 으로 위에 코드를 축약해서 사용할 수 있다. 사진속 2, 3, 5, 6번 item 위치다.

.item:nth-child(1) {
/* 1번 라인에서 2칸 */
grid-column: 1 / span 2;
/* 1번 라인에서 3칸 */
grid-row: 1 / span 3;
}

span을 사용하여 몇 개의 셀을 차지하게 할 것인지 영역을 지정할 수 있다.

✍ 메모

grid 속성을 사용하게 될 경우, 먼저 구조를 그린 다음 그리드 컨테이너에 grid-template-columns / rows 사용하여 격자를 적용시킨다.