Angular 9 시리즈 (VII) CSS 스타일 스코프

작은 쓰레기 같은 놈들 · 게시됨 2020. 6. 17. 오후 4:46:59

Angular 9 시리즈 (1) 동적 부하 구성 요소
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 시리즈(2) 동적 성분 전송 매개변수
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 시리즈 (IV) 맞춤형 파이프 파이프라인
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 시리즈(V)는 금액 통화 형식을 제공합니다
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 시리즈(VI)는 네이티브 JS 변수와 메서드를 호출합니다
https://www.itsvse.com/thread-9254-1-1.html

돌이켜보면, 이전에 도입된 서드파티 컴포넌트의 스타일을 수정하려 했지만 성공하지 못했습니다.

Angular 설정 컴포넌트 CSS 스타일은 해결책을 적용하지 않습니다
https://www.itsvse.com/thread-9184-1-1.html

:host는 현재 컴포넌트를 선택하는 셀렉터를 나타냅니다.
::ng-deep은 중간 className의 중첩된 계층 관계를 무시할 수 있습니다. 수정하고 싶은 className을 직접 찾으세요.
하지만 공식 문서에 따르면 ng-deep은 향후 버전에서 포기될 것이며, 앞으로 어떤 문법이 될지는 알려지지 않았습니다.

컴포넌트 상단의 속성을 styleUrls로 설정하면 현재 컴포넌트의 css 스타일시트를 설정할 수 있습니다.

도입된 스타일시트는 현재 태그 요소에만 영향을 주며, 다른 컴포넌트에는 영향을 주지 않는데, 이는 Angular 프레임워크의 중요한 특징입니다.

CSS 코드:

로그인이 보이네요.

아래에 보이는 대로 브라우저를 통해 생성된 최종 CSS 스타일을 살펴보겠습니다:

.itsvse1[_ngcontent-serverApp-c228] {
배경색:azure;
}

[_nghost-serverApp-c228] .itsvse2 {
배경색: 녹색;
}

[_nghost-serverApp-c228] .itsvse3 {
배경색: 빨간색;
}

.itsvse4 {
배경색: 아쿠아;
}

.itsvse1은 현재 컴포넌트만 스타일링하고, .itsvse2와 .itsvse3는 도입된 자식 컴포넌트의 스타일에 영향을 주며, .itsvse3는 전역 스타일에 영향을 줍니다.

ITSVSE1 CSS는 현재 노드 요소들이 아래 그림과 같이 "_ngcontent-ServerApp-C228" 속성을 추가하기 때문에 현재 컴포넌트에만 영향을 줄 수 있습니다:

(끝)

작은 쓰레기 같은 놈들 · 게시됨 2021. 11. 26. 오후 5:07:00

각을 캡슐화하는 세 가지 방법
https://www.itsvse.com/thread-9200-1-1.html

로그인이 보이네요.

[각] Angular 9 시리즈 (VII) CSS 스타일 스코프

관련 게시물

본 섹션