04_Web-Floating_for_CSS_layout.md

Web - Floating for CSS layout

목차

1. Floats

학습 목표

• float 속성을 사용하여 요소를 왼쪽 또는 오른쪽으로 배치할 수 있다.
• float 속성의 동작 방식과 float된 요소가 주변 요소들과 상호작용하는 방식을 이해한다.

1. CSS Floats

• CSS Float
  • 요소를 띄워서 텍스트 및 인라인 요소가 그 주위를 감싸도롤 하는 배치
    • 왼쪽 혹은 오른쪽으로 띄워 Normal flow에서 벗어남
• Float 탄생 배경
  • 텍스트 열 내부에 떠다니는 이미지를 포함하면서도 해당 이미지의 좌우에 텍스트를 둘러싸는 간단한 레이아웃을 구현하기 위해 도입
  • ex) 신문 레이아웃
• 실습

99. 참고

• Float
  • Float는 원래 탄생 목적에서 더 나아가 웹 페이지 전체 레이아웃을 구성하는 데 사용되었으나, Flexbox와 Grid의 등장으로 인해 다시 원래의 목적으로 돌아감