0Pricing
Angular Academy · 강의

컴포넌트 범위 스타일

스타일을 컴포넌트 내부로 한정합니다.

컴포넌트 범위 스타일은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

스타일은 컴포넌트에 속합니다

Angular에서는 각 컴포넌트가 자체 CSS를 가지도록 할 수 있습니다. 기본적으로 이러한 스타일은 범위가 지정되어 해당 컴포넌트 템플릿에만 적용되고 페이지의 나머지 부분에는 영향을 주지 않습니다.

인라인 styles 배열

@Component 데코레이터에서 styles 배열을 사용해 스타일을 인라인으로 정의할 수 있습니다.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

외부 styleUrls

일반적으로는 styleUrls를 사용해 하나 이상의 외부 스타일시트를 지정합니다.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

styleUrl 축약형

스타일시트가 하나라면 최신 Angular에서 단수형 styleUrl 속성을 지원합니다.

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

범위 지정 적용하기

한 컴포넌트의 .card 규칙은 card 클래스를 사용하는 다른 컴포넌트로 유출되지 않습니다. 각각 독립적으로 적용됩니다.

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

범위 지정의 작동 방식

Angular는 컴포넌트 요소에 고유한 특성을 추가하고 CSS 선택자를 이에 맞게 다시 작성합니다. 따라서 스타일이 해당 컴포넌트 내부에만 적용됩니다.

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

스타일이 안으로 유입되지 않습니다

스타일이 외부로 유출되지 않는 것처럼 대부분의 외부 스타일도 의도치 않게 컴포넌트 규칙을 덮어쓰지 않습니다. 덕분에 컴포넌트가 독립적으로 유지됩니다.

전역 스타일

앱 전체에 적용할 스타일에는 angular.json에 등록된 전역 styles.css를 사용하세요. 이러한 스타일에는 범위가 지정되지 않습니다.

/* src/styles.css - global */
body { font-family: system-ui; }

여러 스타일시트

컴포넌트는 배열에 여러 스타일시트를 나열하여 불러올 수 있습니다.

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

class 바인딩 사용하기

범위가 지정된 스타일은 class 바인딩과 자연스럽게 결합되어 조건에 따라 규칙을 적용할 수 있습니다.

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

범위 지정이 유용한 이유

범위가 지정된 스타일은 대규모 앱에서 이름 충돌을 방지하고, 팀이 독립적으로 작업할 수 있게 하며, 컴포넌트를 쉽게 재사용하고 동작을 파악할 수 있도록 합니다.

빠른 확인

컴포넌트 범위 스타일에 대한 이해도를 확인해 보세요.

복습

컴포넌트는 styles, styleUrls 또는 styleUrl을 통해 CSS를 포함합니다. 기본적으로 이러한 규칙은 컴포넌트 범위로 제한되어 충돌을 방지합니다. 앱 전체에 적용할 규칙에는 전역 스타일시트를 사용하세요.

자주 묻는 질문

“컴포넌트 범위 스타일” 강의는 무료인가요?

네 — “컴포넌트 범위 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“컴포넌트 범위 스타일”에서 뭘 배우나요?

스타일을 컴포넌트 내부로 한정합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“컴포넌트 범위 스타일” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 컴포넌트 범위 스타일
  2. 뷰 캡슐화 모드
  3. 호스트 및 호스트 컨텍스트 스타일 지정
  4. 동적 클래스와 스타일
← Angular Academy(으)로 돌아가기