미디어위키:Helper.css

/**
 * 헬퍼 클래스 모음
 *
 * 자주 사용되는 스타일을 미리 정의해 놓고 재활용하기 위한 문서
 * 클래스에 빨리 친숙해지기 위해 널리 사용되는 프레임워크 `Bootstrap`에서
 * 뼈대를 빌려왔습니다. 단, (커스텀) 주석이 붙은 경우는 예외입니다.
 *
 * 다수의 틀 또는 문서에서 이용될 가능성이 높으므로, 이미 등록된 클래스의 이름을
 * 변경하거나 삭제하고자 할 때는 먼저 토론을 거쳐 주세요.
 *
 * 작성자: wiki-chan.net
 * 저작권: CC-BY-SA 3.0
 */

/* 플로트 클리어링
 ----------------------------------------*/
.group::after {
    content: "";
    display: table;
    clear: both;
}

/* 디스플레이 속성
 ----------------------------------------*/
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }

/* 너비 및 높이
 ----------------------------------------*/
.w-100 { width: 100% !important; }
.w-50 { width: 50% !important; }
.h-100 { height: 100% !important; }

/* 플로트
 ----------------------------------------*/
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

/* 마진
 ----------------------------------------*/
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.m-0 { margin: 0 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }

.m-1 { margin: 1rem 1rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mr-1 { margin-right: 1rem !important; }
.mb-1 { margin-bottom: 1rem !important; }
.ml-1 { margin-left: 1rem !important; }
.mx-1 { margin-right: 1rem !important; margin-left: 1rem !important; }
.my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.m-2 { margin: 1.5rem 1.5rem !important; }
.mt-2 { margin-top: 1.5rem !important; }
.mr-2 { margin-right: 1.5rem !important; }
.mb-2 { margin-bottom: 1.5rem !important; }
.ml-2 { margin-left: 1.5rem !important; }
.mx-2 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
.my-2 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }

.m-3 { margin: 3rem 3rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mr-3 { margin-right: 3rem !important; }
.mb-3 { margin-bottom: 3rem !important; }
.ml-3 { margin-left: 3rem !important; }
.mx-3 { margin-right: 3rem !important; margin-left: 3rem !important; }
.my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* 패딩
 ----------------------------------------*/
.p-0 { padding: 0 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1 { padding: 1rem 1rem !important; }
.pt-1 { padding-top: 1rem !important; }
.pr-1 { padding-right: 1rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pl-1 { padding-left: 1rem !important; }
.px-1 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.p-2 { padding: 1.5rem 1.5rem !important; }
.pt-2 { padding-top: 1.5rem !important; }
.pr-2 { padding-right: 1.5rem !important; }
.pb-2 { padding-bottom: 1.5rem !important; }
.pl-2 { padding-left: 1.5rem !important; }
.px-2 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-2 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.p-3 { padding: 3rem 3rem !important; }
.pt-3 { padding-top: 3rem !important; }
.pr-3 { padding-right: 3rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pl-3 { padding-left: 3rem !important; }
.px-3 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-3 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

/* 둥근 모서리
 ----------------------------------------*/
.rounded { border-radius: 0.25rem; }
.rounded-top { border-top-right-radius: 0.25rem; border-top-left-radius: 0.25rem; }
.rounded-right { border-bottom-right-radius: 0.25rem; border-top-right-radius: 0.25rem; }
.rounded-bottom { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
.rounded-left { border-bottom-left-radius: 0.25rem; border-top-left-radius: 0.25rem; }
.rounded-circle { border-radius: 50%; }

/* 세로 정렬
 ----------------------------------------*/
.align-baseline { vertical-align: baseline !important; }
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }

/* 텍스트 정렬
 ----------------------------------------*/
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* 텍스트 확장
 ----------------------------------------*/
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 글꼴 크기 (커스텀)
 ----------------------------------------*/
.text-large { font-size: 1.25rem; }
.text-larger { font-size: 1.5rem; }
.text-small { font-size: .846rem; line-height: normal; }
.text-smaller { font-size: .769rem; line-height: normal; }

/* 글꼴 스타일
 ----------------------------------------*/
.font-weight-normal { font-weight: normal !important; }
.font-weight-bold { font-weight: bold !important; }
.font-italic { font-style: italic !important; }

/* 글꼴 색상
 ----------------------------------------*/
.text-white { color: white !important; }
.text-muted { color: #888 !important; }
.text-warning { color: red !important; }

/* 기타
 ----------------------------------------*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 레거시 (대체 후 삭제 필요)
 ----------------------------------------*/
.smaller { font-size: .92rem !important; }
.indented { padding-left: .5em !important; }
.discrete { color: #aaa !important; }