[Blazor] 모범사례 3- CSS를 사용한 구성 요소 파일 및 스타일 지정

• Blazor 세 번째 모범사례는 CSS를 사용한 구성 요소 파일 및 스타일 지정 입니다.
• 쉽게 얘기하면, 컴포넌트, C# 코드, CSS 영역을 모두 분리하는 구조를 의미합니다.
• 다음과 같은 구조입니다.

• 위처럼 컴포넌트, C# 코드, CSS 영역 을 나눠서 개발을 진행하는 것이 좋습니다.
• 예제로 AKButton.razor, AKButton.razor.cs, AKBUtton.razor.css 프로젝트 파일에 다음 코드들을 추가하였습니다.

3.1 AKButton.razor

@namespace AKLab01.Blaozr.Components

<h3>AKButton</h3>

<button class="button primary">Button</button>

<button class="button secondary">Secondary</button>

<button class="button outlined">Outline</button>

<button class="button primary disabled">Primary</button>

3.2 AKButton.razor.cs

namespace AKLab01.Blaozr.Components.Button;

public partial class AKButton
{
}

3.3 AKButton.razor.css

.button  {
    border: none;
    padding: 10px 40px;
    font-size: 20px;
    transition: 0.3s;
    border-radius: 3px;
    cursor: pointer;
}

.button:hover:enabled {
    background-color: #CCCCCC;
}

.primary {
    background-color: blue;
    color: white;
}

.secondary {
    background-color: white;
    color:blue;
}

.outlined {
    background-color: transparent;
    border: 2px solid blue;
    color: blue;
}

.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

3.4 실행 결과

• 실행 결과, 부모 페이지에서 문제없이 CSS 가 정상적으로 적용되어 보여지는 모습을 볼 수 있습니다.