-
05 컴포넌트 스타일 02앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:26
스페셜 셀렉터
컴포넌트 스타일에는 그림자 DOM 스타일 스코핑의 (W3C 사이트의 CSS 스코핑 모듈 레벨 1 페이지 설명된) 가지 스페셜 셀렉터가 있습니다. 다음 절에서는 이러한 셀렉터에 대해 설명합니다.
:host
:host 가상 클래스 셀렉터를 사용하면 컴포넌트를 사용하는 엘리먼트의 스타일을 타겟팅 할 수 있습니다 (컴포넌트의 템플릿 내부에 있는 대상 엘리먼트와 반대 됨).
src/app/hero-details.component.css
:host {
display: block;
border: 1px solid black;
}
:host-context
때로는 컴포넌트의 뷰 외부에서 일부 조건을 기반으로 스타일을 적용하는 것이 유용한 경우가 있습니다. 예를 들어 CSS 테마 클래스를 문서 <body> 엘리먼트에 적용 할 수 있으며 이를 기반으로 컴포넌트가 어떻게 표시되는지를 변경할 수 있습니다.
:host()의 함수와 같은 방식으로 작동하는 :host-context() 의사 클래스 셀렉터를 사용하십시오. :host-context() 셀렉터는 컴포넌트 호스트 엘리먼트의 모든 조상에서 문서 루트까지의 CSS 클래스를 찾습니다. :host-context() 셀렉터는 다른 셀렉터와 결합해서 사용할 때 유용합니다.
다음 예제는 일부 조상 엘리먼트에 theme-light라는 CSS 클래스가 있는 경우에만 컴포넌트 안의 모든 <h2> 엘리먼트에 background-color 스타일을 적용합니다.
src/app/hero-details.component.css
:host-context(.theme-light) h2 {
background-color: #eef;
}
(비추천) / deep /, >>> 및 ::ng-deep
컴포넌트 스타일은 일반적으로 컴포넌트의 자체 템플릿에 있는 HTML에만 적용됩니다.
/deep/ shadow-piercing 자손 결합기를 사용하여 자식 컴포넌트 트리를 통해 모든 자식 컴포넌트 뷰에 스타일을 적용합니다. /deep/ 결합기는 중첩 된 컴포넌트의 깊이에 상관없이 작동하며 컴포넌트의 자식 뷰 및 자식 내용에 모두 적용합니다.
다음 예제는 호스트 엘리먼트에서 이 컴포넌트를 거쳐 DOM의 모든 자식 엘리먼트까지 모든 <h3> 엘리먼트를 대상으로 합니다.
src/app/hero-details.component.css
:host /deep/ h3 {
font-style: italic;
}
/deep/ 결합기는 별칭 >>> 및 ::ng-deep도 있습니다.
'앵귤러 > 03 템플릿&데이터 바인딩' 카테고리의 다른 글
05 컴포넌트 스타일 04 (0) 2017.08.27 05 컴포넌트 스타일 03 (0) 2017.08.27 05 컴포넌트 스타일 01 (0) 2017.08.27 04 컴포넌트 상호작용 07 (0) 2017.08.22 04 컴포넌트 상호작용 06 (0) 2017.08.22