> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/web-layout-history.md).
# 웹 레이아웃 기술 발전사
## 레이아웃이 없던 초창기
웹이 창궐한 초창기, 레이아웃을 위한 디자인 방법은 별도로 없었고 제한적인 텍스트 디자인만 가능했습니다.
## 테이블 레이아웃
테두리(border)를 투명하게 설정한 테이블을 사용해 멀티 컬럼 디자인이 시작되면서 웹 레이아웃이 발전하게 되는 시기입니다. 하지만 테이블을 사용하는 본래 목적을 망각하고 행/열 구조 안에 이미지를 채워 넣는 방법으로, 오늘 날 더 이상 사용 되지 않습니다.
## 프레임 레이아웃
테이블 레이아웃에 프레임 기술이 합쳐진 방법으로 여러 장의 HTML 문서를 결합해 하나의 문서를 만들어 사용했습니다. 이 방법이 한 때 사용된 이유는 페이지의 공통 부분을 분리, 효율적으로 관리하는 데 있었습니다. 하지만 Ajax 비동기 통신 기술의 발전으로 오늘 날 더 이상 사용 되지 않습니다.
## CSS 레이아웃
웹 표준 시대가 태동 하면서 더 이상 구조 언어인 HTML에서 레이아웃을 하지 않고, 표현 언어인 CSS가 제공하는 본연의 레이아웃 기술인 `float`, `position` 을 사용해 웹 레이아웃을 만들어 내기 시작했습니다. 오래된 레이아웃 기술 임에도 여전히 많이 사용 되고 있는 방법이지만, 모바일 시대에 접어들면서 멀티 스크린에 대응하는 디자인을 만들어 내기에는 적합하지 않습니다.
## Flexbox 레이아웃
다양한 모바일 환경에 대응하기 위해 등장한 레이아웃 기술로 유연한 박스(Flexible Box)를 사용할 수 있는 방법을 제공합니다. X축 또는 Y축 방향으로 요소를 배치, 정렬 할 수 있으며 각 요소의 순서를 변경할 수 있어 기존의 레이아웃 기술 대비 자유도가 높아졌습니다. 그리드 프레임 워크 [Bootstrap](http://getbootstrap.com/docs/4.1/layout/grid/)에서 사용하는 기반 기술입니다.
## Grid 레이아웃
그리드 시스템을 언어 차원에서 지원하면서 더 이상 기존의 그리드 프레임 워크를 사용할 필요가 없어졌습니다. 행/열 격자 구조에 요소를 자유롭게 배치할 수 있을 뿐더러 반응형 웹 레이아웃 대응도 가능해 더욱 각광 받는 레이아웃 기술입니다.
