[CSS] 레이아웃

Layout

레이아웃은 텍스트, 이미지 및 기타 콘텐츠에 배치되고 웹페이지에 정리되는 방식이다. 레이아웃은 페이지에 시각적 구조를 배치하여 콘텐츠를 배치한다. 

레이아웃을 만든다는 것은 페이지 요소를 단순히 배치하는 대신 시각적 구조로 구성하는 것을 의미한다.

 

 

• 페이지 레이아웃(page layout) 과 구성 요소 레이아웃(component layout)

웹 페이지 내부의 큰 콘텐츠, 웹사이트는 요소를 배치하는 시점까지이다. 더 확대한 그림은 구성 요소 자체가 더 작은 콘텐츠로 구성 요소 레이아웃으로 되어 있다. 

---

CSS 빌드하는 3가지 방법

 

Float Layouts

레이아웃을 구푹하는 오래된 방법, float css를 사용

flexbox, CSS Grid같은 최신 기술로 대체되고 있다.

오래된 웹사이트에서는 여전히 사용되는 방법이다.

 

 

Flexbox

요소를 배치하는 최신의 방법 중 하나

Flexbox는 1차원 레이아웃을 구축하는데 적합하다. floats를 사용하지 않고 단지 행인 레이아웃이다. component layouts에 적합하다. 

 

 

 

CSS Grid

완전한 2차 레이아웃을 구축한다. 큰 페이지의 레이아웃과 complex components에 적합하다.