들어가기 전에
웹페이지의 레이아웃을 float 속성을 중심으로 어떻게 만드는지 실제 코드구현 과정을 이해합니다.
학습 목표
- float로 웹사이트의 레이아웃을 구성할 수 있습니다.
핵심 개념
- float
- layout
학습하기
기본배치를 한 이후에 필요한 부분을 float를 사용해서 좌/우로 배치하는 것이 일반적입니다.
비율조정은 %를 사용해서 배치할 수도 있습니다.
실습코드
html
css
생각해보기
- 레이아웃을 배치하는데 flex라는 속성도 있습니다. flex 속성은 많은 기능을 제공하지만, 간단히 좌/우로 배치하는 방식이 어떻게 구현하는지 찾아봅니다.
- float와의 차이점을 느껴보세요.
* Flex 관련 reference :
https://heropy.blog/2018/11/24/css-flexible-box/
* reference :
https://www.edwith.org/boostcourse-web/lecture/16678/