guide v11x

Class

관리자에서만 사용되는 내용이 일부 포함되어 있습니다.
사용자와 같은 페이지를 이용시 주의하여 사용해주시기 바랍니다.

Admin Class Guide
Class	사용	관련	설명
.show-for-[size]	공통	`small` (0) `medium` (640px) `xmedium` (800px) `large` (1024px) `xlarge` (1200px) `xxlarge` (1440px) `xxxlarge` (1600px)	상세 내용은 Foundation 참조.
.hide-for-[size]	공통		상세 내용은 Foundation 참조.
.preview-[visible]	관리자	`show` `hide`	승인, 댓글등의 페이지에서 우측에 상세내용이 나오는 특정 상황에 사용됩니다. 상세 내용이 활성화되면 콘텐츠를 보이거나 감춥니다.
.hstack	공통	`gap-1` (0.25rem) `gap-2` (0.5rem) `gap-3` (1rem) `gap-4` (1.5rem) `gap-5` (2rem)	[display:flex]와 [flex-direction:row]를 사용한 시스템입니다. 자식 콘텐츠가 가로배열됩니다.
.vstack	공통		[display:flex]와 [flex-direction:column]를 사용한 시스템입니다. 자식 콘텐츠가 세로배열됩니다.

기본

<?php // 3차메뉴 필요할 경우 삽입 ?>

<article class="grid-body">
    <section class="grid-content">
        <article class="grid-comp grid-sticky">
            <?php // checkbox가 있을 경우 삽입 ?>
            <?php // breadcrumb이 필요할 경우 삽입 ?>
        </article>
        <article class="grid-view">
            <?php // 본문 내용 삽입 ?>
        </article>
        <article class="grid-comp grid-sticky bottom">
            <?php // 페이징 삽입 ?>
        </article>
    </section>
</article>

3차메뉴

<article class="navigator-container">
    <nav class="navigator" role="navigation">
        <a href="#" class="navigator-item active">메뉴명1</a>
        <a href="#" class="navigator-item">메뉴명2</a>
        <a href="#" class="navigator-item">메뉴명3</a>
    </nav>
</article>

Checkbox

<div class="table-chkbox">
    <label class="show-for-sr" for="chkall">전체선택</label>
    <input type="checkbox" name="chkall" id="chkall" title="전체선택" autocomplete="off" />
</div>

Breadcrumb

<ul class="adm-breadcrumb" role="navigation">
    <li class="adm-breadcrumb-item">
        <button type="button" class="btn btn-primary btn-confirm">등록</button>
    </li>
    <li class="adm-breadcrumb-divider"></li>
    <li class="adm-breadcrumb-item">
        <div class="adm-paginate">30건</div>
    </li>
</ul>

Table

<table class="table table-mobile hover unstriped" summary="게시판목록">
    <caption class="show-for-sr">게시판목록</caption>
    <colgroup>
        <col width="80" />
        <col width="480" />
        <col width="150" />
        <col width="150" />
        <col width="*" />
    </colgroup>
    <thead>
        <tr>
            <th scope="col" class="text-center">#</th>
            <th scope="col">게시판명</th>
            <th scope="col" class="text-center preview-hide">테이블명</th>
            <th scope="col" class="text-center preview-hide">스킨</th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <a href="#" class="table-link">자유게시판</a>
            </td>
            <td>bbs_1</td>
            <td>default</td>
            <td>
                <div class="hstack gap-1">
                    <button type="button" class="btn btn-sm btn-tb btn-tb-primary">수정</button>
                    <button type="button" class="btn btn-sm btn-tb">삭제</button>
                    <button type="button" class="btn btn-sm btn-tb">주소복사</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Form

<article class="grid-body">
    <form class="grid-content">
        <article class="grid-view">
            <?php // 그룹 내용 삽입 ?>
        </article>
        <article class="grid-comp grid-sticky bottom d-block">
            <div class="reg-form-save text-right">
                <button type="button" class="btn btn-primary btn-confirm">적용</button>
            </div>
        </article>
    </form>
</article>

Group

<article class="reg-form-group">
    <div class="reg-form-title">그룹명</div>
    <div class="reg-form-container">
        <section class="reg-form-row">
            <label for="title" class="reg-form-label">레이블명</label>
            <article class="reg-form-col">
                <div class="reg-form-content">
                    <input type="text" name="title" id="title" placeholder="자유게시판" title="게시판명" />
                </div>
            </article>
        </section>
    </div>
</article>

Modal

<div class="reveal" data-reveal data-close-on-click="false" data-close-on-esc="false" data-animation-in="fade-in" data-animation-out="fade-out">
    <header class="reveal-header">
        <div class="reveal-title">모달명</div>
        <button type="button" class="reveal-close" aria-label="close modal"></button>
    </header>
    <section class="reveal-container">
        <?php // 본문 내용 삽입 ?>
    </section>
    <footer class="reveal-footer">
        <button type="submit" class="btn btn-primary btn-confirm">적용</button>
    </footer>
</div>

Fine SE 11

레이아웃

Class

기본

3차메뉴

Checkbox

Breadcrumb

Table

Form

Group

Modal