레이아웃을 만들기

레이아웃 만들기

레이아웃을 만드는 방법에는 float를 이용한 방법, flex를 이용한 방법, grid를 이용한 방법이 있다.

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

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

float를 이용한 레이아웃 코딩(1) : clear: both;

float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있다. 이를 해결하기 위한 방법 중 하나는 footer에 clear: both;를 작성하는 것이다.

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

float를 이용한 레이아웃 코딩(2) : overflow: hidden;

float를 이용하여 레이아웃을 만들면 footer의 height가 0이 되는 버그가 있다. 이를 해결하기 위한 두번째 방법은 float를 적용하는 요소의 부모 요소에 overflow: hidden;을 작성하는 것이다.

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

float를 이용한 레이아웃 코딩(3) : 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 Untitled by hjkang306 (@hjkang306) on CodePen.

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

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

---

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

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

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

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

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

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

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