Layout Components
레이아웃 컴포넌트는 페이지의 전체적인 레이아웃을 지정하여 해당 영역에 다른 컴포넌트를 배치하기 위해서 사용되는 컴포넌트이다.
Grid | 페이지 레이아웃을 설정하기 위한 컨테이너를 생성하는 컴포넌트. |
---|---|
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로 변경하게 됩니다.