flex

float보다 쉬운 레이아웃 속성.

container(감싸는 요소)에 display: flex를 적용시켜 flex를 시작한다.

item(자식요소)에는 세부적인 속성을 적용시킨다.

float

레이아웃 속성.

이미지+텍스트 경우, 이미지와 텍스트 요소에 각각 float를 주어 가로로 흐르듯 레이아웃을 구성한다.

그리고 자리 차지를 위해 width을 주어야 한다.

하지만 이미지 따로 텍스트 따로 구성하고 싶다면 float를 해제하고 싶은 요소에 clear를 준다. 

멀티 컬럼

컬럼의 스타일을 적용할 때 사용하는 속성.

container에 아래의 속성을 모두 필요한 것만 준다.

컬럼의 속성

column-count

column-width

컬럼과 컬럼 사이의 속성

column-gap

컬럼과 컬럼 사이의 선 속성

column-rule-style

column-rule-width

column-rule-color

*1시간 분량 강의*