멋쟁이사자처럼 프론트엔드 스쿨 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
사용하여 격자를 적용시킵니다.
Author And Source
이 문제에 관하여(멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aydenote/멋쟁이사자처럼-프론트엔드-스쿨-2기-13Day저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)