09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기

일반적으로 신문을 보면 텍스트 단이 여러 개로 나뉘어 있는데 웹 문서에서도 이렇게 다단으로 편집할 수 있다

다단칼럼으로 그리드 형태 만들기

09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기

앞에서 살펴본 CSS 다단 칼럼은 원래 그리드 레이아웃을 위한 용도가 아니라 웹 화면을 여러개의 단으로 나누어 표시하기 위한 것이다 다양한 형태의 그리드 레이아웃을 만들려면 jQuery 플러그인을 사용하는 것이 편리하다.

VGrid 플러그인을 사용한 카드 UI

vGrid 플러그인 외에도 그리드 레이아웃을 만들어주는 jQuery 플러그인은 아주 많다

그중에서 자주 사용하는 플러그인은 다음과 같다

09-3 플렉스 박스 사용하기

반응형 웹 디자인을 구현하는 다른 방법은 플렉스 박스를 사용한 플렉스 박스 레이아웃이다

반응형 레이아웃을 CSS만으로 구현하는 것은 쉽지 않은데, 플렉스 박스를 사용하면 화면을 분할하고 배치하는 것이 쉬워진다

플렉스 박스 레이아웃

플렉스 박스 레이아웃이란 그리드 레이아웃을 기본으로 해 플렉스 아이템을 원하는 위치에 배치하는 것이다

플렉스 박스 레이아웃은 플렉스 아이템의 크기뿐만 아니라 배치하는 방향과 순서, 정렬 방법, 간격 등을 제어할 수 있다.

플렉스 박스 레이아웃을 사용하려면 콘텐츠를 플렉스 컨테이너로 묶어줘야 한다 그리고 컨테이너 안에 플렉스 박스를 배치한다

플렉스 박스에는 이미지나 텍스트 등 웹 문서 요소들이 들어있고, 플렉스 박스는 주축을 따라 왼쪽에서 오른쪽으로 배치되고 주축의 끝점까지 닿으면 교차 축을 따라 아래로 이동한 후 다시 왼쪽에서 오른쪽으로 배치되는 방식을 사용한다

플렉스 박스 속성

display : 플렉스 아이템을 감싸는 요소를 플렉스 컨테이너로 쓰려고 할 때 사용하는 속성