flex 소개

flex

- 레이아웃을 잡을 때 쓰는 기능

 

레이아웃(Layout)이란?

- 콘텐츠를 잘 정리정돈해서 구조화 시키는 것

 

레이아웃의 흑역사?

코드로 잘 표햔하는 방법에 잘 모름

-> 테이블 태그를 이용함

: table 태그는 구조화된 정보, 많은 정보를 정리정돈하기 위한 정보로서의 의미를 가지는데, 그것을 의미가 없는 레이아웃을 사용하니 그 테이블이 표로 사용한건지, 레이아웃으로 사용한건지 알 수 없음. 또한, 복잡하고 코드양이 많기 때문에 나중에 변경하는 것이 어려움

- 이 외에 position, float 등이 존재했지만 해결 X

- 후에 flex가 등장함. 

 

flex 준비

- flex 사용하기 위해선 태그가 두 단계가 필요함

- 정렬하고자하는 그 각각의 item들은 부모에 해당되는 container가 필요하다.

-> 컨테이너의 역할을 하는 태그와 자식의 역할(정렬의 대상)을 하는 태그가 필요함

-> 목록 태그의 ol, ul, li와 비슷한 맥락이다.

- 컨테이너에게 부여해야하는 속성들이 존재하고, 아이템들에게 부여해야하는 속성이 구분되어있다.