05 컴포넌트 스타일 03

컴포넌트 스타일 로딩

컴포넌트에 스타일을 추가하는 방법에는 여러 가지가 있습니다.

l  styles 또는 styleUrls 메타 데이터를 설정

l  템플릿 HTML에서 인라인.

l  CSS 가져 오기.

앞에서 설명한 범위 지정 규칙은 모든 로딩 패턴에 적용됩니다.

 

메타 데이터의 스타일

@Component 데코레이터에 styles 배열 프로퍼티를 추가 할 수 있습니다. 배열의 각 문자열(대개 하나의 문자열)은 CSS를 정의합니다.

src/app/hero-app.component.ts

@Component({   selector: 'hero-app',   template: `     <h1>Tour of Heroes</h1>     <hero-app-main [hero]=hero></hero-app-main>`,   styles: ['h1 { font-weight: normal; }'] }) export class HeroAppComponent { /* . . . */ }

 

메타 데이터의 스타일 URL

컴포넌트의 @Component 데코레이터에 styleUrls 프로퍼티를 추가하여 외부 CSS 파일에서 스타일을 로드 할 수 있습니다.

src/app/hero-details.component.ts

@Component({   selector: 'hero-details',   template: `     <h2>{{hero.name}}</h2>     <hero-team [hero]=hero></hero-team>     <ng-content></ng-content>   `,   styleUrls: ['app/hero-details.component.css'] }) export class HeroDetailsComponent { /* . . . */ }

 

템플릿 인라인 스타일

<style> 태그 안에 스타일을 넣어 HTML 템플리트에 스타일을 직접 삽입 할 수 있습니다.

src/app/hero-controls.component.ts

@Component({   selector: 'hero-controls',   template: `     <style>       button {         background-color: white;         border: 1px solid #777;       }     </style>     <h3>Controls</h3>     <button (click)="activate()">Activate</button>   ` })

 

템플릿 링크 태그

또한 <link> 태그를 컴포넌트의 HTML 템플리트에 넣을 수 있습니다.

링크 태그의 href URL은 컴포넌트 파일이 아닌 응용프로그램 루트와 관련이 있습니다.

src/app/hero-team.component.ts

@Component({   selector: 'hero-team',   template: `     <link rel="stylesheet" href="assets/hero-team.component.css">     <h3>Team</h3>     <ul>       <li *ngFor="let member of hero.team">         {{member}}       </li>     </ul>` })

 

CSS @imports

CSS 파일은 표준 CSS @import 규칙을 사용하여 가져올 수도 있습니다. 자세한 내용은 MDN 사이트의 @import를 참조하십시오.

이 경우 URL은 가져 오는 CSS 파일을 기준으로 상대경로 입니다.

src/app/hero-details.component.css (excerpt)

@import 'hero-details-box.css';