웹01_240126수업(flex-grow) vscode설치

https://codepen.io/leenyooo/pen/QWoObxo

flex-grow

flex-grow는

flex-container 에 남아있는 공간을 각각의 flex-item이

n값만큼 나눠 가진다.

 

flex-item은 row값일때 width: auto = 0 이다.
flex-grow는 flex-item이 flex-container에 남는 공간을
사용하겠다는 의미를 가진다.

 

https://codepen.io/leenyooo/pen/BabmoNb

flex- grow비율 망가짐 방지(flex-basis)

flex-grow를 사용하게 되면 하위요소크기에 따라 비율이 달라진다.
방지하는 방법은 flex-grow와 flex-basis: 0;과 함께 사용하면 된다.
flex-basis: 0; 과 width: 0;은 비슷한 역할을 하게 되는데
반응형 구현할때 불편하기 때문에 width: 0; 말고
flex-basis: 0;을 활용하는것이 좋다.

 

vscode 설치시

3개 체크하고 다운로드(윈도우 기준)

 

플러그인 설치는 ko검색 후 한국어 설치

 

파일: 어떤 파일인지 구분하기 위해 확장자가 붙어있는 것들

폴더 : 파일을 정리할 수 있는 것들

vscode에서는 폴더를 열고 그안에서 파일을 만들어서 사용해야한다.

 

[확장자]

.jpg png psd exe txt html css 등등