float 속성 3 - 레이아웃 연습 1~5

이번에는 float 속성을 활용한 박스 정리를 해 보도록 한다.

레이아웃을 위해 정리하는 방법이기도 하다.

(최근 flex, grid  등이 대두되기 때문에 이를 활용하는 방법은 앞으로 정리해 나가도록 하겠다.)

 

위치와 여백인 float속성과 margin, padding을 활용하여 정리한다.

 

1. 첫번째 레이아웃에서는 3행으로 만들어 정리

 

See the Pen poJpaoe by LimsUIUX (@LimsUIUX) on CodePen.

2. 두번째 레이아웃에서는 2행만 2단으로 정리

 

See the Pen YzXYezg by LimsUIUX (@LimsUIUX) on CodePen.

3. 세번째 레이아웃에서는 2행만 3단으로 정리

 

See the Pen QWbaQwK by LimsUIUX (@LimsUIUX) on CodePen.

4. 네번째 레이아웃에서는 좌측에 1행 aside, 우측에 3행 header, section, footer를 정리

 

See the Pen JjdMpoB by LimsUIUX (@LimsUIUX) on CodePen.

 

5. 다섯번째 레이아웃에서는 

See the Pen UI/UX Design by LimsUIUX (@LimsUIUX) on CodePen.