[웹 레이아웃 기술 발전사]
레이아웃이 없던 초창기
- 레이아웃을 위한 디자인 방법이 없었을 때, 제한적인 텍스트 디자인을 사용
테이블 레이아웃
- 테두리(border)를 투명하게 설정한 테이블을 사용해 멀티 컬럼 디자인이 시작
프레인 레이아웃
- 테이블 레이아웃에 프레임 기술이 합쳐진 방법, 여러 장의 HTML 문서를 결합해 하나의 문서를 만듦
- 페이지의 공통 부분을 분리, 효율적으로 관리할 수 있게 됨
- Ajax 기술의 발전으로 사용되지 않음
CSS 레이아웃
- HTML을 구조 언어의 역할로만 사용, 표현 언어인 CSS가 제공하는 레이아웃 기술(float, position)을 사용해 레이아웃을 만듦
- 모바일 시대에 접어들면서 멀티 스크린에 대응하는 디자인을 만들기에는 부족함
Flexbox 레이아웃
- 다양한 모바일 환경에 대응하기 위한 레이아웃 기술
- X축, Y축 방향으로 요소를 배치, 정렬할 수 있으며 각 요소의 순서를 변경할 수 있어 기존의 레이아웃 기술 대비 자유도가 높아짐
- Bootstrap에서 사용하는 기반 기술
Grid 레이아웃
- 시스템을 언어 차원에서 지원하면서 더 이상 기존의 그리드 프레임 워크를 사용할 필요가 없음
- 행/열 격자 구조에 요소를 자유롭게 배치, 반응형 웹 레이아웃 대응도 가능
참고 - https://uid.gitbook.io/css-grid/