Materialise CSS의 다양한 유틸리티 클래스는 무엇입니까?

이 글에서는 Materialise CSS의 다양한 유틸리티 클래스에 대해 알아보겠습니다. 계속하기 전에 Materialise CSS가 무엇인지부터 알아보겠습니다. Materialise CSS는 반응성이 뛰어나고 매력적인 웹 애플리케이션을 만들기 위한 다양한 기능과 유틸리티를 제공하는 인기 있는 프런트 엔드 개발 프레임워크입니다. Materialise CSS의 기본 구성 요소 중 하나는 HTML 요소에 스타일을 추가하는 간단하고 효율적인 방법을 제공하는 유틸리티 클래스입니다

유틸리티 클래스는 특정 스타일을 달성하기 위해 모든 HTML 요소에 적용할 수 있는 사전 정의된 CSS 클래스입니다.

사용할 수 있는 유틸리티 클래스는 다음과 같습니다

• 컬러 실용 카테고리

• 정렬 유틸리티 클래스

• 콘텐츠 숨기기/표시를 위한 유틸리티 클래스

• 형식 유틸리티 클래스

컬러 실용 카테고리

Materialize CSS의 Color 유틸리티 클래스는 HTML 요소에 색상을 추가하는 쉬운 방법을 제공합니다. 이러한 클래스를 통해 개발자는 사전 정의된 다양한 색상 중에서 선택하거나 웹 애플리케이션에 대한 사용자 정의 색상을 정의할 수 있습니다. 색상 유틸리티 클래스에는 텍스트 색상 및 배경색 클래스가 포함됩니다.

예

으아아아

정렬 유틸리티 클래스

Materialize CSS는 개발자가 HTML 요소를 정렬할 수 있는 여러 정렬 유틸리티 클래스를 제공합니다. 이러한 클래스에는 left-align, right-align, center-align, justify-align, valign-wrapper 및 valign이 포함됩니다. left-align, right-align, center-align 및 justify-align 클래스는 텍스트 내용을 정렬하는 데 사용되는 반면 valign-wrapper 및 valign 클래스는 요소를 수직으로 정렬하는 데 사용됩니다.

텍스트 정렬

요소 내에서 텍스트의 가로 정렬을 제어할 수 있으며 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 및 양쪽 정렬과 같은 클래스가 포함됩니다.

예

으아아아

수직 정렬

valign-wrapper 클래스를 사용하여 요소를 수직으로 정렬할 수 있습니다. 이는 상위 컨테이너 요소에 적용될 수 있으며 해당 컨테이너 내의 하위 요소를 수직으로 정렬합니다.

예

으아아아

콘텐츠 유틸리티 클래스 숨기기/표시

숨기기 및 표시를 위한 유틸리티 클래스를 사용하면 장치의 크기에 따라 콘텐츠를 쉽게 숨기고 표시할 수 있으며 선택적으로 콘텐츠를 표시할 수 있습니다. 이러한 유틸리티 클래스를 사용하면 장치 크기에 따라 콘텐츠에 다양한 속성을 적용할 수 있습니다. 예를 들어, 모바일 장치에서 텍스트를 숨기려면 큰 화면 크기나 데스크톱 장치에서만 표시되어야 하는 텍스트에 대해 "hide-on-small-only" 클래스를 사용하면 됩니다.

여기에는 .hide, .hide-on-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med- 및 .hide-on-med-와 같은 다양한 클래스가 있습니다. -up, .hide-on-large-only, .show-on-small, .show-on-large, .show-on-medium-and-up, show-on-medium-and-down.

예

으아아아

형식 유틸리티 클래스

Materialize CSS는 간단하고 효과적인 방법으로 HTML 콘텐츠의 형식을 지정하는 데 사용할 수 있는 여러 클래스를 제공합니다. 이러한 형식 지정 유틸리티 클래스를 활용하면 복잡한 CSS 코드를 사용하지 않고도 브라우저에 표시되는 콘텐츠를 쉽게 자르고 카드 요소 위에 마우스를 올릴 때 그림자 효과를 추가할 수 있습니다.

이러한 서식 효과를 얻으려면 다음 클래스를 사용할 수 있습니다.

1. 자르기

이 클래스는 현재 보이지 않는 텍스트가 더 있음을 나타내기 위해 내용을 자르고 줄임표를 표시하는 데 사용됩니다.

예

으아아아

2. 카드 패널.hoverable

이 클래스는 카드 요소 위로 마우스를 가져갈 때 카드 요소에 그림자 효과를 추가하여 카드에 포함된 콘텐츠를 정렬하고 강조 표시하는 데 도움이 됩니다.

예

으아아아

이 기사에서 우리는 CSS가 반응성이 뛰어나고 시각적으로 매력적인 웹 애플리케이션을 만들기 위해 다양한 기능과 유틸리티를 제공하는 강력한 프런트 엔드 개발 프레임워크라는 것을 배웠습니다. 가장 유용한 구성 요소 중 하나는 HTML 요소에 스타일을 추가하는 간단하면서도 효과적인 방법을 제공하는 유틸리티 클래스 세트입니다. 이러한 유틸리티 클래스에는 색상, 정렬, 콘텐츠 숨기기/표시, 서식 지정 클래스 등이 포함됩니다. 이러한 유틸리티 클래스를 활용하면 개발자는 복잡한 CSS 코드를 작성하지 않고도 원하는 스타일 효과를 쉽게 얻을 수 있습니다. 전반적으로 Materialise CSS는 아름답고 반응성이 뛰어난 웹 애플리케이션을 빠르고 쉽게 만들고자 하는 개발자에게 탁월한 선택입니다.

위 내용은 Materialise CSS의 다양한 유틸리티 클래스는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!