11. CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿

 ◈ CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿

  (클래스 지시자/스탈일 지시자)

 1) 클래스 지시자

 - 특정 상황에서 CSS 클래스를 동적으로 처리할 때 ng-class 지시자를 이용해 템플릿에서 CSS 클래스를 동적으로 처리한다.

 <any ng-class="표현식">

 ...

 </any>

 또는 

 <any class="ng-class: 표현식;">

 ...

 </any>

 ① 표현식은 CSS클래스 이름을 스페이스로 구분한 문자열이거나,

 ② CSS 클래스 이름들로 구성된 배열이거나,

 ③ CSS 클래스 이름이 속성 이름이고 true/false를 값으로 하는 객체여야한다.(객체일 경우 특정 CSS 클래스 이름의 값이 true일 때에 해당 CSS클래스가 요소에 적용된다.)

2) 스타일 지시자

 - CSS 클래스가 적용되어 있지 않고 HTML 요소의 스타일을 동적으로 변경하고 싶을 때 ng-style을 사용한다.

<any ng-style="표현식">

...

</any>

 - 표현식의 계산 결과에 따라 HTML 요소에 CSS스타일을 적용한다.

 - 표현식의 결과는 객체여야하고 해당 객체의 키가 CSS스타일의 이름이 되며 객체의 값이 CSS 스타일 이름에 대한 값이 된다.