유틸리티 클래스 개요

유틸리티 클래스 개요 (Utility classes overview)

PatternFly의 유틸리티 클래스는 커스텀 CSS를 직접 작성하지 않고도 프로젝트의 요소를 더 커스터마이징하고 수정할 수 있게 해 줘요. 어떤 작업에 유틸리티 클래스를 쓰는지 이 문서에서 정리해 드릴게요.

출처: 문서

본문

PatternFly의 유틸리티 클래스는 커스텀 CSS를 전혀 작성하지 않고도 프로젝트의 요소를 더 커스터마이징하고 수정할 수 있게 해 줘요.

예를 들어 유틸리티 클래스를 사용해 요소 사이에 추가 간격을 더하거나, 레이아웃에서 콘텐츠를 정렬하거나, 요소에 박스 섀도를 추가할 수 있어요.

10개 항목

  • Accessibility: 요소가 보조 기술(assistive technologies)과 상호작용하는 방식을 수정해요.
  • Alignment: 페이지 섹션에서 텍스트가 정렬되는 방식을 수정해요.
  • Background color: 요소의 배경색을 수정해요.
  • Box shadow: 요소에 섀도를 적용해요.
  • Display: 페이지 섹션에서 요소가 표시되는 방식을 수정해요.
  • Flex: 페이지 섹션에서 요소의 레이아웃과 정렬을 수정해요.
  • Float: 페이지 섹션 안에서 요소를 플로팅해요.
  • Sizing: 페이지 섹션에서 요소의 너비와 높이를 수정해요.
  • Spacing: 페이지 섹션에서 요소의 간격을 수정해요.
  • Text: 텍스트 요소의 스타일링을 수정해요.

더 알아보기 (Learn more)