Flex Layout 사용하기

개요

Flex Layout 은 flexbox CSS 와 mediaQuery 를 사용하여 Angular 에서 반응형 레이아웃을 쉽게 만들 수 있는 API 를 제공하는 모듈입니다. 반응형 레이아웃은 웹사이트에 접속하는 기기의 화면의 크기에 따라 레이아웃이 변경되는 것을 말합니다.

다음과 같이 동일한 https://angular.io/ 사이트를 접속하였을 경우라도 PC(위) 와 모바일 기기(아래)로 각각 접속한 화면 구성이 서로 다르다는 것을 확인할 수 있습니다. 모바일 기기의 화면이 PC 화면에 비하여 너비가 좁으므로 메뉴등이 화면에 표시되지 않고 삼선(三) 단축아이콘으로 축소되었음을 확인할 수 있습니다.

▼ https://angular.io (PC 접속)

▼ https://angular.io (모바일기기 접속)

이는 별도의 웹사이트를 구축한 것이 아닌 접속 기기의 종류를 확인하여 그에 맞추어 사전에 정의되어 있던 웹사이트의 레이아웃중 가장 최적화된 것을 화면에 보여주기 때문입니다.

이를 Angular 에서 쉽게 이용할 수 있도록 flex-layout 모듈을 설치해보도록 하겠습니다.

설치 및 설정

사전에 만들어 놓은 Angular Project 폴더에서 아래의 명령어를 입력합니다.

$ npm install @angular/flex-layout --save

FlexLayoutMoudule 을 app module 에서 사용할 수 있도록 import 합니다.

▼ src/app/app.module.ts

...
import { FlexLayoutModule } from "@angular/flex-layout";  // ← 추가

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule	// ← 추가
  ],
  ...
})
export class AppModule {}

참고 및 출처

• Using Angular CLI · angular/flex-layout Wiki