LearnFit

 YouTube, CSS Flexbox Tutorial #3 - Flex Grow

서원석님의 학습노트

[CSS - 요약] Flex Grow

#전체

#개발자

#프론트엔드

#css flexbox practical examples

#css flex property

#css flexbox layout

#flexbox tutorial

#flexbox css

#flexbox layout

#flexbox tutorials

#css flexbox tutorials

#css flexbox

#css flexbox tutorial

#flex grow

#flex-grow

#css flex-grow

#css flex grow

#flexbox grow

#flexbox flex grow

#flex-grow tutorial

#flex grow tutorial

00:00영상 시작 전 배경 지식: flex-grow는 flex-item인 경우에만 사용할 수 있는 CSS 속성입니다. flex-item이 되려면 부모가 display: flex여야합니다. 그러면 바로 15초로 건너뛰어볼까요?

00:15영상 시작 00:20까지 듣고 멈춰주세요. 그리고 해당 노트를 읽어주세요. 간략한 코드 설명: display: flex인 container가 세 개의 flex-item(box)을 하위에 두고 있습니다. 각각의 box는 빨강, 파랑, 초록색이니 색으로 구분해주세요. *box의 width, height는 전부 100px입니다. 해당 학습노트는 영상으로 예시를 확인하고 노트로 원리를 설명합니다. 노트의 원리 설명 때 영상과는 다른 예시를 들어 설명하니 이 점 참고해주세요. *노트를 다 읽으셨으면 01:29로 skip 🏃‍♂️ 해주세요.

01:2901:34까지 영상을 시청해주세요. 그리고 해당 노트를 집중해서 읽어주세요. flex-grow: 1을 box에 적용 *참고로 flex-item의 flex-grow default value는 0입니다. flex-grow: 1을 입력하니 세 개의 box가 container의 남은 공간을 같은 비율로 가득 채우고 있습니다. 간략한 원리 설명: 예를들어 width가 1000인 flex-container(display가 flex면 flex-container)가 있고 그 하위에 각각 width가 100인 5개의 flex-item(flex-container의 하위에 위치하면 flex-item)들이 있다고 가정해볼게요. flex-grow는 flex-item들의 width의 합이 flex-container의 width보다 작을 때 동작하는데요, 현재 flex-container의 width가 5개의 flex-item width 합보다 500 더 크죠? 이 500에 대해 item들이 grow의 비율만큼 추가 width를 확보하게 되는 것입니다. 만약 5개의 flex-item이 전부 flex-grow: 1일 경우, 남은 500에 대해 1:1:1:1:1 비율로 자신의 width를 확장하려고 할 것입니다. 즉 200(100+100), 200(100+100), 200(100+100), 200(100+100), 200(100+100)이 되면서 width의 합이 1000이 되는 것이죠. *이 노트를 다 읽으셨다면 03:07으로 skip🏃‍♂️ 해주세요

03:07세 개의 box에 대해 각각 flex-grow: 1, flex-grow: 2, flex-grow: 3 적용 세 개의 box가 container의 남은 공간을 1대2대3 비율로 가득 채우고 있습니다. 간략한 원리 설명: flex-container와 flex-item들의 width 여백 공간이 660px일 때 1:2:3으로 크기를 나눠가지면 110, 220, 330이 됩니다. 즉, 첫 번째 박스는 210(100+110), 두 번째 박스는 320(100+220), 세 번째 박스는 430(100+330) 가로 크기를 가지게 됩니다. container의 크기가 커지고 작아짐에 따라 box들의 크기도 같이 커졌다가 작아지겠지만 여백의 크기를 나눠갖는 비율은 1:2:3으로 유지 될 것입니다. *여기까지 학습 하셨다면 학습노트를 나가셔도 좋습니다 👍

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기