컴포넌트 스타일

niee
Written by niee on 

Angular2 스터디 발표 자료
컴포넌트 스타일 지정 방법
- 쉐도우DOM선택자
- host
- host-context
- /deep/

1. 컴포넌트 스타일

  • @Component장식자 속성의 style에 스타일을 지정하면 컴포넌트 마다, 쉐도우 DOM에 독립적으로 스타일을 지정.
  • 다른 컴포넌트에는 스타일에 영향을 주지 않음
  • 쉐도우 DOM선택자의 종류
사용법 내용
:host 현재 컴포넌트의 쉐도우 DOM선택
:host-context 템플릿 외부 조건에 따라 현재 컴포넌트 선택
/deep/ 자식컴포넌트에 속한 엘리먼트 선택

2. :host 선택자

  • 현재 자신의 컴포넌트를 의미
:host{
  ....
}
  • 부모 컴포넌트의 조건에 따라 자식 컴포넌트의 상태를 결정할 경우 클래스 부여 가능
:host(.active){
  ....
}

3. :host-context 선택자

  • 부모 엘리먼트에 설정한 클래스 값에 따라 컴포넌트 내부에 특정 엘리먼트를 선택.
//부모
@Component({selector:'parent',template:'<child class="active"></child>'})

//자식
@Component({selector:'child',styles:[':host-context(.active)button{...}'])

4. /deep/ 선택자

  • 부모 컴포넌트에서 정의한 스타일 정보를 하위 컴포넌트 내의 엘리먼트에 적용.
:host /deep/ div{
  ....
}

//부모
@Component({selector:'parent',styles:[':host /deep/ div.first{...}'])

//자식
@Component({selector:'child',template:'<div class="first"></div>')

Comments

comments powered by Disqus

Explore more like this

Study angular2 angular2 컴포넌트 컴포넌트 스타일

지시자 (Directive)

Angular2 스터디 발표 자료 지시자는 템플릿내에서 사용되는 구성요소의 모양이나 구조를 결정, 컴포넌트 지시자, 구조 지시자, 속성 지시자, 커스텀 지시자가 있음. - 선언형 프로그래밍과 지시자 - 커스텀 지시자

niee niee 09 May 2017

자식 엘리먼트의 호출과 탐색

Angular2 스터디 발표 자료 자식 엘리먼트의 호출과 탐색 방법 - @ViewChild 장식자를 이용 - @ViewChildren 장식자를 이용 - @ContentChild 장식자를 이용 - @ContentChildren 장식자를 이용

niee niee 20 Apr 2017

컴포넌트 상호 작용

Angular2 스터디 발표 자료 컴포넌트간 상호 작용방법을 학습 - 중첩 컴포넌트 - Input 장식자를 이용한 데이터 전달 - Inputs 속성을 이용한 데이터 전달 - EventEmitter를 이용한 데이터 전달

niee niee 19 Apr 2017