Angular2 component styles

Angular2 Component Styles

/deep/ selector
강제로 모든 자식 component에 style을 전달한다.
/deep/ selector대신 >>>로 사용 가능하다.

/deep/ span.info { 
 border: 2px solid black; 
 border-radius: 12px; 
}

view encapsulation
component css style은 캡슐화되어 해당 component의 view에만 영향을 미치고 어플리케이션의 다른 component에는 영향을 미치지 않는다. component별로 이러한 캡슐화에 대해 제어하려면 view encapsulation mode에 대한 설정을 해주면 된다.

1. Emulated – 기본 값으로, 정의된 @component에만 적용된다.
2. Native – @component에 전파되지 않는다. 정의된 스타일만 적용된다.
3. None – view encapsulation하지 않는다. css를 전역으로 적용한다.