CSS 로 Component 스타일링 2/2

Child Component 지원

 

식 구성 요소에 변경 내용을 적용하려면 부모 구성 요소의 .razor.css 파일에 있는

모든 하위 항목 요소에 ::deep 조합기를 사용한다. 

 

::deep h1 {
    color: red;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

parent

@page "/css/isolation-parent"
<div>
    <h1>Parent</h1>

    <CssIsolationChild />
</div>

Shared/CssIsolationChild

<h1>Child Component</h1>

 

 

Shared/Global CSS

정의된 CSS 규칙을 모든 구성 요소에서 재사용할 수 있는 기술

/wwwroot/css/site.css 을 _Layout.cshtml 에서 기본적으로 사용한다.

 

site.css 파일을 열고 아래 css 규칙을 정의 하자

.global-style::after {
    content: " Share or Global";
    color:red;
}

pages 밑에 아무 곳에나 razor 파일을 만들고 다음을 추가해보자

@page "/css/global"
<h3 class="global-style">CssShareOrGlobal</h3>

실행

 

Embeded CSS

@page "/css/embedded"
<h3 class="embedded-style">EmbeddedCssStyle</h3>
<style>
    .embedded-style::after
    {
        content: " This is an embedded style.";
        color:blue;
    }
</style>

실행

 

외부 CSS

외부 CSS는 Embedded CSS 기술과 유사하지만 구성 요소 내부에 CSS 규칙을 포함하는 대신

CSS 규칙이 외부 파일에 정의되고 구성 요소가 <link>태그를 사용하는 기술이다.

 

관련영상

https://youtu.be/wtbA-OyrQKs