-
05 컴포넌트 스타일 04앵귤러/03 템플릿&데이터 바인딩 2017. 8. 27. 15:27
뷰 캡슐화
앞에서 설명한 것처럼 컴포넌트 CSS 스타일은 컴포넌트의 뷰에 캡슐화되며, 나머지 응용프로그램에는 영향을 미치지 않습니다.
이 캡슐화가 컴포넌트별로 이루어지는 방식을 제어하려면 컴포넌트 메타 데이터에서 뷰 캡슐화 모드를 설정할 수 있습니다. 다음 모드 중에서 선택하십시오.
l Native뷰 캡슐화는 브라우저의 네이티브 섀도우 DOM 구현 (MDN 사이트의 섀도우 DOM 참조)을 사용하여 컴포넌트의 호스트 엘리먼트에 섀도우 DOM을 첨부 한 다음 해당 섀도우 DOM 내에 컴포넌트 뷰를 배치합니다. 컴포넌트의 스타일은 섀도우 DOM 내에 포함됩니다.
l Emulated 뷰 캡슐화는 CSS 코드를 사전 처리(및 이름 바꾸기)하여 섀도우 DOM의 동작을 에뮬레이션하여 CSS를 컴포넌트의 뷰에 효과적으로 적용합니다. 자세한 내용은 부록 1을 참조하십시오.
l None은 Angular가 캡슐화를 수행하지 않음을 의미합니다. Angular는 CSS를 전역 스타일에 추가합니다. 앞서 설명한 범위 지정 규칙, 격리 및 보호를 적용하지 않습니다. 이는 HTML에 컴포넌트의 스타일을 붙여넣는 것과 본질적으로 같습니다.
컴포넌트 캡슐화 모드를 설정하려면 컴포넌트 메타 데이터에서 encapsulation 속성을 사용하십시오.
src/app/quest-summary.component.ts
// warning: few browsers support shadow DOM encapsulation at this time
encapsulation: ViewEncapsulation.Native
네이티브 뷰 캡슐화는 섀도우 DOM을 지원하는 브라우저에서만 작동합니다 (사이트 사용 가능 여부는 섀도우 DOM v0 참조). 지원은 여전히 제한되어 있으므로 Emulated 뷰 캡슐화가 기본 모드이며 대부분의 경우에 권장됩니다.
부록 : 생성 된 CSS 검사
에뮬레이트된 뷰 캡슐화를 사용할 때 Angular는 모든 컴포넌트 스타일을 사전 처리하여 표준 섀도우 CSS 범위 지정 규칙과 비슷하게 처리합니다.
에뮬레이트된 뷰 캡슐화가 활성화 해서 Angular 응용프로그램을 실행하면 DOM내의 각 DOM 엘리먼트에 추가 엘리먼트를 첨부합니다.
<hero-details _nghost-pmm-5>
<h2 _ngcontent-pmm-5>Mister Fantastic</h2>
<hero-team _ngcontent-pmm-5 _nghost-pmm-6>
<h3 _ngcontent-pmm-6>Team</h3>
</hero-team>
</hero-detail>
생성 된 어트리뷰트에는 두 가지 종류가 있습니다.
l 네이티브 캡슐화에서 섀도우 DOM 호스트가 될 엘리먼트에는 생성 된 _nghost 어트리뷰트가 있습니다. 이는 일반적으로 컴포넌트 호스트 엘리먼트의 경우입니다.
l 컴포넌트 뷰 내의 엘리먼트에는 이 엘리먼트가 속한 호스트의 에뮬레이트 된 섀도우 DOM을 식별하는 _ngcontent 어트리뷰트가 있습니다.
이러한 어트리뷰트의 정확한 값은 중요하지 않습니다. 자동으로 생성되며 응용프로그램 코드에서 참조 할 수 없습니다. 그러나 생성 된 컴포넌트 스타일은 DOM의 <head> 섹션에 있습니다.
[_nghost-pmm-5] {
display: block;
border: 1px solid black;
}
h3[_ngcontent-pmm-6] {
background-color: white;
border: 1px solid #777;
}
이러한 스타일은 사후 처리되므로 각 셀렉터에 _nghost 또는 _ngcontent 어트리뷰트 셀렉터가 추가됩니다. 이러한 추가 셀렉터를 사용하면 이 페이지에서 설명하는 범위 지정 규칙을 사용할 수 있습니다.
부록 : 상대 URL로 로딩
컴포넌트의 코드, HTML 및 CSS를 같은 디렉토리에 있는 세 개의 개별 파일로 분할하는 것이 일반적입니다.
quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css
templateUrl 및 styleUrls 메타 데이터 프로퍼티를 이용하여 템플릿 및 CSS 파일을 설정합니다. 이러한 파일은 컴포넌트와 함께 배치되므로 응용프로그램의 루트로 다시 경로를 지정하지 않는 이름으로 참조하는 것이 좋습니다.
파일 이름 앞에 ./를 붙임으로써 상대 URL을 사용할 수 있습니다.
src/app/quest-summary.component.ts
@Component({
selector: 'quest-summary',
templateUrl: './quest-summary.component.html',
styleUrls: ['./quest-summary.component.css']
})
export class QuestSummaryComponent { }
'앵귤러 > 03 템플릿&데이터 바인딩' 카테고리의 다른 글
06 동적 컴포넌트(Dynamic Component) 02 (0) 2017.08.27 06 동적 컴포넌트(Dynamic Component) 01 (0) 2017.08.27 05 컴포넌트 스타일 03 (0) 2017.08.27 05 컴포넌트 스타일 02 (0) 2017.08.27 05 컴포넌트 스타일 01 (0) 2017.08.27