본문 바로가기
개발/Angular Framework

Angular 4 CSS Tutorial

DANIEL.OH 2018. 3. 11. 16:49

Angular는 인라인 및 외부 CSS를 모두 정의 할 수있는 기능을 제공합니다. 클래스 바인딩과 스타일 바인딩을 통해 컴포넌트 로직에서 CSS를 제어 할 수도 있습니다. 

이 튜토리얼에서는 앵귤러 CSS와 관련된 다양한 문제를 살펴볼 예정이므로 시작하겠습니다!


새 프로젝트를 생성 할 때 CSS 정의하기


Angular CLI를 사용하여 Angular 프로젝트를 생성하면 기본적으로 표준 CSS와 함께 작동하도록 프로젝트가 설정됩니다.

그러나 Sass 또는 SCSS를 사용하려면 --style 접두어를 다음과 같이 추가하십시오.

// Starting a project with standard CSS
> ng new project-name

// Starting a project with Sass
> ng new project-name --style=sass

// Starting a project with SCSS
> ng new project-name --style=scss

이 과정에서는 이미 표준 CSS로 프로젝트를 생성 했으므로 --style  접두사 없이 생성했다고 가정하여 계속 진행할 것 입니다.

인라인 CSS와 외부 CSS 스타일 시트

Angular CLI를 사용하여 프로젝트를 생성하면 기본적으로 외부 스타일 시트와 함께 작동하도록 구성 요소가 설정됩니다.

인라인 CSS를 사용하든 외부 CSS를 사용하든 둘 다 컴포넌트 데코레이터 내에서 정의됩니다.

외부 스타일 시트는 styleUrls  속성으로 정의됩니다 .

@Component({
  // Other properties removed
  styleUrls: ['./app.component.css']
})

이렇게하면이 구성 요소의 템플릿과 관련된 모든 CSS가 별도의 CSS 파일에 배치됩니다. 이것은 많은 CSS를 다루고 있고 CSS가 컴포넌트 코드를 어수선하게 만들고 싶지 않을 때 유용합니다.

구성 요소 데코레이터 내에 인라인 CSS를 작성하려는 경우 styleUrls 속성을 스타일로 변경할 수 있습니다 .

@Component({
  // Other properties removed
  styles: [`
    h1 {
        text-decoration:underline;
    }
`]
})

이렇게하면 백틱을 사용하여 멀티 라인 CSS를 정의 할 수 있고 CSS 선언은 인라인으로 작성됩니다. 이는 CSS 선언이 거의 없거나 구성 요소 내에 인라인 CSS를 작성하려는 경우에 유용합니다.

클래스 바인딩을 통한 CSS 변경

때로는 CSS를 즉시 변경해야합니다. Angular를 사용하면 구성 요소 논리를 기반으로 CSS 클래스를 추가하거나 제거 할 수 있습니다.

app.component.html 템플릿 에서 CSS 클래스를 변경하려면 다음 단계를 따르세요 .

<h1 [class]="titleClass">
  {{title}}
</h1>

그런 다음 구성 요소 클래스에서 titleClass  속성을 정의 합니다.

export class AppComponent {

  title = 'Hello!';
  titleClass = 'red-title';

}

보시다시피, title 클래스를 red-title  이라는 문자열에 바인딩 했습니다 .이 문자열 은 정의해야하는 CSS 클래스의 이름입니다. 따라서 styles  속성에서 해당 클래스를 정의 할 수 있습니다.

styles: [`
    h1 {
        text-decoration:underline;
    }
    .red-title {
      color:red;
    }
`]

이제  콘솔에서 서브 를 실행 하고 에서 프로젝트 를 보면 Hello!  텍스트가 빨간색입니다. http : // localhost : 4200

클래스 바인딩은 [class]  가 바인딩 되는 속성에 연결된 CSS 클래스를 제어 할 수 있기 때문에 실제 컨텍스트에서 유용 합니다.

템플릿 내의 클래스 바인딩에서 바로 CSS 클래스를 지정할 수도 있습니다.

<h1 [class.red-title]="titleClass">
  {{title}}
</h1>

그런 다음  구성 요소 코드의 titleClass 를 일부 값에 바인딩하거나 false 로 설정하면 클래스에서 요소가 제거됩니다. titleClass  를 false로 변경 하면 제목이 더 이상 빨간색으로 유지되지 않습니다.

스타일 바인딩을 통한 CSS 변경

스타일 속성을 변경하는 것은 속성 바인딩의 다른 형태 일뿐입니다. 위의 예제를 사용하여 템플릿을 다음과 같이 변경하십시오.

<h1 [style.color]="titleStyle">
  {{title}}
</h1>

그런 다음  구성 요소 클래스 의 titleClass 속성을 다음과 같이 변경 합니다.

   titleStyle = 'red';

템플릿 표현식 자체 내에서 지정된 CSS 속성의 값을 제어 할 수도 있습니다.

<h1 [style.color]="titleStyle ? 'green' : 'pink'">
  {{title}}
</h1>

이렇게하면 titleStyle  이 정의되면 녹색으로 표시됩니다. 그렇지 않으면 존재하지 않거나 거짓 이면, 분홍색으로 표시됩니다.

여러 CSS 스타일 및 클래스 변경하기

ngStyle  및 ngClass  지시문을 속성에 바인딩 할 수 있습니다 . 이 속성은 여러 스타일이나 클래스를 제어 할 수 있습니다.

템플리트 HTML을 다음으로 변경하십시오.

<h1 [ngClass]="titleClasses">
  {{title}}
</h1>

그런 다음 구성 요소 클래스를 다음과 같이 변경하십시오.

  titleClasses = {
    'red-title': true,
    'large-title': true
  }

구성 요소 데코레이터의 styles 속성에서 큰 제목  클래스를 추가합니다 .

    .large-title {
      font-size:4em;
    }

이제 titleClasses 객체 에서 true 로 정의 된 두 클래스가 h1 요소에 연결됩니다.

ngStyle 지시문을 통해 여러 스타일을 변경하는 방식은 동일 합니다.

<h1 [ngStyle]="titleStyles">
  {{title}}
</h1>

그리고 구성 요소 클래스에서 :

  titleStyles = {
    'color': 'red',
    'font-size' : '4em'
  }

이 경우 객체에는 실제 CSS 속성과 해당 값이 포함됩니다.


티스토리툴바