컴포넌트(Component)

컴포넌트는 Angular 애플리케이션을 구성하는 기본 구성 단위입니다. 컴포넌트는 다음과 같이 구성됩니다:

• TypeScript 클래스
• HTML 템플릿
• CSS 스타일

참고: 컴포넌트 핵심 가이드 문서를 참고하세요.

이번에는 컴포넌트의 템플릿과 스타일을 직접 수정해 봅시다.

미리 작업할 수 있는 앱을 준비해뒀습니다.

1. 컴포넌트 템플릿을 수정하세요

   template 프로퍼티를 수정해서 Hello Universe 로 바꿔보세요.

         
   template: `  Hello Universe`,
       

   수정한 HTML 템플릿이 미리보기 화면에 제대로 표시되는지 확인해 보세요. 이제 텍스트 색상을 변경해 봅시다.

2. 컴포넌트 스타일을 수정하세요

   color 프로퍼티 값을 blue에서 #a144eb 로 변경해 보세요.

         
   styles: `  :host {    color: #a144eb;  }`,
       

   그리고 미리보기 화면에 텍스트 색상이 제대로 변경되었는지 확인해 보세요.

브라우저가 지원한는 CSS, HTML 기능은 Angular 앱에도 모두 사용할 수 있습니다. 그리고 템플릿과 스타일은 별도 파일로 저장할 수 있습니다.