CSS 로 Component 스타일링 1/2

Component 에 css 를 추가하는 다양한 방법

• 격리된 CSS: 특정 구성 요소에만 적용되는 규칙 집합입니다.
• Shared/Global CSS: 웹사이트의 모든 구성 요소에 적용할 수 있는 규칙 집합입니다.
• 포함된 CSS: 하나 이상의 구성 요소에 적용할 수 있는 규칙 집합입니다.
• 외부 CSS: 하나 이상의 구성 요소에 적용할 수 있는 규칙 파일입니다.

 

 

격리된 CSS

Component별 스타일을 정의하려면

Component에 대한 {name}.razor 파일의 이름과 일치하는 

{name}.razor.css 파일을 같은 폴더에 만듭니다. 

{name}.razor.css 파일은 범위가 지정된 CSS 파일입니다.

 

 

https://blazorschool.com/tutorial/blazor-server/dotnet6/styling-component-with-css-687210

 

folder 구성

CSS 폴더 밑에 Isolation 과 Not Isolation 구성

 

CSS 폴더를 Pages 밑에 만들자

CSS 폴더 안에 CssIsolation.razor 파일을 생성하자

@page "/css/isolation"
<h3>Css Isolation Scope (apply)</h3>

<h1>Scoped CSS Example</h1>

@code {

}

CSS 폴더 안에  CssIsolation.razor.css 파일을 생성하자

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

CSS 폴더 안에 CssNotIsolation.razor 파일을 생성하자

@page "/css/not/isolation"
<h3>Css Isolation Scope(not apply)</h3>

<h1>Not Scoped CSS Example</h1>

@code {

}

 

h1 tag 의 적용 유무를 확인 하자

 

격리되었다면 css 는 CssIsolation.razor 파일에는 적용되고

CssNotIsolation.razor 파일에는 적용되지 않을 것이다. 

격리된 css 가 적용된 CssIsolation.razor 실행 내역

격리된 css 가 적용되지 않는 CssNotIsolation.razor 내역

 

 

CSS 격리를 Blazor 에서 처리 하는 방법 (CSS isolation bundling)

 

Pages/_Layout.cshtml 파일을 열어보면 {Assembly Name}.style.css 를 찾을 수 있다. 

현재 프로젝트의 어셈블리명은 BlazorTutorial 이다.

Project 를 build 하게 되면 아래와 같은 경로에 해당 파일이 위치한다. 

obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.css

 

예) obj\Debug\net6.0\scopedcss\projectbundle

 

 

css 파일을 열어보면 다음과 같다.

/* _content/BlazorTutorial/Pages/CSS/CssIsolation.razor.rz.scp.css */
h1[b-kbpovwchc0] {
    color: red;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}
/* _content/BlazorTutorial/Shared/MainLayout.razor.rz.scp.css */
.page[b-6cuhz3n4me] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6cuhz3n4me] {
    flex: 1;
}

.sidebar[b-6cuhz3n4me] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
...
...

우리가 CssIsolation.razor.css 파일에 넣었던 style 내용은 위의 h1[b-kbpovwchc0]  로 변경되어 있다.

그리고 실제 이 내용이 blazor 의 bundling 과정중에 

 

<h1 b-kbpovwchc0>

 

위와 같은 형태로 추가되게 된다.

그래서 이를 이용해 css 를 격리 하게 되는 것이다. 

 

 

 

관련영상

https://youtu.be/6vRjxB9eqUI