레이아웃 만들기 5

레이아웃05

이번 레이아웃은 전체 영역이 들어간 구조이며, 가운데의 콘텐츠 영역이 단순하게 나뉘어진 구조입니다. 실제 사이트에서 이런 구조를 많이 사용합니다.

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

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

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

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

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

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

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

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

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

grid에서 열의 3등분을 표현하는 다양한 방법

grid에서 열을 3등분으로 나누기 위한 표현법은 다양하게 있습니다. %를 이용하여 나누는 방법, 공간의 단위인 fr을 이용하여 나누는 방법, 반복을 뜻하는 repeat을 이용하는 방법 등이 있습니다. 이외에도 여러가지 표현법이 있으며, 자신에게 맞는 표현법을 사용하면 됩니다.

1) %를 이용하는 표현법
grid-template-columns: 33.333% 33.333% 33.333%;

2) fr을 이용하는 표현법
grid-template-columns: 1fr 1fr 1fr;

3) 반복을 뜻하는 repeat을 이용하는 표현법(repeat과 3등분을 나타내는 단위를 사용합니다.)
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, 33.333%);