보조 클래스

여백

이 일련의 유틸리티 클래스는 요소에 margin 및 padding을 추가할 수 있으며, 기본값은 모두 8px의 배수입니다.

클래스 이름 형식: .mdui-{속성}-{방향}-{크기}

속성:

• m - margin 설정
• p - padding 설정

방향:

• t - margin-top 또는 padding-top 설정
• b - margin-bottom 또는 padding-bottom 설정
• l - margin-left 또는 padding-left 설정
• r - margin-right 또는 padding-right 설정
• x - margin-left margin-right 또는 padding-left padding-right 설정
• y - margin-top margin-bottom 또는 padding-top padding-bottom 설정
• a - margin 또는 padding 설정

크기:

• 0 - 0px
• 1 - 8px
• 2 - 16px
• 3 - 24px
• 4 - 32px
• 5 - 40px

.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

퀵 플로팅

• .mdui-float-left는 요소를 왼쪽으로 플로팅시킵니다.
• .mdui-float-right는 요소를 오른쪽으로 플로팅시킵니다.

가로 중앙 정렬

임의의 요소에 .mdui-center 클래스를 추가하면 가로로 중앙 정렬됩니다.

세로 중앙 정렬

임의의 요소에 .mdui-valign 클래스를 추가하면 해당 요소 내의 자식 요소들이 세로로 중앙 정렬됩니다.

가로 정렬 방식

• .mdui-text-left 텍스트를 왼쪽으로 정렬합니다.
• .mdui-text-center 텍스트를 중앙으로 정렬합니다.
• .mdui-text-right 텍스트를 오른쪽으로 정렬합니다.

텍스트 대소문자 변환

• .mdui-text-lowercase 텍스트를 소문자로 변환합니다.
• .mdui-text-uppercase 텍스트를 대문자로 변환합니다.
• .mdui-text-capitalize 텍스트의 각 단어 첫 글자를 대문자로 변환합니다.

텍스트 자동 잘림

.mdui-text-truncate 텍스트 길이가 제한을 초과할 때 자동으로 자르고 줄임표(...)로 대체할 수 있습니다.

플로트 해제

부모 요소에 .mdui-clearfix 클래스를 추가하면 플로트를 해제할 수 있습니다.

내용 숨기기

• .mdui-hidden 클래스는 요소를 숨기는 데 사용되며, display: none; 스타일을 추가하는 것과 같습니다. 숨겨진 요소는 페이지 공간을 차지하지 않습니다.
• .mdui-invisible 클래스는 요소를 보이지 않게 만드는 데 사용되지만, 페이지의 공간은 여전히 차지합니다. visibility: hidden; 스타일을 추가하는 것과 같습니다.

반응형 도구

이 유틸리티 클래스들은 미디어 쿼리를 사용하여 기기별로 내용을 숨깁니다. 다음 클래스들이 포함됩니다:

• .mdui-hidden-*: 지정된 너비의 기기에서 숨깁니다.
• .mdui-hidden-*-up: 지정된 너비 이상의 기기에서 숨깁니다.
• .mdui-hidden-*-down: 지정된 너비 이하의 기기에서 숨깁니다.

브라우저 창 크기를 조절하거나 다른 기기에서 아래 예시를 확인하세요. 어두운 부분은 현재 브라우저 창에서 보이는 부분을 나타냅니다.