Angular 컴포넌트 스타일

이제 CSS를 통해 우리의 마크업에 스타일을 적용해 봅시다. 이를 위해서는 컴포넌트 마크업의 CSS 스타일이 작성되는 파일 app.component.css가 유용합니다. 이때 Angular는 스타일이 CSS 모듈처럼 동작하도록 자체적으로 관리합니다. 이는 모든 선택자가 컴포넌트의 마크업에만 적용되고 외부 마크업을 침범하지 않음을 의미합니다.

실제로 살펴봅시다. 우리 컴포넌트에 다음과 같은 마크업이 있다고 가정해 보겠습니다:

<div>
	abcde
</div>

div에 색상을 지정해 봅시다:

div {
	color: red;
}

이 스타일이 우리 컴포넌트의 div에만 적용되고 다른 어떤 div에도 적용되지 않을 것이라고 확신할 수 있습니다.

템플릿 파일에 일부 마크업을 작성해 보세요. 해당 마크업에 대한 스타일을 작성해 보세요.