MAD - Header Layout

MAD Frontend 개발 시 규약

MAD 는 BootStrap 기반으로 프론트를 개발합니다.

따라서, 다음의 규약을 유지해 주십시오

 

1. 섹션의 헤더에 h4 > span 처리 하고, inline Bold 처리를 하여 어느 섹션에서 작업중인지 구분합니다.
    ( 향후 자바스크립트 작업에서 해당 레이어 선택시 색상을 데이터 색상으로 변경합니다 )

2. 위제스터를 활용하여 모든 레이아웃에 공통 적용합니다.

3. 인용구를 넣어 사용자로 하여금 workflow 를 유지할 수 있도록 돕는 말 문구를 입력 해 주세요

4. 인용구 사이에 버튼은 공통입니다. ( help ) 액션 버튼을 통해 사용자로 하여금 기능을 이해할 수  있도록 해 주세요.

5. 유틸성 버튼 그룹 입니다. 대부분 다운로드 관련이나 클라이언트로 데이터 전송 시 사용합니다.

6. 서버 전송하기 위한 버튼 그룹입니다. 5번과 전혀다른 성격으로 클라이언트에서 서버로의 전송시 color function 을 사용하여 버튼 색상을 지정하십시오.

7. 컨텐츠 영역입니다. 선택 시 color function 이 사용될 수 있도록 유도해 주세요.

<div class="col-lg-4">
	<section class="widget">
		<header>
			<h4>
				<span   class="font13"
					    style="font-weight: bold">
					    <i  class="fa fa-edit"
                            style="vertical-align: middle;font-size: 14px;"></i>
					    제품(서비스) 조회 및 선택
				</span>
			</h4>
            <div class="widget-controls">
                <a  data-widgster="toleft"
                    title="change width to left"
                    href="#">
                    <i class="glyphicon glyphicon-chevron-left"></i>
                </a>
                <a  data-widgster="expand"
                    title="Expand"
                    href="#">
                    <i class="glyphicon glyphicon-chevron-up"></i>
                </a>
                <a  data-widgster="collapse"
                    title="Collapse"
                    href="#">
                    <i class="glyphicon glyphicon-chevron-down"></i>
                </a>
                <a  data-widgster="toright"
                    title="change width to right"
                    href="#">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
                <a  data-widgster="restore"
                    title="Restore"
                    href="#">
                    <span class="glyphicon glyphicon-repeat"></span>
                </a>
                <a  data-widgster="fullscreen"
                    title="Fullscreen"
                    href="#">
                    <i class="glyphicon glyphicon-fullscreen"
                          style="font-size: 11px"></i>
                </a>
            </div>
		</header>
		<div class="body">
            <div class="gradient_middle_border" style="width: 100%; height: 2px"></div>
            <blockquote class="font13"
                        style="margin-top: 5px;">
                1. 제품(서비스) 선택
                <div style="float: right;">
                    <button class="btn btn-transparent btn-xs"
                            style="margin-top: -3px; color: #acacac; background: rgba(51,51,51,.2); padding: 1px 9px;"
                            onclick="return true;">
                        Help
                        <i  class="fa fa-question"
                            style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
                    </button>
                </div>
            </blockquote>
            <div class="clearfix"
                 style="margin-bottom: 10px; margin-top: 10px;">
                <div style="float: left">
                    <button type="button"
                            id="copychecker"
                            class="btn btn-default btn-sm">
                        Copy
                    </button>
                    <button type="button"
                            id="csvchecker"
                            class="btn btn-default btn-sm">
                        CSV
                    </button>
                    <button type="button"
                            id="excelchecker"
                            class="btn btn-default btn-sm">
                        Excel
                    </button>
                    <button type="button"
                            id="printchecker"
                            class="btn btn-default btn-sm hidden">
                        Print
                    </button>
                    <button type="button"
                            id="pdfchecker"
                            class="btn btn-default btn-sm hidden">
                        PDF
                    </button>
                </div>

                <div style="float: right">
                    <button class="btn btn-primary btn-block btn-sm"
                            data-target="#my_modal2"
                            data-toggle="modal"
                            id="modal_popup_id"
                            type="button">
                        제품(서비스) 추가
                    </button>
                </div>
            </div>
			<div    class="box box-primary"
				    style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
				<div    class="box-body">
					<table  class="display"
						    style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"
						    id="pdservice_table">
                    </table>
				</div>
			</div>
		</div>
	</section>
</div>