레이아웃 만들기 3

레이아웃03

이 레이아웃은 가운데의 컨텐츠가 aside, section1, 2, 3으로 네개의 구역으로 나뉘어진 레이아웃입니다. 이런 복잡한 레이아웃은 grid방식을 사용하면 효율적으로 만들 수 있습니다.

1. float를 이용한 레이아웃 만들기

float를 이용하는 방법은 예전에 많이 쓰이던 방법입니다. 인터넷 익스플로러에 호환이 되기 때문에, 인터넷 익스플로러 사용자를 위한 레이아웃을 만들어야 한다면, 이 방법을 사용하도록 합니다.

float를 이용한 레이아웃 : clearfix

float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있습니다. 이를 해결하기 위한 방법 중 하나는 float를 적용하는 요소의 부모요소에 clearfix라는 가상요소를 만들어 clear: both;를 적용하는 것입니다.

See the Pen 레이아웃 float3 by hjkang306 (@hjkang306) on CodePen.

2. flex를 이용한 레이아웃 만들기

flex를 이용하면 float에 비해 훨씬 간단하게 레이아웃을 만들 수 있습니다. 이 방법은 인터넷 익스플로러 환경에서는 호환되지 않으므로 주의합니다.

flex를 이용한 레이아웃 코딩

See the Pen 레이아웃 flex3 by hjkang306 (@hjkang306) on CodePen.

grid를 이용한 레이아웃 만들기

grid를 이용하면 단순한 형태의 레이아웃은 flex보다 복잡한 코딩이 되겠지만, 복잡한 형태의 레이아웃은 flex보다 효율적으로 코딩할 수 있습니다.

grid를 이용한 레이아웃 코딩

grid를 이용한 코딩은 table을 만드는 것과 비슷합니다. 각 레이아웃의 구역을 나누어 너비와 높이를 지정합니다.

See the Pen 레이아웃 grid3 by hjkang306 (@hjkang306) on CodePen.