Layout Components

레이아웃 컴포넌트는 페이지의 전체적인 레이아웃을 지정하여 해당 영역에 다른 컴포넌트를 배치하기 위해서 사용되는 컴포넌트이다.

Grid

페이지 레이아웃을 설정하기 위한 컨테이너를 생성하는 컴포넌트.
Grid 컴포넌트를 Drop 하면 다음과 같이 Row를 생성할 수 있는 영역이 생성됨.

Row

Grid내에 열을 생성하기 위한 컴포넌트로 Grid안에 Row 컴포넌트를 Drop하면 다음과 같이 Col을 생성할 수 있는 영역이 생성됨.

Col

Row내에 컬럼을 생성하는 컴포넌트로 다음과 같이 하나의 Row에 원하는 Col을 생성하고, 각각의 Col에 Container 컴포넌트나 Display 컴포넌트를 Drop하여 구성

ICE의 레이아웃은 ant.design의 레이아웃 체계(https://ant.design/components/grid/)를 따르고 있으며, 다음과 같은 특징이 있다.

  • 컬럼은 1~24의 숫자로 크기를 지정할 수 있으며, 브라우저 영역을 24등분으로 구분하여 영역을 설정한다.

  • 컬럼 사이즈 설정은 Bootstrap 미디어 쿼리를 기반으로 현재 화면 크기에 따라서 다음과 같은 단계로 지정 가능하다. XS(<576px), SM(>=576px), MD(>768px), LG(>992px), XL(>=1200px), XXL(>=1600px)

  • 예를 들어 다음과 같이 정의하고, 현재 화면 크기가 1200px 이라면 해당 컬럼은 400px로 표시되며, 화면사이즈가 800px로 변경되면 MD(>=768px)에 해당하기 때문에 해당 컬럼도 800px로 변경하게 됩니다.