알림
뒤로



Admin Template Guide

Admin Template의 레이아웃을 구성하는 기본 CSS 사용방법을 안내 드립니다.



  • 기본 레이아웃
  • 타이틀 영역
  • 옵션 영역
  • 일반사용


기본 레이아웃


레이아웃에 필요한 class 안내


card : 레이아웃을 구성할때 필수로 들어가는 class 입니다. <div>태그 간의 일정한 간격을 유지하도록하여 깔끔한 레이아웃이 구성되도록 합니다.
card_border : card의 외곽라인(border)를 추가합니다.
card_width25 : card의 가로길이(width)를 25퍼센트로 지정합니다. 


- 예시 Tag 
<div class="card card_border card_width25">
	contents
</div>


- Web view (PC)


- Web view (Mobile)


- .card_width 종류


card_width(숫자) - 뒤의 숫자는 가로길이(width)의 퍼센트를 의미합니다.

합이 100을 넘게 되면 하단으로 넘어가게 됩니다.

(Mobile해상도에서는 모든 card_width가 100%로 변경 됩니다.)


.card_width10 {width:calc(10% - 15px);}
.card_width20 {width:calc(20% - 15px);}
.card_width25 {width:calc(25% - 15px);}
.card_width30 {width:calc(30% - 15px);}
.card_width33 {width:calc(33.333% - 15px);}
.card_width40 {width:calc(40% - 15px);}
.card_width45 {width:calc(45% - 15px);}
.card_width50 {width:calc(50% - 15px);}
.card_width60 {width:calc(60% - 15px);}
.card_width70 {width:calc(70% - 15px);}
.card_width75 {width:calc(75% - 15px);}
.card_width80 {width:calc(80% - 15px);}
.card_width90 {width:calc(90% - 15px);}
.card_width100 {width:calc(100% - 15px);}




타이틀 영역


타이틀 영역에 필요한 class 안내


card_title : ‘card’안의 타이틀 영역입니다.

subtitle : 타이틀 하단에 설명글이 추가 됩니다.

rightArea : card_title 우측에 영역을 만듭니다.

bottomline : card_title의 하단 라인(bottom_border)을 추가 합니다.

H3,H4,H5  : 타이틀이 들어가는 영역입니다. 중요도에 따라 H3,H4,H5 선택하여 사용합니다.


- 예시 Tag 

<div class="card card_border">
    <div class="card_title bottomline">
        <h3>Title
            <span class="subtitle">Sub Title script</span>
        </h3>
        <div class="rightArea">
            <button class="btn_small btn_sky">Option</button>
            <button class="btn_small btn_green">Option</button>
        </div>
    </div>
    <div class="card card_border">
        contents
    </div>
</div>


- Web view (PC)


- Web view (Mobile)




옵션 영역


옵션영역에 필요한 class 안내


card_option : card 안의 옵션 영역 입니다.
option_section : card_option 내에서 영역을 구분하는 클래스 입니다.
(모바일 해상도에서 option_section영역의 순서데로 하단 배치 됩니다.)

- 옵션내 select, input(Datepicker), button 등은 '/elements/basic.php' 페이지에 여러종류로 준비되어 있습니다.  


- 예시 Tag

<div class="card card_border bg_lightblue">
    <div class="card_option">
        <div class="option_section">
            <span class="first_tit">Date :</span>
            <input type="text" class="Datepicker cald_St"> ~
            <input type="text" class="Datepicker cald_St">
        </div>
        <div class="option_section">
            <span>등급 :</span>
            <select style="width:100px;">
                <option>level-A</option>
                <option>level-B</option>
                <option>level-C</option>
            </select>
        </div>
        <div class="option_section">
            <span>검색어 :</span>
            <input type="text" style="width:120px;" />
            <button class="btn_small btn_blue">검색</button>
        </div>
    </div>
</div>


- Web view (PC)


- Web view (Mobile)




일반사용


로고 변경 안내

경로 : assets/include/header.html

<h1>
    <img src="../assets/images/logo_icon.png" alt="logo" >
    <span class="company_name">Super N</span>
</h1>

<img> : 로고 이미지 파일입니다.

<span> : 회사명 또는 추가 입력필드 입니다.




왼쪽메뉴 수정 안내
경로 : assets/include/left_menu.html

<div id="lnb">
  <ul>
    <li id="m_dashboard">
        <a href="#none"><i class="di-dashboard mnicon_1"></i>Dashboard<i class="demo-icon icon-down-open arrow" aria-hidden="true"></i></a>
        <ul>
            <li id="SalesD"><a href="../dashboard/sales.php">Sales Dashboard</a></li>
            <li id="basicD"><a href="../dashboard/bacic.php">Basic Dashboard</a></li>
        </ul>
    </li>
    <div class="mline">PAGES</div>
    <li id="m_login">
        <a href="../login/login.php"><i class="di-door-closed mnicon_1"></i>로그인</a>
    </li>
    .
    .
    .
    .
    .
  </ul>
</div>




왼쪽메뉴 - 아이콘 변경 안내 

<a href="#none"><i class="di-dashboard mnicon_1"></i>Dashboard<i class="demo-icon icon-down-open arrow" aria-hidden="true"></i></a>

 <i>태그의 ‘di-dashboard’ class를 교체하면 변경됩니다.

icon 경로 : /icon/basic.php

/icon/basic.php 페이지에서 알맞은 아이콘을 선택하여 우측의 class명을 사용합니다.




왼쪽메뉴 - 이동한 페이지 메뉴On/Off

<div id="lnb">
  <ul>
    <li id="m_dashboard">
        <a href="#none"><i class="di-dashboard mnicon_1"></i>Dashboard<i class="demo-icon icon-down-open arrow" aria-hidden="true"></i></a>
        <ul>
            <li id="SalesD"><a href="../dashboard/sales.php">Sales Dashboard</a></li>
            <li id="basicD"><a href="../dashboard/bacic.php">Basic Dashboard</a></li>
        </ul>
    </li>
    .
    .
    .
    .
    .
  </ul>
</div>

<li>태그의 ‘ID’값으로 구분합니다. (예  id="m_dashboard" )

<script type="text/javascript">//menu On/Off
    $(function(){
        $('#m_dashboard').addClass('on').find('ul').css('display','block').children('#basicD').addClass('on');
    });
</script>

위의 script는 각페이지의 상단에 위치하고 있습니다. ID를 왼쪽메뉴 ID와 일치시키면 메뉴on/off가 적용 됩니다.