동적 클래스와 스타일
클래스와 스타일을 반응형으로 바인딩합니다.
동적 클래스와 스타일은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
템플릿에서 동적 스타일 지정
Angular에서는 클래스를 바인딩하고 인라인 스타일을 컴포넌트 상태에 연결할 수 있으므로 데이터가 변경될 때 UI가 자동으로 업데이트됩니다.
단일 클래스 바인딩
[class.name]을 사용하여 부울 표현식에 따라 CSS 클래스 하나를 전환하세요.
<div [class.active]="isActive">Item</div>
// component
isActive = true;ngClass로 여러 클래스 지정
ngClass는 클래스 이름과 부울 값을 연결한 객체를 사용하여 여러 클래스를 한 번에 적용합니다.
<div [ngClass]="{ active: isActive, disabled: isDisabled }">
Item
</div>배열 및 문자열과 함께 사용하는 ngClass
ngClass는 클래스 이름의 문자열이나 배열도 허용합니다.
<div [ngClass]="'box highlighted'"></div>
<div [ngClass]="['box', 'rounded']"></div>단일 스타일 바인딩
[style.property]를 사용하여 하나의 인라인 CSS 속성을 값에 연결하세요.
<p [style.color]="textColor">Hello</p>
// component
textColor = "tomato";단위가 있는 스타일 바인딩
단위 접미사를 추가하면 숫자 값에 픽셀이나 백분율과 같은 단위를 연결할 수 있습니다.
<div [style.width.px]="boxWidth"></div>
<div [style.height.%]="boxHeight"></div>
// component
boxWidth = 200;
boxHeight = 50;ngStyle로 여러 스타일 지정
ngStyle은 객체를 사용하여 여러 인라인 스타일을 한 번에 설정합니다.
<div [ngStyle]="{ color: textColor, 'font-size.px': size }">
Styled
</div>충돌 시 클래스 바인딩 우선
정적 클래스와 바인딩된 클래스가 겹치면 Angular가 두 클래스를 병합합니다. 바인딩은 정적 클래스를 제거하지 않고 동적 클래스의 존재 여부를 제어합니다.
<div class="card" [class.active]="isActive"></div>
<!-- card always present; active toggles -->상태에 반응하기
바인딩은 변경 감지 중에 다시 평가되므로 컴포넌트 속성을 업데이트하면 요소의 스타일이 즉시 다시 지정됩니다.
toggle() {
this.isActive = !this.isActive;
}클래스와 스타일 중 선택하기
유지 관리성을 위해 CSS 규칙과 함께 클래스 바인딩을 우선 사용하세요. 계산된 너비나 색상처럼 실제로 동적인 값에는 직접 스타일 바인딩을 사용하세요.
시그널과 함께 사용하기
클래스 및 스타일 바인딩은 시그널과도 함께 작동합니다. 템플릿 표현식에서 시그널을 호출하기만 하면 됩니다.
<div [class.active]="isActive()"></div>
// component
isActive = signal(true);빠른 확인
동적 클래스와 스타일에 대한 이해도를 확인해 보세요.
복습
[class.name]으로 클래스 하나를 전환하거나 ngClass로 여러 클래스를 전환하세요. [style.prop]으로 스타일 하나를 설정하고(선택적으로 단위 지정 가능), ngStyle로 여러 스타일을 설정할 수 있습니다. 바인딩은 시그널을 포함한 상태에 자동으로 반응합니다.
자주 묻는 질문
“동적 클래스와 스타일” 강의는 무료인가요?
네 — “동적 클래스와 스타일” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“동적 클래스와 스타일”에서 뭘 배우나요?
클래스와 스타일을 반응형으로 바인딩합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“동적 클래스와 스타일” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 컴포넌트 범위 스타일
- 뷰 캡슐화 모드
- 호스트 및 호스트 컨텍스트 스타일 지정
- 동적 클래스와 스타일