IT 회사에서 즐겁게 지내기!

명절 이후 한동안 게을러졌습니다.

다시 마음을 잡고, Application에 모양을 좀 내볼까 합니다.

사이트 상단에 늘 떠있는 제목을 한 번 만들어볼게요.

이번에도 Material 디자인을 이용합니다.

header라는 컴포넌트를 하나 만듭니다.

복습차원에서 되짚어보자면 명령어는 아래와 같습니다.

ng generate component header (ng g c header)

app.component.html에 header 컴포넌트를 넣어줍니다.

<app-header></app-header>
<app-budget></app-budget>

MatToolbar를 사용하기 위해 Module을 import 하구요.

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
    ...,
    imports: [
        MatToolbarModule
    ],
    ...
})
export class AppModule { }

이제 header 컴포넌트를 작성해봅니다.

mat-toolbra라는 태그를 사용합니다.

<mat-toolbar color="primary">
  <span class="application-title">Daily Account Log</span>
  <span class="fill-remaining-space"></span>
  <span>To be added</span>
</mat-toolbar>

색상은 지정하지 않으면 기본적인 배경색인데요.

저는 primary라는 값을 넣었습니다.

mat-toolbar는 기본적으로 flex row 형태의 display를 사용합니다.

좌측에 타이틀 우측에 메뉴 영역을 배치해보겠습니다.

header.component.css에 스타일을 넣어볼게요.

.application-title{
    font-size: 20px;
}
.fill-remaining-space {
    flex: 1;
}

위처럼 넣으면 가운데 영역이 채워집니다.

결과물은 아래와 같습니다.

angular material toolbar 적용

실제 적용해보면 상단, 좌, 우에 하얀 테두리가 보일 수 있습니다.

body에 기본적인 margin과 padding이 들어있어서 그렇습니다.

style.css 에 body의 margin, padding을 없애주면 됩니다.

body{
    margin: 0;
    padding: 0;
}

소스주소: https://github.com/jsrho1023/account-book