05 컴포넌트 스타일 01

앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:25

Angular 응용프로그램은 표준 CSS로 스타일을 사용합니다. 즉, CSS 스타일시트, 셀렉터, 규칙 및 미디어 쿼리에 대해 알고있는 모든 것을 Angular 응용프로그램에 직접 적용 할 수 있습니다.

또한 Angular는 컴포넌트 스타일을 컴포넌트와 함께 묶을 수 있으므로 일반 스타일 시트보다 모듈화된 디자인이 가능합니다.

이 페이지에서는 이러한 컴포넌트 스타일을 로드하고 적용하는 방법에 대해 설명합니다.

Plunker에서 라이브 예제 / 다운로드 예제를 실행하고 코드를 다운로드 할 수 있습니다.

작성한 모든 Angular 컴포넌트에 대해 HTML 템플릿뿐만 아니라 해당 템플릿과 함께 제공되는 CSS 스타일을 정의하고 필요한 셀렉터, 규칙 및 미디어 쿼리를 지정할 수 있습니다.

이 작업을 수행하는 한 가지 방법은 컴포넌트 메타 데이터에 styles 프로퍼티를 설정하는 것입니다. 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 {

/* . . . */

}

컴포넌트의 스타일에 넣는 셀렉터는 해당 컴포넌트의 템플리트에만 적용됩니다. 위 예제의 h1 셀렉터는 HeroAppComponent의 템플릿에있는 <h1> 태그에만 적용됩니다. 응용프로그램의 다른 곳에있는 <h1> 엘리먼트는 영향을 받지 않습니다.

다음은 CSS가 전통적으로 작동하는 방식에 비해 모듈성이 크게 개선된 사항입니다.

l 각 컴포넌트의 컨텍스트에서 가장 적합한 CSS 클래스 이름과 셀렉터를 사용할 수 있습니다.

l 클래스 이름 및 셀렉터는 컴포넌트에 대해 지역화 되어 있으며 응용프로그램의 다른 곳에서 사용되는 클래스 및 셀렉터와 충돌하지 않습니다.

l 응용프로그램의 다른 곳에서 스타일을 변경해도 컴포넌트의 스타일에는 영향을주지 않습니다.

l 각 컴포넌트의 CSS 코드를 컴포넌트의 TypeScript 및 HTML 코드와 함께 배치하면 깔끔한 프로젝트 구조가됩니다.

l 코드가 사용되는 다른 위치를 찾기 위해서 전체 애플리케이션을 검색하지 않고도 컴포넌트 CSS 코드를 변경하거나 제거할 수 있습니다.

리노기록 리노기록