layout03

레이아웃

컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 레이아웃에는 float, flex, grid 3가지로 나뉜다.

레이아웃 01.float

float를 이용하여 가로로 배치할 수 있다. float은 레이아웃을 완성하기 위한 필수적인 속성이다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치할때 유용하다.

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.

레이아웃 02.flex

flex는 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것이다.

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.

레이아웃 03.grid

grid 행과열의 레이아웃 시스템을 제공 복잡한 레이아웃에 좋다.

See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen.