CSS 레이아웃의 역사
1. 테이블 기반 레이아웃
본 목적과 다르게 테이블로 레이아웃을 만들던 시대.
여백을 투명한 GIF 이미지로 만듬.
테이블 border을 0으로 두고 이미지와 텍스트를 넣어서 배치
2. 프레임 기반 레이아웃
여러장의 HTMl 페이지를 '프레임'을 사용하여 한 페이지에 결합해 레이아웃을 만듬
3. 플로트, 포지션 기반 레이아웃
float, clear, position, Box Model 등을 사용하여 레이아웃.
브라우저 특성(버그)에 기반한 비논리적 방법이 난무함
4. 플렉스 박스 레이아웃
플렉시블 박스 모델을 사용하면 컨텐츠를 균등하게 분배하고 사용 가능한 공간 활용.
다만 X축 또는 Y축. 한쪽 방향으로만 설정 가능한 자유도가 낮은 레이아웃 기법
5. CSS 그리드 레이아웃
CSS 그리드 레이아웃 시스템은 HTML 마크업 순서와 무관하게 내부에 포함된 자식 아이템을 그리드 내부 어디든 위치 시킬 수 있음.
X그리고 Y축 양쪽 방향 모두 설정 가능한 자유도가 높은 레이아웃 기법
Grid의 W3C Process Document 상태: CR(Candidate Recommendation)
브라우저 호환성: IE뿐만 아니라 Edge 15 이하 버전에서는 -ms- 라는 prefix를 붙여야 사용 가능.
grid-template-columns | -ms-grid-columns
grid-template-rows | -ms-grid-rows
grid-row-start | -ms-grid-row
grid-column-start | -ms-grid-column
align-self | -ms-grid-column-align
justify-self | -ms-grid-row-align
엣지 15이하 환경 호환을 위해 구현된 속성
Autoprefixer
플러그인을 사용하면 grid를 표준속성/ms의 비표준 속성으로 치환해줌.
이걸 쓰면 IE 10까지는 지원 가능함.
Grid 속성 설정
