Ignite UI for Web Components에서 구성요소 스타일 사용자화

    Ignite UI for Web Components 구성 요소를 사용하면 CSS 변수와 CSS 부분을 노출하여 스타일시트의 다양한 부분을 수정할 수 있습니다.

    CSS Parts

    이 문서의 이전 섹션에서 언급한 색상, 그림자, 타이포그래피, 원형율, 크기 및 간격과 같은 구성 요소 테마의 다양한 부분을 사용자 정의하는 방법 외에도 스타일시트의 특정 섹션을 덮어쓰면 손이 더러워질 수 있습니다. 각 구성 요소의 특정 부분을 타겟팅하여 구성합니다. 모든 구성 요소는 구성 요소에 대해 내부적으로 정의된 기존 스타일을 추가하거나 재정의할 수 있는 다양한 CSS 부분을 노출합니다.

    구성 요소가 노출하는 부분은 각 구성 요소에 대한 API 설명서에서 확인할 수 있습니다. 탐색적 유형이고 코딩에 대해 좀 더 실무적인 접근 방식을 원할 경우 선택한 브라우저의 '검사기' 인터페이스를 사용하여 언제든지 이를 찾을 수 있습니다. 예를 들어, 아바타가 노출하는 부분을 확인하려면 브라우저에서 해당 구성요소를 마우스 오른쪽 버튼으로 클릭하고 '검사'(Chrome에서)를 클릭하면 됩니다. 그러면 웹 검사기가 열리고 요소 탐색기 탭에 맞춤 요소 마크업이 표시됩니다. 아래 스크린샷과 비슷한 내용이 표시되어야 합니다.

    아바타 마크업

    아바타 유형에 따라 4개의 부분이 노출되는 것을 알IgcAvatarComponent 수 있을 것입니다 -base,icon​image​initials 그리고 그 부분들은 범위 내에서 정의된 스타일을 덮어쓸 수 있게 해줍니다.

    따라서 팔레트에서 이니셜 색상을 기본 색상으로 바꾸고 싶다면, 색상 속성을base​initials 다음과 같이 덮어쓸 수 있습니다:

    igc-avatar::part(base) {
  color: var(--ig-primary-500);
}

    같은 방법으로 부품이나base 다른 부품의 어떤 속성도 수정하거나 추가할 수 있습니다.

    CSS Variables

    또 다른 방법은 컴포넌트 스타일링의 여러 부분을 담당하는 CSS 변수들을 수정하는 것입니다. 편리하게도, 아바타는 기존 팔레트의 변수를 사용해 이니셜을 스타일링합니다. 자세히 살펴보면 색상 변수가 다음과 같습니다.--ig-gray-800이 변수의 값을 아바타 범위에서 변경하면 이니셜의 색상도 변경할 수 있습니다.

    igc-avatar {
  --ig-gray-800: hsl(0, 0%, 62%);
}

    변수 값을--ig-gray-800 다시 쓰는 것은 앞서 언급한 예와 동일하게 컬러 속성을 명시적으로 덮어쓰지 않습니다. 이 방법은 효과가 있지만, 색상 속성을 따로 살펴보면 색상이 어디서 오는지 추적하기가 다소 혼란스러울 수 있습니다. 따라서 기본 부분의 색상 속성을 덮어쓰는 것이 권장됩니다.

    Conclusion

    CSS 부분과 CSS 변수에 대해 배우고 문서에 나열된 다른 방법과 함께 사용하면 모든 구성 요소의 모양을 원하는 대로 조정할 수 있습니다.

    API References

    • ConfigureTheme