Angular 에서 css 바인딩

Jeongkuk Seo

Published in

sjk5766

7 min readNov 25, 2018

css를 근 5년만에 접하네요. Angular에서 css 바인딩을 이해하기 위해 제가 공부한 것들을 정리하겠습니다.

HTML에서 CSS를 사용하는 3가지 방법

Inline Style Sheet (HTML 태그의 style 속성에 css 코드를 추가)

<p style=”color:blue”> 안녕 </p>

2. Internal Style Sheet (HTML 문서의 <style> .. </style> 안에 css 코드 추가)

<style>
  h1 {
    color: blue;
  }
</style>
.
.
<body>
</body>

3. Linking Style Sheet (별도의 css 파일을 만들어 HTML 문서와 연결)

<link rel=”stylesheet” href=”style.css”>

CSS의 id와 class

아래와 같이 h1 태그에 대한 css를 정의했습니다.

h1 {
    color: blue;
  }

이 방법을 쓰면 css가 적용되는 scope안의 모든 h1 태그에 대해 반영이 될 겁니다. 반대로 개발하면서 내가 원하는 h1 태그만 해당 css를 적용할 일이 있습니다. 이럴 경우 css의 id와 class를 사용합니다.

아래와 같이 <style> 태그 안에 # 으로 id를 지정하고 . 으로 class를 지정합니다.html 에서 태그 안에선 id=”css id 이름” 문법으로 css의 id에 접근하고 class=”css 클래스 이름” 문법을 통해 css의 클래스에 접근합니다.

<style>
  #myid {
    color: blue
  }
  .myclass {
    color: red
  }
 </style> <p id="myid"> 안녕 </p>
 <p class=”myclass”> 안녕2 </p>

위 코드의 결과는 아래와 같습니다.

css의 id와 class는 차이가 있습니다. id는 한 페이지의 하나의 태그에만 사용하며 class는 반복되는 스타일에 사용할 수 있습니다. 가령 아래 코드는 정상동작합니다.

<p id=”myid”> 안녕 </p>
<p class=”myclass”> 안녕2 </p>
<p class=”myclass”> 안녕3 </p>

헌데 id를 중복해서 써도 문제는 없습니다.

<p id=”myid”> 안녕 </p>
<p class=”myclass”> 안녕2 </p>
<p id=”myid”> 안녕3 </p>
<p id=”myid”> 안녕4 </p>

음, angular의 html 동작 결과라 에러가 안 나는 것인지, 아니면 문법적인 문제는 없고 단순히 규약일 수도 있겠다는 생각이듭니다.

만약 동일 태그에 id와 class를 중복해서 정의할 경우.

<p id=”myid” class=”myclass”> 안녕 </p>
<p class=”myclass” id=”myid”> 안녕2 </p>

id의 우선순위가 더 높습니다.

Angular의 css 바인딩

Angular의 HTML 태그에 css를 어떻게 바인딩 할 수 있는지 정리하겠습니다.

Style Binding

태그 내에서 style.property 에 값을 넣는 방법입니다.

@Component({
   selector: ‘app-heroes’,
   template: `<p [style.color]=”’blue’”> 안녕 </p>`,
   styles: [],
})

고정 된 값이 아닌 변수를 통해 동적으로 텍스트 색상을 변경하고 싶을 경우 아래와 같이 사용할 수 있습니다.

@Component({
  selector: ‘app-heroes’,
  template: `<p [style.color]=”color”> 안녕 </p>`,
  styles: [],
})export class HeroesComponent implements OnInit {
 color: string = “red”; // color 변수는 변경될 수 있다.
}

2. Class Binding

Html 태그에서는 class=”css 클래스이름” 을 통해 css를 적용할 수 있습니다. 여러 css 클래스를 사용하고 싶을 경우 아래처럼 class=”A B”와 같이 적용하면 됩니다.

@Component({
  selector: ‘app-heroes’,
  template: `<p class=”aClass bClass”> 안녕 </p>`,
  styles: [`.aClass { font-size:1.7em; }
            .bClass { background: black; color: white; }
            .cClass { font-weight:bold; }`],
})

만약 Html 태그에서 특정 변수 값에 따라 css를 적용할 지 말지 결정한다면 아래와 같이 사용합니다.

@Component({
  selector: ‘app-heroes’,
  template: `<p class=”aClass bClass” [class.cClass]="iscClass"> 안녕               </p>`,
  styles: [`.aClass { font-size:1.7em; }
            .bClass { background: black; color: white; }
            .cClass { font-weight:bold; }`],
})export class HeroesComponent implements OnInit {
    iscClass: boolean = false;  // 변수 값이 true면 cClass가 적용
}

3. NgStyle

NgStyle은 1번의 Style Binding 기능을 하는 Angular의 directive 입니다.

template: `<p [ngStyle]=”{‘color’ : ‘blue’ }”> 안녕 </p>`

Style Binding과 마찬가지로 변수를 통해 동적인 스타일을 지정할 수 있습니다.

template: `<p [ngStyle]=”getTextColor()”> 안녕 </p>`

4. NgClass

NgClass는 2번의 Class Binding 기능을 하는 Angular의 directive 입니다. NgClass는 3가지 유형의 데이터 타입을 받을 수 있습니다.

Array
String
Object

차례대로 살펴보겠습니다. 먼저 Array는 다음과 같이 쓸 수 있습니다.

template: `<p [ngClass]=”[‘aClass’, ‘bClass’]”> 안녕 </p>`,
styles: [`.aClass { font-size:1.7em; }
          .bClass { background: black; color: white; }
          .cClass { background: yellow; }`]

두 번째 String은 다음과 같이 쓸 수 있습니다.

template: `<p [ngClass]=”’aClass bClass’”> 안녕 </p>`,

위 두 가지 방법은 최종적으로 다음 문법과 동일합니다.

template: `<p class=”aClass bClass”> 안녕 </p>`,

마지막으로 객체를 아래와 같이 사용할 수 있습니다.

template: `<p [ngClass]=”{‘aClass’ : true, ‘bClass’: true}”> 안녕 </p>`,
styles: [`.aClass { font-size:1.7em; }
          .bClass { background: black; color: white; }
          .cClass { background: yellow; }`]

객체로 전달할 경우 key는 css의 class 이름이 되며, value는 boolean 타입으로 해당 class를 적용할지 말지를 결정합니다. 위 코드의 aClass와 bClass가 true이므로 css의 aClass와 bClass가 적용됩니다.

Angular 에서 css 바인딩

Written by Jeongkuk Seo