CSS 중급

레이아웃 리셋(기본 스타일링을 제거하는 CSS코드)

*{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}

Flexbox로 레이아웃 잡기

1. Flexbox로 레이아웃 잡기

****flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

display: flex 분석하기

****부모 박스요소에 display: flex를 적용해, 자식 박스의 방향과 크기를 결정

****기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치

1. Flex 요소에 방향 지정하기 (flex-direction)

****flex-direction 속성은 부모 박스요소에 적용 ex) flex-direction : column;

1. 반드시 알아두기: grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

• grow: 자식 박스는 얼마나 늘어날 수 있을까요?

flex-grow 속성에 적용하는 값은 비율을 의미

모든 자식 박스의 flex-grow 속성이 0보다 큰 값을 동일하게 가지는 경우,

각 박스의 가로길이는 동일한 비율을 가짐

• shrink: 자식 박스는 얼마나 줄어들 수 있을까요?

shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐

flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않음(flex-grow 속성을 사용한다면 flex-shrink는 1로 고정)