표시 유틸리티
표시 유틸리티 (Display)
페이지 섹션에서 요소가 어떻게 표시되는지(inline, block, flex, grid, table, none 등) 제어하는 유틸리티 클래스예요. 클래스별 결과를 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
Inline
.pf-v6-u-display-inline
Block
.pf-v6-u-display-block
Inline block
.pf-v6-u-display-inline-block
Flex
.pf-v6-u-display-flex
Inline flex
.pf-v6-u-display-inline-flex
Grid
.pf-v6-u-display-grid
Inline grid
.pf-v6-u-display-inline-grid
Table, table row, table cell
- table-cell
- table-cell
- table-cell
- table-cell
- table-cell
- table-cell
None
- Hidden on sm breakpoint
문서 (Documentation)
개요 (Overview)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-display-inline-block-on-lg
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-display-inline{-on-[breakpoint]} |
* | display: inline으로 설정해요. |
.pf-v6-u-display-block{-on-[breakpoint]} |
* | display: block으로 설정해요. |
.pf-v6-u-display-inline-block{-on-[breakpoint]} |
* | display: inline-block으로 설정해요. |
.pf-v6-u-display-flex{-on-[breakpoint]} |
* | display: flex로 설정해요. |
.pf-v6-u-display-inline-flex{-on-[breakpoint]} |
* | display: inline-flex로 설정해요. |
.pf-v6-u-display-grid{-on-[breakpoint]} |
* | display: grid로 설정해요. |
.pf-v6-u-display-inline-grid{-on-[breakpoint]} |
* | display: inline-grid로 설정해요. |
.pf-v6-u-display-table{-on-[breakpoint]} |
* | display: table로 설정해요. |
.pf-v6-u-display-table-row{-on-[breakpoint]} |
* | display: table-row로 설정해요. |
.pf-v6-u-display-table-cell{-on-[breakpoint]} |
* | display: table-cell로 설정해요. |
.pf-v6-u-display-none{-on-[breakpoint]} |
* | display: none으로 설정해요. |