호스트 및 호스트 컨텍스트 스타일 지정
컴포넌트 호스트 요소의 스타일을 지정합니다.
호스트 및 호스트 컨텍스트 스타일 지정은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
호스트 요소 스타일 지정
컴포넌트는 자체 호스트 요소(선택자 태그) 내부에 렌더링됩니다. 특수 :host 의사 클래스를 사용하면 컴포넌트 CSS에서 해당 요소의 스타일을 지정할 수 있습니다.
:host 선택자
:host를 사용하여 컴포넌트 자체 요소를 대상으로 지정하세요. 예를 들어 표시 방식과 여백을 설정할 수 있습니다.
/* card.component.css */
:host {
display: block;
padding: 16px;
}:host가 필요한 이유
:host가 없으면 컴포넌트 내부에서 호스트 요소의 스타일을 지정할 수 없습니다. 범위가 지정된 선택자는 템플릿 내부의 요소에만 일치하기 때문입니다.
조건과 함께 사용하는 :host
:host()에 선택자를 전달하여 호스트가 해당 선택자와 일치할 때만 스타일을 지정할 수 있습니다. 예를 들어 특정 클래스를 가진 경우가 이에 해당합니다.
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>호스트 클래스 바인딩
:host()를 호스트 클래스 바인딩과 결합하면 컴포넌트 자체 상태에 따라 스타일을 지정할 수 있습니다.
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}:host-context 선택자
:host-context()는 호스트 자체가 아니라 어떤 상위 요소에 있는 조건에 따라 컴포넌트의 스타일을 지정합니다. 테마를 적용할 때 특히 유용합니다.
:host-context(.dark-theme) {
background: #222;
color: #eee;
}테마 적용 예시
상위 트리의 부모 요소에 dark-theme 클래스가 있으면 규칙이 적용됩니다. 이를 통해 하나의 상위 요소에서 중첩된 컴포넌트의 모양을 변경할 수 있습니다.
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:host와 :host-context 비교
:host는 컴포넌트 자체 요소를 확인하고, :host-context는 상위 요소를 확인합니다. 자체 상태에는 host를, 테마와 같은 상속된 컨텍스트에는 host-context를 사용하세요.
하위 요소와 결합하기
:host-context를 하위 요소 선택자와 연결하여 상위 요소의 컨텍스트에 따라 내부 요소의 스타일을 지정할 수 있습니다.
:host-context(.compact) .title {
font-size: 12px;
}호스트 표시 방식의 기본값
사용자 지정 요소의 호스트는 기본적으로 인라인입니다. 레이아웃이 예측 가능하게 동작하도록 :host에 display: block을 설정하는 것이 일반적인 첫 번째 규칙입니다.
:host {
display: block;
}실용적인 사용 사례
호스트 스타일 지정을 사용하여 컴포넌트의 외부 상자를 제어하고, 자체 상태에 반응하며, 주변 테마 클래스에 맞게 조정하세요. 이렇게 하면 스타일을 캡슐화하면서도 유연하게 유지할 수 있습니다.
빠른 확인
호스트 스타일 지정에 대한 이해도를 확인해 보세요.
복습
:host를 사용하여 컴포넌트 자체 요소와 상태의 스타일을 지정하고, :host-context()를 사용하여 테마 적용을 위한 상위 요소의 클래스에 반응하세요. 호스트에 display: block을 설정하는 것도 유용한 기본값입니다.
자주 묻는 질문
“호스트 및 호스트 컨텍스트 스타일 지정” 강의는 무료인가요?
네 — “호스트 및 호스트 컨텍스트 스타일 지정” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“호스트 및 호스트 컨텍스트 스타일 지정”에서 뭘 배우나요?
컴포넌트 호스트 요소의 스타일을 지정합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“호스트 및 호스트 컨텍스트 스타일 지정” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 컴포넌트 범위 스타일
- 뷰 캡슐화 모드
- 호스트 및 호스트 컨텍스트 스타일 지정
- 동적 클래스와 스타일